如何激活此表中的排序？

问题描述：

我正在使用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'); 
         } 
        } 
    ] 
});

这此过滤器做（这是阿贾克斯成功调用）：

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); 
});

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

检查：https://jsfiddle.net/cubttgow/23/ –

HTML标签不正确 –

@JaydeepPandya HTML是什么？ –

答

如果您查看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();

如何激活此表中的排序？

相关推荐