仅根据DataTables中第一列的下拉值筛选表数据

filter table data based on drop down values of first column only in DataTables

本文关键字：一列 数据 筛选 DataTables      更新时间：2023-10-21

下面介绍了为数据表网站上提到的所有列选择选项的功能。我如何使它只在第一列的下拉列表值上过滤表数据，并将选择下拉列表放在其他地方，而不是通常的标题部分。参见例如的链接

initComplete: function () {
    var api = this.api();
    api.column().indexes().flatten().each( function (i) {
        var column = api.column(i);
        var select = $('<select><option value=""></option></select>').appendTo('$selectTriggerFilter').on( 'change', function () {
        var val = $.fn.dataTable.util.escapeRegex($(this).val());
             column.search( val ? '^'+val+'$' : '', true, false ).draw();
            } );
        column.data().unique().sort().each( function ( d, j ) {
            select.append( '<option value="'+d+'">'+d+'</option>' )
        } );
    } );
}

我正在使用以下代码。一旦我删除了dom选项，选择选项就会出现，但不是没有dom。

$(document).ready(function() {
     $('#tableTrigger').DataTable({
    "lengthMenu": [ [10, 25, 50, 100, -1], [10, 25, 50, 100, "All"] ],
    searching: false,
    "scrollY": "200px",
    "dom": 'frtipS',
    "deferRender": true,
    initComplete: function () 
    {
        var api = this.api();
        api.columns().indexes().flatten().each( function ( i ) 
                {
                            if(i == 0){ //Create just one SelectBox
                                var select = $('<select class='+i+'><option value=""></option></select>')
                                            .appendTo( '#selectTriggerFilter')
                                            .on( 'change', function () {
                                        var val = $(this).val();
                                        column( i ).search( val ? '^'+$(this).val()+'$' : val, true, false ).draw();
                                    });
                                column( i ).data().unique().sort().each( function ( d, j ) {
                                    select.append( '<option value="'+d+'">'+d+'</option>' );
                                } );
                        }
                            else return;
               });
    } 
  }); 
});

原因

你的代码有一些问题：

  • searching不应设置为false，否则search()功能将不起作用
  • 未定义column变量

解决方案

以下是已更正的代码。

$(document).ready(function() {
   $('#tableTrigger').DataTable({
        "lengthMenu": [
            [10, 25, 50, 100, -1],
            [10, 25, 50, 100, "All"]
        ],
        "scrollY": "200px",
        "dom": 'rtipS',
        // searching: false,
        "deferRender": true,
        initComplete: function () {
           var column = this.api().column(0);
           var select = $('<select class="filter"><option value=""></option></select>')
               .appendTo('#selectTriggerFilter')
               .on('change', function () {
                  var val = $(this).val();
                  column.search(val ? '^' + $(this).val() + '$' : val, true, false).draw();
               });
           column.data().unique().sort().each(function (d, j) {
               select.append('<option value="' + d + '">' + d + '</option>');
           });
        }
    });
});

票据

  • 我在"dom": 'frtipS'中省略了f，因为我认为您最初想通过将searching设置为false来排除它。如果您希望在下拉筛选器中包含搜索框，请包含f。

  • 如果在dom属性中省略了l，则设置lengthMenu是没有意义的。

演示

请参阅此jsFiddle以获得更正代码的演示。

您可以将搜索部分放在dom中的任何位置。然后您的事件调用（单击、选择、向上键）。如下所示调用serachapi。

var dTable= $("example").DataTable();
dTable.columns(i).search(v).draw();

这里i是您的数据表列索引，v是搜索值。

相关文章：