Client Side Sorting , but table values are picking from Server Side

SrinathVenkataraman

Is it possible to do client side sorting values, whereas values are picking from server side...??

kthorngren

If you enable Server Side Processing, ie serverSide: true, then all of the sorting, searching and paging are expected to be performed by the server. However if you are fetching data via Ajax (server side data but not serverSide: true) then all of the sorting, searching and paging are controlled by the client side Datatables.

Does that make sense?

Kevin

SrinathVenkataraman

$(document).ready(function() {

    $('table').dataTable( {
        bInfo: false,
        paging: false,
        bLengthChange: false,
        bPaginate: false,

    } );
} );

</script>

Above mentioned script only am using for sorting, where the values are picking from server side by using ajax, but i try to do sorting from client side which is not working

kthorngren

In this case you are using a DOM sourced table since you aren't using ajax or data to populate the Datatable. The question is what is the state of theHTML table when you initialize Datatables? If the DOM based table is built before Datatables is initialized then sorting should work. Maybe you can initialize Datatables in the Ajax success function after you populate the data.

If Datatables is initialized first then it, unless you are using Datatables API's to add the data, it won't know about the data added to the table. Maybe you can post more code to show how all this is working.

Kevin

SrinathVenkataraman

My Partial Table:

@model IEnumnerable<Dummy.EventDelivery.Models.CustomerModel>
<table class="resizable table-striped table-hover" id="Table">
            <thead id="parent_head">
                <tr>
                    <th>Name</th>
                    <th>ID</th>
                    <th>Father Name</th>
                    <th>Age</th>
                    <th>Sex</th>
                </tr>
            </thead>
            <tbody id="parent_body">
                @foreach (var item in Model)
                {

                    <tr>
                        <td>@item.Name</td>
                        <td>@item.ID</td>
                        <td>@item.FatherName</td>
                        <td>@item.Age</td>
                        <td>@item.Sex</td>
                        

                    </tr>

                }


            </tbody>

        </table>

Then using this am displaying values in main page:

<div id="content">
        @*<partial name='CusttablePartial' />*@
        @await Html.PartialAsync("_CusttablePartial")
    </div>

Ajax:

function Data() {
    
        var str = $("#Forms").serialize();
        $.ajax({
            type: "GET",
            url: '/GetDetails?' + str,--Controller
            success: function (result) {
                $("#content").html(result)
            
        });
    });

}

After Getting this data i need to do sorting from client side by using datatable

Edited by Kevin:  Syntax highlighting. Details on how to highlight code using markdown can be found in this guide

kthorngren

Its still not clear the order of operations regarding the data being loaded and DataTables being initialized. I would move the Datatables init code into the success function after loading the data. Something like this:

function Data() {
     
        var str = $("#Forms").serialize();
        $.ajax({
            type: "GET",
            url: '/GetDetails?' + str,--Controller
            success: function (result) {
                $("#content").html(result)
                $('table').dataTable( {
                  bInfo: false,
                  paging: false,
                  bLengthChange: false,
                  bPaginate: false,
 
              } );             
        });
    });
 
}

Kevin

SrinathVenkataraman

After initializing above mentioned scripts ,I am getting error like Datatables warning table - cannot reinitialise datatable, For more information about this error, Please see https://datatables/tn/3..

colin

That would suggest the table is being initialised many times. You could either tweak your logic to prevent that, or just initialise with the addition option destroy,

Colin