如何在此表中激活排序？

Posted 2023-05-09

【中文标题】如何在此表中激活排序？

【英文标题】：How to activate sorting in this table?

【发布时间】：2017-09-07 16:29:14

【问题描述】：

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

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

这是预期的顺序：

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

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

我该如何处理？

这是我的桌子：

<table id="tbl_surat_all" class="table table-striped table-bordered table-hover dataTables-example" >
<thead>
   <tr>
      <th class='text-center' >No</th>
      <th class="text-center" >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）行为？

【问题讨论】：

检查这个：jsfiddle.net/cubttgow/23

HTML 标签不正确

@JaydeepPandya 什么 HTML？

@KissMe 评论 /*从 php 收集的数据*/ @JaydeepPandya 哦..实际上这只是一个注释。谢谢提醒我。

【参考方案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();