1

Please help. I am not sure where I am going wrong I want the table to be sorted by the first column. I tried several variations, but sort is not working properly

dataTable = $("#deptDtTable").dataTable({
        "bFilter" : false
        "bProcessing" : true,
        "bServerSide" : true,
        "bSort" : true,
        "bStateSave" : false,
        "iDisplayLength" : 25,
        "iDisplayStart" : 0,
        "fnDrawCallback" : function() {
        },      
        "sAjaxSource" : "/url/url/datatable/dept",
        "aaSorting": [[ 1] ],
        "aoColumns" : [ 
            {
            "mData" : 'id'
        }, {
            "mData" : 'client_name' 
        }, {
            "mData" : 'ssn'
        }, {
            "mData" : 'department'
        }, {
            "mData" : 'account_id'
        }, {
            "mData" : 'dateEntered', 
            "render" : function(data) {
                if (data !== null) {
                    var date = new Date(data);
                    return date.toLocaleString();
                } else {
                    return '';
                }
            }
        } ]
    });
Gwen
  • 11
  • 1
  • 3

2 Answers2

1

This is what I did, and the sorting works on the first column. 

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index62</title>
    <script src="~/Scripts/jquery-1.12.4.min.js"></script>
    <script src="~/Scripts/DataTables/jquery.dataTables.min.js"></script>
    <link href="~/Content/DataTables/css/jquery.dataTables.min.css" rel="stylesheet" />
    <script type="text/javascript">
        $(document).ready(function () {
              $('#example').
                dataTable({
                "processing": true,
                "serverSide": true,
                "info": true,
                "stateSave": true,
                "ajax": {
                    "url": "/Home/AjaxGetJsonData",
                    "type": "GET"
                },
                "columns": [
                    { "data": "Name", "orderable": true },
                    { "data": "Age", "orderable": false },
                    { "data": "DoB", "orderable": true }
                ],
                "order": [[0, "asc"]]
            });
        });

    </script>
</head>
<body>
    <div style="margin:30px;">
        <table id="example" class="display" cellspacing="0" width="100%">
            <thead>
                <tr style="text-align:left;">
                    <th>Name</th>
                    <th>Age</th>
                    <th>DoB</th>
                </tr>
            </thead>

            <tfoot>
                <tr style="text-align:left;">
                    <th>Name</th>
                    <th>Age</th>
                    <th>DoB</th>
                </tr>
            </tfoot>
        </table>
    </div>
</body>
</html>
kblau
  • 2,094
  • 1
  • 8
  • 20
1

You can try like this 

dataTable = $("#deptDtTable").dataTable({
        "bFilter" : false
         .......
        "aaSorting": [[ 0, "desc" ]] // Sort by first column descending
         ......
});
Tharsan Sivakumar
  • 6,351
  • 3
  • 19
  • 28