Sorted Static List is not displaying in the jQuery Datatable

chandhu

I am using jQuery Datatable in my ASP.NET Core MVC C# app. It loads the data from a database. I am using an Ajax call to load the data into jQuery Datatable. I am able to sort ascending and descending order the static list. But it is not reflecting in the Datatable. Sorting happens when clicking on sort icons in the header columns of the data table.

In cshtml:

         function resetDataTable() {

              myDataTable = $("#example").DataTable({
              paging: false,
              searching: false,
              serverSide: true,
              sortable: true,
              filter: true,
              searchDelay: 1000,
              lengthMenu: [[5, 10, 50, -1], [5, 10, 50, "All"]],
              language: { searchPlaceholder: "Brand, Buying Group" },
              scrollCollapse: true,
             ajax: {
                 url: '@Url.Action("LoadDoors", "DOOR_MANAGEMENT")',
                  type: 'GET',
                 datatype: 'json',
                 headers: { 'RequestVerificationToken': 'your json token' },
                 data: (d) => {
                 console.log(d)
                 return { draw: d.draw, start: d.start, length: d.length, search: d.search.value, 
                                       FilterByColumn: d.columns[d.order[0].column].data, ASC_DSEC: d.order[0].dir}
                 },
                  beforeSend: () => { ShowLoader(); },
                  complete: () => { HideLoader(); },
                 dataSrc: (json) => {
                 json = json.data;                    
                 return json;
                 }
              },
              columnDefs: [{ className: "dt-center", targets: [1, 2, 3] }],
              columns: [
                    { data: 'setting_id', title: 'SETTING ID', autoWidth: false, visible: false },
                    { data: 'brand', title: 'Brand Code', autoWidth: true, searchable: true },
                    { data: 'buying_group', title: 'Buying Group', autoWidth: true },                
                    { data: 'setting_name', title: 'Setting Name', autoWidth: true },
                    { data: 'is_active', title: 'Is Active', autoWidth: true },
                    { data: 'data_model', title: 'Data Model', autoWidth: true, orderable: false },
                    { data: 'tracking_weeks', title: 'Tracking Weeks', autoWidth: true },
                    { data: 'updated_user', title: 'Updated User', autoWidth: true },
                    { data: 'updated_date', title: 'Updated Date', autoWidth: true },             
                  ],
                 initComplete: function () {
                            configFilter(this, [0, 1, 3, 4, 5, 6, 7]);
                   }
              });
             }

And sorting is done by using reflection in the controller method. The below part is working fine.
But the sorted list is not reflecting in the UI JQuery Datatable. This is the issue. How to do that ?

    if (!String.IsNullOrEmpty(FilterByColumn))
    {
        PropertyInfo propInfo = typeof(DoorDetails).GetProperty(FilterByColumn, BindingFlags.Public | BindingFlags.Instance);

        if (propInfo != null)
        {
            switch (ASC_DSEC.ToUpper())
            {
                case "ASC":
                    StaticData.ListDoorData = StaticData.ListDoorData.OrderBy(x => propInfo.GetValue(x, null)).ToList();                            
                    break;

                case "DESC":
                    StaticData.ListDoorData = StaticData.ListDoorData.OrderByDescending(x => propInfo.GetValue(x, null)).ToList();                            
                    break;
            }
        }
    }

The above C# code works fine. The StaticData.ListDoorData is sorting properly (ascending and descending). But the datatable is not displaying that. It once loaded then even we click on sort icons in the header columns, nothing happens. There is no change. This is the issue.

allan

serverSide: true,

Your server-side script is responsible for sorting the data. If the data isn't sorted per the column that was requested for sorting, then yes, it would fail. So there is something about the script that isn't honoring the order property submitted.

Allan

chandhu

Hi @Allan Could you please tell me an exact solution for this issue ???

allan

No sorry. The server-side script in question doesn't appear to have been one written by me or using my libraries. You'd need to contact the author of that script if you are unsure.

What I can say is that the server-side script needs to order the data in the order requested by the order parameter that is submitted to it.

Allan