Question

//我正在尝试使用DataTable插件创建表格，我需要为表格中的每一列提供单独的过滤列，我正在使用javascripted资源获取数据 https://jsfiddle.net/ImmanuelRocha/zu0h3yca/ 例如：https://datatables.net/examples/data_sources/js_array.html

var dataSet = [
  ["Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$320,800"],
  ["Garrett Winters", "Accountant", "Tokyo", "8422", "2011/07/25", "$170,750"]];

$(document).ready(function() {
      // Setup - add a text input to each footer cell
      $('#example tfoot th').each(function() {
        var title = $(this).text();
        $(this).html('<input type="text" placeholder="Search ' + title + '" />');
      });



      // DataTable
      var table = $('#example').DataTable({
        data: dataSet,
        columns: [{
          title: "Name"
        }, {
          title: "Position"
        }, {
          title: "Office"
        }, {
          title: "Extn."
        }, {
          title: "Start date"
        }, {
          title: "Salary"
        }]
      });

      // Apply the search
      table.columns().every(function() {
        var that = this;

        $('input', this.footer()).on('keyup change', function() {
          if (that.search() !== this.value) {
            that
              .search(this.value)
              .draw();
          }
        });
      });

Answer 1

在表格中添加<tfoot></tfoot>标记，如：

<tfoot>
    <tr>
        <th></th>
    </tr>
</tfoot>

和Jquery代码：

$(document).ready(function() {
    var data = [];
    data.push(
        [1,"Sasha","Brenna","0800 1111"],
        [2,"Sage","Mia","(01012) 405872"],
        [3,"Chelsea","Allistair","076 0578 0265"],
        [4,"Uta","Savannah","070 1247 5884"],
        [5,"Remedios","Berk","0995 181 0007"],
        [6,"Ruby","Wayne","0800 1111"],
        [7,"Faith","Fredericka","(01709) 099879"],
        [8,"Myra","Harrison","070 4241 9576"],
        [9,"Drake","Miriam","0800 733635"],
        [10,"Reed","Shannon","076 8597 5067"]
    );

    var count = 0;  // To manage the column count for which filter is required
    $('#data_table').DataTable( {
        data:           data,

        initComplete: function (){
            this.api().columns().every( function () {
                if(count == 2)
                {
                    var column = this;
                    var select = $('<select><option value=""></option></select>')
                        .appendTo( $(column.footer()).empty() )
                        .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>' )
                    });
                }

                count++;
            });
        }
    });
});

Working Fiddle

Working Fiddle for all column filter

使用DataTable进行单独的列搜索，来自java脚本的数据源

1 个答案: