Sorting icons do not change when using Server-Side Processing

EZRobs

I have enabled server-side data processing. My server side code is c# .net. I'm returning a formatted JSON string and the datatable displays the records returned properly.

When I click a column header, my server-side function is executed as it should be. However, when the page is rendered the up/down sorting icons don't change.

My datatable is below:

      var otable = $('#dtPOs').dataTable({
          dom: "<'dt-toolbar'<'col-xs-12 col-sm-6'><'col-sm-6 col-xs-6 hidden-xs'>>" +
                    "t" +
                    "<'dt-toolbar-footer'<'col-sm-6 col-xs-12 hidden-xs'i><'col-sm-6 col-xs-12'>>",
          colVis: {
              "align": "right"
          },
          tableTools: {
              "sSwfPath": "../Common/Scripts/plugins/datatables/swf/copy_csv_xls.swf"
          },
          scrollY: 400,
          scrollX: "100%",
          scrollCollapse: true,
          paging: true,
          info: true,
          ordering: true,
          orderMulti: true,
          processing: true,
          serverSide: true,
          stateSave: false,
          ajax: {
              dataType: 'json',
              type: 'POST',
              contentType: 'application/json; charset=utf-8',
              data:function(data)
              {
                  return data = "{'jsonInput':'" + JSON.stringify(data) + "'}";
              },
              url: '<%: ResolveUrl("~/PurchaseOrders/default.aspx")%>/GetItems',
              dataSrc: function (data) {
                  return JSON.parse(data.d);
              }
          }
      });

allan

Can you give us a link to the page in question please? I don't immediately see anything that would cause this issue.

Thanks,
Allan

EZRobs

It's just a local page currently. I'm doing a quick and easy prototype to see if I should use DataTables in the final project.

The GetItems web method is below:

        string strReturnVal = string.Empty;

        JQueryDataTable oDT = new JQueryDataTable(jsonInput);

        //Get Purchase Orders for whatever status

        if (oDT != null && oDT.oDataTableRequest != null)
        {
            strReturnVal += "{\"draw\":1,\"recordsTotal\": 3,\"recordsFiltered\":3,\"data\":[";
            strReturnVal += "[\"123456\",\"Warren Plastics - Warren, OH\",\"In Progress\",\"Erica Roberts\"],";
            strReturnVal += "[\"789456\",\"Cinergy - Cincinnati, OH\",\"Ready\",\"Erica Roberts\"],";
            strReturnVal += "[\"025630\",\"Albertsons - Arlington, TX\",\"In Progress\",\"Erica Roberts\"]";
            strReturnVal += "]}";
        }
        else
        {
            strReturnVal += "{\"draw\":1,\"recordsTotal\": 3,\"recordsFiltered\":3,\"data\":[";
            strReturnVal += "]}";
        }


        return strReturnVal;

The JSON returned to DataTables looks like this:

{
"draw": 1,
"recordsTotal": 3,
"recordsFiltered": 3,
"data": [
[
"123456",
"Warren Plastics-Warren, OH",
"InProgress",
"EricaRoberts"
],
[
"789456",
"Cinergy-Cincinnati, OH",
"Ready",
"EricaRoberts"
],
[
"025630",
"Albertsons-Arlington, TX",
"InProgress",
"EricaRoberts"
]
]
}

If I turn server side processing off the sort icons change as they should.

Thanks for your help. I wasn't sure if there was something else I needed to set when using server-side processing.

allan

No there shouldn't be. That looks okay - I don't see anything in the above that would cause the problem which is why I was asking for a test case. The sorting arrows should be handled client-side, so unless there is a Javascript error shown in your console, there is something going wrong somewhere in the Javascript.

Allan

EZRobs

I figured out why the icons weren't working. The 'draw' property in the return JSON string must be the same as the 'draw' property sent in the request. I knew this, but had the property hard-coded as '1' in my test server script. Thanks again for your help!

allan

Doh - I should have spotted that. Good to hear you have it sorted out now.

Allan