关闭 jQuery 数据表排序

Posted

技术标签:

【中文标题】关闭 jQuery 数据表排序【英文标题】：Turn off jQuery Datatable sorting 【发布时间】：2018-07-03 15:24:50 【问题描述】：

我正在尝试禁用数据表的默认排序，但它会继续排序。我有两张表，一张显示详细数据，一张按区域分组。在 BLL 中获取数据集中的数据后，我添加了另一行，即其他行的总和。我将它传递给 jquery，即使我设置了“order”：[] 和“aaSorting”：[]，它仍然对其进行排序。当用户单击按钮时，表格会被填充。

我加断点查看json数据的时候，是我想要的顺序（总行在底部），但是在表格中，总行显示在中间（根据它的名字） ，像这样：

Area
--------
Capital Metro
Eastern
National  (this is the total row)
Northeast
Pacific
....


<script>
    function populteTable(ws_url, parameters, table) 
        $.ajax(
            type: "POST",
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            url: ws_url,
            cache: false,
            data: parameters,
        ).done(function (result) 
            table.clear().draw();
            jResult = JSON.parse(result.d);
            table.rows.add(jResult).draw();
        ).fail(function (jqXHR, textStatus, errorThrown) 
            alert(textStatus + ' - ' + errorThrown);
        );
    

    /* I want this sorted */

    tblFacCert = $("#tblFacCert").DataTable(
        jQueryUI: true,
        data: [],
        dom: 'lfrtip',
        stateSave: true,
        order: [[0, "asc"],[1, "asc"]],
        "columns": [
            
                "data": "Area"
            , 
                "data": "District"
            , 
                "data": "FacilityName"
            , 
                "data": "ResponseDueDate",
            , 
                "data": "Completed"
            , 
                "data": "ResponseDate"
            
        ],
        "columnDefs": [
            
                "targets": [5],
                "render": function (data, type, row) 
                    if (null == data)
                        return data;
                    return stringToTimestamp(data);
                
            ,
            
                "targets": [3],
                "render": function (data, type, row) 
                    if (null == data)
                        return data;
                    return stringToDatestamp(data);
                
            
        ],
        "pageLength": 15,
        processing: true
    );

    /* I don't want this sorted */

    tblStats = $("#tblStats").DataTable(
        data: [],
        dom: 'lfrtip',
        stateSave: true,
        "order": [],
        "aaSorting": [],
        "columns": [
            
                "data": "Area"
            , 
                "data": "Total"
            , 
                "data": "Cnt_Certified"
            , 
                "data": "Cnt_NotCertified"
            , 
                "data": "Percentage_cert"
            
        ],
        "pageLength": 15,
        processing: true
    );

    $("#btnSubmit").on("click", function (event) debugger
        var facCertUrl = "../services/easg.asmx/GetComplianceReportData";
        var facCertParams = " 'startDate': '" + $("#tbStartDate").val() + "', 'certID': '" + $('#ddlCertificate').val() + "'";
        var statsUrl = "../services/easg.asmx/GetFacComplianceByArea";
        var statsParams = " 'startDate': '" + $("#tbStartDate").val() + "', 'certID': '" + $('#ddlCertificate').val() + "'";
        populteTable(statsUrl, statsParams, tblStats);
        populteTable(facCertUrl, facCertParams, tblFacCert);
    )
</script>

更新

使用黑曜石的建议：

    tblStats = $("#tblStats").DataTable(
        data: [],
        dom: 'lfrtip',
        stateSave: true,
        "columns": [
            
                "data": "Area"
            , 
                "data": "Total"
            , 
                "data": "Cnt_Certified"
            , 
                "data": "Cnt_NotCertified"
            , 
                "data": "Percentage_cert"
            
        ],
        "columnDefs": [
            
                "aTargets": [0],
                "bSortable" : false
            
        ]
    );

这仍然对第 0 列（区域）进行排序，并防止对其他列进行排序。将 aTargets 设置为 [1,2,3,4] 无效。唯一可行的方法是设置 bSort: false ，其缺点是在填充表格后不允许任何排序。

【问题讨论】：

【参考方案1】：

从 1.10 版开始，Datatables 按以下方式对数据进行排序：

订购

DataTables 在初始化期间没有应用排序。行按 DataTables 读取的顺序显示（即，如果来自 DOM，则为来自 DOM 的原始顺序，如果来自 Ajax/数据，则为数据数组）：

$(function() 
  $('#example').DataTable(     
     "order": []
  );
);

多列排序作为初始状态：

$('#example').dataTable( 
  "order": [
    [ 0, 'asc' ], 
    [ 1, 'asc' ]
  ]
);

示例

$(function() 
  $('#example').DataTable(     
     "order": []
  );
);
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>

<table id="example" class="display"  cellspacing="0">
  <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>2011/04/25</td>
      <td>$320,800</td>
    </tr>
    <tr>
      <td>Garrett Winters</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>63</td>
      <td>2011/07/25</td>
      <td>$170,750</td>
    </tr>
    <tr>
      <td>Ashton Cox</td>
      <td>Junior Technical Author</td>
      <td>San Francisco</td>
      <td>66</td>
      <td>2009/01/12</td>
      <td>$86,000</td>
    </tr>
    <tr>
      <td>Cedric Kelly</td>
      <td>Senior javascript Developer</td>
      <td>Edinburgh</td>
      <td>22</td>
      <td>2012/03/29</td>
      <td>$433,060</td>
    </tr>
    <tr>
      <td>Airi Satou</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>33</td>
      <td>2008/11/28</td>
      <td>$162,700</td>
    </tr>
    <tr>
      <td>Brielle Williamson</td>
      <td>Integration Specialist</td>
      <td>New York</td>
      <td>61</td>
      <td>2012/12/02</td>
      <td>$372,000</td>
    </tr>
    <tr>
      <td>Herrod Chandler</td>
      <td>Sales Assistant</td>
      <td>San Francisco</td>
      <td>59</td>
      <td>2012/08/06</td>
      <td>$137,500</td>
    </tr>
    <tr>
      <td>Rhona Davidson</td>
      <td>Integration Specialist</td>
      <td>Tokyo</td>
      <td>55</td>
      <td>2010/10/14</td>
      <td>$327,900</td>
    </tr>
    <tr>
      <td>Colleen Hurst</td>
      <td>Javascript Developer</td>
      <td>San Francisco</td>
      <td>39</td>
      <td>2009/09/15</td>
      <td>$205,500</td>
    </tr>
    <tr>
      <td>Sonya Frost</td>
      <td>Software Engineer</td>
      <td>Edinburgh</td>
      <td>23</td>
      <td>2008/12/13</td>
      <td>$103,600</td>
    </tr>
    <tr>
      <td>Jena Gaines</td>
      <td>Office Manager</td>
      <td>London</td>
      <td>30</td>
      <td>2008/12/19</td>
      <td>$90,560</td>
    </tr>
    <tr>
      <td>Quinn Flynn</td>
      <td>Support Lead</td>
      <td>Edinburgh</td>
      <td>22</td>
      <td>2013/03/03</td>
      <td>$342,000</td>
    </tr>
    <tr>
      <td>Charde Marshall</td>
      <td>Regional Director</td>
      <td>San Francisco</td>
      <td>36</td>
      <td>2008/10/16</td>
      <td>$470,600</td>
    </tr>
    <tr>
      <td>Haley Kennedy</td>
      <td>Senior Marketing Designer</td>
      <td>London</td>
      <td>43</td>
      <td>2012/12/18</td>
      <td>$313,500</td>
    </tr>
    <tr>
      <td>Tatyana Fitzpatrick</td>
      <td>Regional Director</td>
      <td>London</td>
      <td>19</td>
      <td>2010/03/17</td>
      <td>$385,750</td>
    </tr>
    <tr>
      <td>Michael Silva</td>
      <td>Marketing Designer</td>
      <td>London</td>
      <td>66</td>
      <td>2012/11/27</td>
      <td>$198,500</td>
    </tr>
    <tr>
      <td>Paul Byrd</td>
      <td>Chief Financial Officer (CFO)</td>
      <td>New York</td>
      <td>64</td>
      <td>2010/06/09</td>
      <td>$725,000</td>
    </tr>
    <tr>
      <td>Gloria Little</td>
      <td>Systems Administrator</td>
      <td>New York</td>
      <td>59</td>
      <td>2009/04/10</td>
      <td>$237,500</td>
    </tr>
    <tr>
      <td>Bradley Greer</td>
      <td>Software Engineer</td>
      <td>London</td>
      <td>41</td>
      <td>2012/10/13</td>
      <td>$132,000</td>
    </tr>
    <tr>
      <td>Dai Rios</td>
      <td>Personnel Lead</td>
      <td>Edinburgh</td>
      <td>35</td>
      <td>2012/09/26</td>
      <td>$217,500</td>
    </tr>
  </tbody>
</table>

订购

在表格中禁用排序：

$('#example').dataTable( 
  "ordering": false
);

示例

$(function() 
  $('#example').DataTable(     
     "ordering": false
  );
);
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>

