jquery data table and sorting columns

Question

I'm using jquery data table to display large amounts of data inside grid. I implemented server side pagination but I'm struggling with sorting data server side.

Below is my datatable initialization, answer with query for sorting is not the subject here, I just need a way to pass information of which column is clicked to the controller, the one upon I will do the sorting.

('#myTable').dataTable({
      "processing": true,
       "serverSide": true,
        "info": false,
        "pageLength": 10,
        "lengthChange": false,
        "stateSave": false,
        "bPaginate": true,
        "bFilter": false,
        "sPaginationType": "full_numbers",
         "info": "Page _PAGE_ from _PAGES_",
         "infoEmpty": "No data",
         "oPaginate": {
             "sFirst": "First",
             "sPrevious": "Previous",
             "sNext": "Next",
             "sLast": "Last"
          },
          "ajax": {
              "url": "@string.Format("{0}://{1}{2}", Request.Url.Scheme, Request.Url.Authority, Url.Content("~"))/MyController/GetData",
                        "type": "GET",
                        "data": function (d) {
                          .....
                        },
                    },
                    preDrawCallback: function (settings) {
                         ...
                    },
                    drawCallback: function (settings) {
                         ...
                    },                      
                    "columns": [
                          { "data": "Id" },
                          { "data": "FirstName" },
                          { "data": "LastName" },
                          { "data": "Age" }
                    ],
                    "columnDefs": [
                       {
                           targets: [0],
                           orderable: false
                       },
                       {
                           render: function (data, type, row) {
                               ...
                       }
                    ],
                    "order": [[0, "desc"]]
                });

public ActionResult GetData(){
   var sortColumn = ...
   ...
}

Answer 1

You can bind the 'order' event like this:

$('#myTable').on( 'order.dt', function () {

    var order = table.order();
    var column_selected = order[0][0];
    var order_way= order[0][1];
    doStuff(column_selected ,order_way);

});

See it in plugin reference

Answer 2

By specifying "serverSide": true, , datatables will by default add information to the request which you need to use in your server-side code. If you look in the Firebug Network panel, you will be able to see the request with the querystring parameters. See here for the full list of parameters. Note that the link is to the v1.9 documentation, because that's what it looks like you're using.

So for sorting, you'd be interested in iSortCol_0 and sSortDir_0 which relate to the clicked column and the sort direction respectively.

In your controller method, you would access the parameters like this:

var sortColumnIndex = Convert.ToInt32(Request["iSortCol_0"]);
var sortColumnDir = Request["sSortDir_0"];

You then need to incorporate this, and the other parameters into your query.

Here is an article on using server-side datatables with MVC