如何在datatable插件中的特定列上添加过滤下拉以及搜索和排序

Question

我正在使用插件http://datatables.net/作为我的php应用程序在桌面的每一列上我给用户一个搜索工具，并且现在对单个列进行排序我想为每个列添加过滤点击DataTable的事件以下是我的jQuery代码

代码，用于附加用于搜索列

的输入

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
     $('#table2 thead th').slice(3).each(function () {
            var title = $('#table2 thead th').eq($(this).index()).text();
            if ($(this).hasClass('disableColumn')) {
                $(this).html('<label>' + title + '<label/>');
            } else {
                $(this).html('<input type="text" placeholder="' + title + '" />');
            }
        });

这是我的数据表

 var table = $('#table2').DataTable({
        "dom": 'C<"clear">lfrtip',
      
        "sPaginationType": "full_numbers",

        columnDefs: [{
            targets: 'disableColumn', 
            orderable: false
        }],
//     "iDisplayLength": 10,
//        "bJQueryUI": true,
//        "bFilter": true, 
  
        "aaSorting": [],
        "colVis": {
            "activate": "click",
            "showAll": "Show all",
            "showNone": "Show none",
            "restore": "Restore",
            "bRestore": true,
            "scrollY": "200px",
            "stateSave": true,
            "buttonText": "Select Column",
            "scrollCollapse": true,
            "exclude": [0, 1, 2],
            "label": function (index, title) {
                var getplaceholder = $(title).attr('placeholder');
                var getlabel = $(title).text();
                if (typeof getplaceholder === 'undefined') {
                    return getlabel;
                } else {
                    return getplaceholder;
                }
            }
        }
       
    });

显示搜索结果我正在这样做

  var tableResult = table.columns().eq(0);
    if (tableResult !== null) {
        tableResult.each(function (colIdx) {
            $('input', table.column(colIdx).header()).on('keyup change', function () {
                table
                        .column(colIdx)
                        .search(this.value)
                        .draw();
            });
        });
    }

禁用排序onClick事件进行搜索我正在使用stopPropagation函数，以便它只对点击图标

进行排序

function stopTableSorting(e) {
        if (!e)
            var e = window.event;
        e.cancelBubble = true;
        if (e.stopPropagation)
            e.stopPropagation();
    }
    $("#table2 thead tr th input").click(function (e) {
        stopTableSorting(e);
    });

现在我想在thead中添加另一个图标以及输入字段（搜索）和排序图标，它是过滤图标（）作为下拉列表。 Google文档也提供此功能，请参阅图片 google docs

我正在使用datatable的这个属性但是无法仅为过滤图标定义事件监听器，并且只能像在Google Docs中那样定义下拉列表

initComplete: function () {
            var api = this.api();
 
            api.columns().indexes().flatten().each( function ( i ) {
                var column = api.column( i );              
                var select = $('<i class="fa fa-filter"></i>').slice(3)
                    .appendTo( $(column.header()) )
                    .on( 'change', function () {
                        var val = $.fn.dataTable.util.escapeRegex(
                            $(this).val()
                        );
                console.log(val);
                        column
                            .search( val ? '^'+val+'$' : '', true, false )
                            .draw();
                    } );
                column.data().unique().sort().each( function ( d, j ) {
                    select.append( '' );//<ul><li value="'+d+'">'+d+'</li></ul>
                } );
            } );
        }

Answer 1

您可能正在寻找this类型的解决方案。我发现该解决方案适用于服务器端。

如果你想坚持客户端搜索只需要删除ajax链接。

$(document).ready(function() {
    var dataTable = $('#employee-grid').DataTable();
        $('.search-input-text').on( 'keyup click', function () {   // for text boxes
            var i =$(this).attr('data-column');  // getting column index
            var v =$(this).val();  // getting search input value
            dataTable.columns(i).search(v).draw();
        });
});

Answer 2

您可以使用jQWidget - jQxGrid获得类似的功能。它为您提供DataTables上的排序，过滤器和搜索选项。