Question

我正在使用DataTable插件。链接页面中的示例非常棒。但我有一个问题。

在示例中，用户可以在搜索后对数据表进行排序。我成功地做到了这一点但是当我创建一个过滤器时，排序就搞砸了。

这是预期的顺序：

页面显示数据表中的所有数据
用户执行过滤器（按某些过滤器显示数据。如按日期，按状态，按国家/地区等）
页面显示搜索过滤器的某些数据
用户可以使用文本进行搜索以查看较少的数据
用户可以按列进行排序

在我的脚本中，代码一直工作到第3点。当用户进行搜索时，重置过滤后的数据以显示所有数据（未过滤）

我该如何处理？

这是我的表：

<table id="tbl_surat_all" class="table table-striped table-bordered table-hover dataTables-example" >
<thead>
   <tr>
      <th class='text-center' width="1%">No</th>
      <th class="text-center" width="10%">ID Proyek</th>
   </tr>
   <tbody><!--Data collected from php--></tbody>
   </thead>
   <tbody>

jQuery：

$('.dataTables-example').DataTable({
    pageLength  : 25,
    responsive  : true,
    dom         : '<"html5buttons"B>lTfgitp',
    buttons     : [
                    {extend: 'copy'},
                    {extend: 'csv', title   : "list<?php echo date('d/m/Y'); ?>"},
                    {extend: 'excel', title : "list<?php echo date('d/m/Y'); ?>"},
                    {extend: 'pdf', title   : "list<?php echo date('d/m/Y'); ?>"},
                    {extend: 'print',
                        customize: function (win){
                            $(win.document.body).addClass('white-bg');
                            $(win.document.body).css('font-size', '10px');
                            $(win.document.body).find('table').addClass('compact').css('font-size', 'inherit');
                        }
                    }
    ]
});

这是过滤器做的（这是ajax成功通话）：

var row;
var no = 1;

$('#tbl_surat_all tbody tr').remove();

$.each(response, function(index, data) {

   row = "<tr><td>"+ no++ +"</td><td>"+data.idproyek+"</td></tr>";
   $('#tbl_surat_all tbody').append(row);
});

注意：
结论是如何将搜索行为（默认从库中）复制到我的过滤器（我自己创建的jquery）行为？

Answer 1

如果查看search api，您可以按照图示搜索表格。

var table = $('#example').DataTable();

// #myInput is a <input type="text"> element
$('#myInput').on( 'keyup', function () {
    table.search( this.value ).draw();
} );

或者，您可以在初始化数据表时命名列，并在每列中搜索文本并将其应用于数据表。

columns: [
         {
            name: 'colName',
            data: 'colData',
            type: 'date'
         }

在列上搜索将是

var col = table.columns('colname:name');
col.search('searchTerm');
table.draw();

如何在此表中激活排序？

1 个答案: