关闭jQuery Datatable排序

时间：2018-01-24 14:32:26

标签： jquery asp.net sorting datatables

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

当我添加一个断点并查看json数据时，它按我想要的顺序（总行位于底部），但在表格中，toal行在中间显示（根据其名称） ，像这样：

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 个答案:

答案 0 :(得分：1)

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

顺序

初始化期间DataTables未应用任何排序。这些行按DataTables读取的顺序显示（即DOM源的DOM原始顺序，或Ajax /数据源的数据数组）：

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

多列排序作为初始状态：

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

实施例

＆＃13;
＆＃13; 
$(function() {
  $('#example').DataTable({     
     "order": []
  });
});
＆＃13; 
<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" width="100%" 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>
＆＃13;
＆＃13;
＆＃13;

排序

禁用表格中的排序：

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

实施例

＆＃13;
＆＃13; 
$(function() {
  $('#example').DataTable({     
     "ordering": false
  });
});
＆＃13; 
<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" width="100%" 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>
＆＃13;
＆＃13;
＆＃13;

LEGACY - Datatables Pre 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'] },
    ]
  });
});
相关问题
最新问题