【问题标题】:How to search datatable using column name?如何使用列名搜索数据表?
【发布时间】:2020-05-07 11:50:43
【问题描述】:

我正在尝试基于两列搜索和过滤数据表中的数据。 下面是我用于搜索和重绘数据表的代码。 (http://live.datatables.net/hapijuri/1/edit)

$(document).ready( function () {
  var table = $('#example').DataTable({
    "columns": [  
      { title: 'title0', name: 'name0'},
      { title: 'title1', name: 'name1'},
      { title: 'title2', name: 'name2'},
      { title: 'title3', name: 'name3'},
      { title: 'title4', name: 'name4'},
      { title: 'title5', name: 'name5'},
    ]
  });
  table.column(1).search('Software Engineer')
      .column(0).search('Bradley Greer').draw();
} );

此代码的问题在于它适用于列号(或索引)而不是列名,但是我有我想要搜索的列名。

有没有办法根据列名而不是数据表 jquery 中的索引进行搜索?

编辑:提供更多详细信息以确保我能够很好地提出问题。 所以我在 UI 上显示了一个数据表,我正在使用数据表数据在另一个选项卡中构建一个数据透视表(使用 pivottable.js)。

单击数据透视表中的数字时,我希望过滤 UI 上的数据表数据,以便仅显示与数据透视表中单击的数字相关的行。

我正在从数据透视表中获取与该数字对应的列名和值。我只需要在数据表中搜索这些列值并相应地显示过滤器数据表。

正如我分享的示例链接中所指出的,我能够根据列索引搜索数据,并且同样会反映在 UI 上。 我正在寻找的是基于列名而不是列值进行搜索。

【问题讨论】:

    标签: javascript jquery datatables


    【解决方案1】:

    使用列名搜索数据表

    var table = $('#datatable-name').DataTable();
    
    table.column('columnname:name').search("keyword").draw();
    

    【讨论】:

      【解决方案2】:

      为了防止从表中搜索列,您必须添加searchable:falsesearchable & orderable 的默认值是 true

      var table = $('#example').DataTable({
          "columns": [  
              { title: 'title0', name: 'name0', "searchable": true},
              { title: 'title1', name: 'name1'},
              { title: 'title2', name: 'name2'},
              { title: 'title3', name: 'name3'},
              { title: 'title4', name: 'name4'},
              { title: 'title5', name: 'name5'},
          ]      
      });
      

      除非您有服务器端数据处理,否则无需添加以下代码。

       table.column(1).search('Software Engineer')
           .column(0).search('Bradley Greer').draw();
      

      【讨论】:

      • 我需要通过代码根据特定列应用过滤器,并且应该对 UI 上的数据表进行相应过滤。
      • 说,在 5 列数据表中,我需要在 column1 = test1 和 column2 = test2 处应用搜索。 UI 上的数据表应该相应地显示过滤后的数据。我能够实现它,但使用列的索引号。我希望能够通过我的 javascript 代码根据列名而不是列号进行搜索。
      • 如果你只需要搜索 column1 , column2 添加 searchable:true 到那些。
      • @Sreeraj_ms 编辑了问题以更好地解释它。我不是在 UI 上寻找搜索字段。我正在寻找基于列名和列值以编程方式过滤 UI 上的数据。
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2014-09-23
      • 2021-09-16
      • 2022-01-24
      • 1970-01-01
      • 1970-01-01
      • 2023-04-03
      相关资源
      最近更新 更多