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

Question

我正在为我的 php 应用程序使用一个插件 http://datatables.net/ 在表格的每一列的前面我为用户提供了一个搜索和排序单个列的工具现在我想在点击事件上为每一列添加过滤下面的 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);
    });

现在我想要另一个图标以及输入字段（搜索）和排序图标，即过滤图标（）作为下拉菜单。 Google Docs 也提供了这个功能，请看图片 google docs

我正在使用数据表的此属性，但无法像在 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

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

Answer 2

您可能正在寻找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();
        });
});