jQuery数据表从数据集中选择包含特定数据的行

时间:2018-07-25 21:01:52

标签: jquery datatables datatables-1.10

我正在使用jQuery DataTables,并正在寻找一种使用按钮从整个数据集中选择包含特定值(在本例中为“ foo”)的行的方法。

这是我用来填充表格的脚本:

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/pdfmake-0.1.18/dt-1.10.12/b-1.2.2/b-html5-1.2.2/b-print-1.2.2/r-2.1.0/se-1.2.0/datatables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/pdfmake-0.1.18/dt-1.10.12/b-1.2.2/b-html5-1.2.2/b-print-1.2.2/r-2.1.0/se-1.2.0/datatables.min.js"></script>

var oTable = $('#table').DataTable({
  'ajax': {
      url: 'script-to-return-json-row-data.php',
      type: "POST",
      dataSrc: function ( data ) {
              return data;
      },
      'columns': [
        { 
            "data": "name",                   
            "render": function ( data, type, row ) {
                return data;
        }
       ]

  }
});

script-to-return-json-row-data.php接收的样本数据集看起来像这样:

[ ["name":"a-name-i-want-to-select","specific-value":"foo"], ["name":"a-name-i-dont-want-to-select","specific-value":"bar"] ]

过去,我已经能够使用下面的脚本来选择包含特定类的行

$('#select-specific-values-button').click(function(e){
  oTable.rows( {search:'applied'} ).every(function(rowIdx, tableLoop, rowLoop){
        if($(this.node()).hasClass('class-name')){
            $(this.node()).addClass('selected');
        }
  });
});

但是,我想知道是否有一种方法可以修改上面的代码,以仅选择行数据specific-value等于foo的行。关于如何执行此操作的任何想法?

我知道以下代码无法正常工作,但这应该可以很好地说明我要完成的工作:

$('#select-specific-values-button').click(function(e){
  oTable.rows( {search:'applied'} ).every(function(rowIdx, tableLoop, rowLoop){
        // if($(this).rowIdx.data.specific-value == 'foo'){
        //     $(this.node()).addClass('selected');
        // }
  });
});

1 个答案:

答案 0 :(得分:1)

这最终为我工作:

$('#select-specific-values-button').click(function(e){
   oTable.rows( {search:'applied'} ).every(function(rowIdx, tableLoop, rowLoop){
        if(oTable.row( rowIdx ).data().specific-value == 'foo'){
             $(this.node()).addClass('selected'); 
        }
   });  
});