首页 文章

关闭jQuery Datatable排序

提问于
浏览
1

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

当我添加断点并查看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>

Update

使用黑曜石的建议:

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

    从版本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" 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>
    

    订购

    禁用表中的排序:

    $('#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" 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>
    

    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'] },
        ]
      });
    });
    

相关问题