<table id="example" class="display"  cellspacing="0">
  <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>61</td>
      <td>2011/04/25</td>
      <td>$320,800</td>
    </tr>
    <tr>
      <td>Garrett Winters</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>63</td>
      <td>2011/07/25</td>
      <td>$170,750</td>
    </tr>
    <tr>
      <td>Ashton Cox</td>
      <td>Junior Technical Author</td>
      <td>San Francisco</td>
      <td>66</td>
      <td>2009/01/12</td>
      <td>$86,000</td>
    </tr>
    <tr>
      <td>Cedric Kelly</td>
      <td>Senior Javascript Developer</td>
      <td>Edinburgh</td>
      <td>22</td>
      <td>2012/03/29</td>
      <td>$433,060</td>
    </tr>
    <tr>
      <td>Airi Satou</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>33</td>
      <td>2008/11/28</td>
      <td>$162,700</td>
    </tr>
    <tr>
      <td>Brielle Williamson</td>
      <td>Integration Specialist</td>
      <td>New York</td>
      <td>61</td>
      <td>2012/12/02</td>
      <td>$372,000</td>
    </tr>
    <tr>
      <td>Herrod Chandler</td>
      <td>Sales Assistant</td>
      <td>San Francisco</td>
      <td>59</td>
      <td>2012/08/06</td>
      <td>$137,500</td>
    </tr>
    <tr>
      <td>Rhona Davidson</td>
      <td>Integration Specialist</td>
      <td>Tokyo</td>
      <td>55</td>
      <td>2010/10/14</td>
      <td>$327,900</td>
    </tr>
    <tr>
      <td>Colleen Hurst</td>
      <td>Javascript Developer</td>
      <td>San Francisco</td>
      <td>39</td>
      <td>2009/09/15</td>
      <td>$205,500</td>
    </tr>
    <tr>
      <td>Sonya Frost</td>
      <td>Software Engineer</td>
      <td>Edinburgh</td>
      <td>23</td>
      <td>2008/12/13</td>
      <td>$103,600</td>
    </tr>
    <tr>
      <td>Jena Gaines</td>
      <td>Office Manager</td>
      <td>London</td>
      <td>30</td>
      <td>2008/12/19</td>
      <td>$90,560</td>
    </tr>
    <tr>
      <td>Quinn Flynn</td>
      <td>Support Lead</td>
      <td>Edinburgh</td>
      <td>22</td>
      <td>2013/03/03</td>
      <td>$342,000</td>
    </tr>
    <tr>
      <td>Charde Marshall</td>
      <td>Regional Director</td>
      <td>San Francisco</td>
      <td>36</td>
      <td>2008/10/16</td>
      <td>$470,600</td>
    </tr>
    <tr>
      <td>Haley Kennedy</td>
      <td>Senior Marketing Designer</td>
      <td>London</td>
      <td>43</td>
      <td>2012/12/18</td>
      <td>$313,500</td>
    </tr>
    <tr>
      <td>Tatyana Fitzpatrick</td>
      <td>Regional Director</td>
      <td>London</td>
      <td>19</td>
      <td>2010/03/17</td>
      <td>$385,750</td>
    </tr>
    <tr>
      <td>Michael Silva</td>
      <td>Marketing Designer</td>
      <td>London</td>
      <td>66</td>
      <td>2012/11/27</td>
      <td>$198,500</td>
    </tr>
    <tr>
      <td>Paul Byrd</td>
      <td>Chief Financial Officer (CFO)</td>
      <td>New York</td>
      <td>64</td>
      <td>2010/06/09</td>
      <td>$725,000</td>
    </tr>
    <tr>
      <td>Gloria Little</td>
      <td>Systems Administrator</td>
      <td>New York</td>
      <td>59</td>
      <td>2009/04/10</td>
      <td>$237,500</td>
    </tr>
    <tr>
      <td>Bradley Greer</td>
      <td>Software Engineer</td>
      <td>London</td>
      <td>41</td>
      <td>2012/10/13</td>
      <td>$132,000</td>
    </tr>
    <tr>
      <td>Dai Rios</td>
      <td>Personnel Lead</td>
      <td>Edinburgh</td>
      <td>35</td>
      <td>2012/09/26</td>
      <td>$217,500</td>
    </tr>
  </tbody>
</table>

LEGACY - 1.10 之前的数据表

如果您使用的是旧版本的数据表，则可以使用下面提到的旧方法进行排序：

bSort

启用或禁用列排序。可以通过每列的bSortable 选项禁用对各个列的排序。

$(function () 
  $("#tblStats").dataTable(
    "bSort": false
  );
);

参考： https://legacy.datatables.net/ref#bSort

bSortable

每个列的bSortable 选项可以禁用对各个列的排序。

在此示例中，类为 Sort 的列将是可排序的。

$(function () 
  $("#tblStats").dataTable(
    columnDefs: [
       sortable: true, aTargets: ['Sort'] ,
    ]
  );
);

【讨论】：

谢谢。如果我想在最初进行排序但允许用户单击列标题并进行排序怎么办？ 查看上面的更改。 @NoBullMan 我添加了数据表排序格式的完整细分。我怀疑你可以通过使用 order: [] 来实现你想要的，这将禁用加载排序，但仍然允许排序。

以上是关于关闭 jQuery 数据表排序的主要内容，如果未能解决你的问题，请参考以下文章

用于引导数据网格的 jquery 插件 [关闭]

jQuery DataTables：如何按特定列排序？ [关闭]

jquery表格FooTable插件怎么关闭列排序功能啊

在jquery数据表jquery中禁用排序

如何检索 JQuery 数据表的排序状态

如何避免列在jquery数据表中排序