Sorting icons do not change when using Server-Side Processing

Sorting icons do not change when using Server-Side Processing

EZRobsEZRobs Posts: 3Questions: 1Answers: 0

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

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 61,452Questions: 1Answers: 10,055 Site admin

    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

  • EZRobsEZRobs Posts: 3Questions: 1Answers: 0

    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.

  • allanallan Posts: 61,452Questions: 1Answers: 10,055 Site admin
    Answer ✓

    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

  • EZRobsEZRobs Posts: 3Questions: 1Answers: 0

    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!

  • allanallan Posts: 61,452Questions: 1Answers: 10,055 Site admin

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

    Allan

This discussion has been closed.