CODEWITHSUNDEEP
jqueryasp.netsortingdatatables
NoBullMan
NoBullMan

Reputation: 2184

Turn off jQuery Datatable sorting

I am trying to disable default sorting of datatable but it continues to sort. I have two tables, one displaying detailed data and one grouped by area. In BLL after I get the data in a dataset, I add another row which is the total of other rows. I pass this to jquery and even though I have set "order": [] and "aaSorting":[], it still sorts it. The tables are populated when user clicks a button.

When I add a breakpoint and look at the json data, it is in the order I want (total row is at the bottom), but in the table, the toal row is diplayed in the middle (according to its name), like this:

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

using Obsidian's suggestion:

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

This still sorts column 0 (Area) and prevents sorting on other columns. Setting aTargets to [1,2,3,4] had no effect. The only thing that works is setting bSort: false with the downside of of not allowing any sorting after table is populated.

Upvotes: 1

Views: 3007

Answers (1)

DreamTeK
DreamTeK

Reputation: 34187

From version 1.10 Datatables sorts data in the following ways:

order

No ordering applied by DataTables during initialisation. The rows are shown in the order they are read by DataTables (i.e. the original order from the DOM if DOM sourced, or the array of data if Ajax / data sourced):

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

Multi-column ordering as the initial state:

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

EXAMPLE

$(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>

ordering

Disable ordering in the table:

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

EXAMPLE

$(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

If you are using an older version of datatables then you can sort using the legacy methods mentioned below:

bSort

Enable or disable sorting of columns. Sorting of individual columns can be disabled by the bSortable option for each column.

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

Ref: https://legacy.datatables.net/ref#bSort

bSortable

Sorting of individual columns can be disabled by the bSortable option for each column.

In this example colums with the class Sort will be sortable.

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

Upvotes: 1

Related Questions