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

Question

我正在为我的 php 应用程序在 table 的每一列的顶部使用插件 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 + '" />');
            }
        });

这是我的数据table

 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

我正在使用这个属性的数据table，但无法像在 Google 文档[=17= 中那样仅为过滤图标和下拉菜单定义事件侦听器]

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 link.

$(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 获得类似的功能。它为您提供了数据表的排序、筛选和搜索选项。

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

How can I add filteration drop down on a specific column in datatable plugin along with searching and sorting

jquery

filtering

datatables

附加输入以搜索列的代码

这是我的数据table

要禁用用于搜索的排序 onClick 事件，我正在使用 stopPropagation 函数，以便它仅在单击排序图标时进行排序