Sort and filtering with ajax

tblack2200

I have a table that uses server-side processing, that displays the data correctly. However, the sort and filtering functions do not work. I'm sure I'm missing something in the javascript code. All my html, javascript and CSS are shown below.

I appreciate any help you could provide.

    <table style="width:100%" id="listing" class="display cell-border">
        <thead>
            <tr>
                <th>Name</th>
                <th>Title</th>
                <th>Department</th>
                <th>Emp ID</th>
            </tr>
        </thead>
    </table>

$(document).ready(function () {
var table = $('#listing').DataTable({
"columns": [
{ "data": "lastfirst" },
{ "data": "title" },
{ "data": "deptname" },
{ "data": "employeecode" }
],
"columnDefs": [
{
"targets": [0],
"visible": true,
"searchable": true
},
{
"targets": [1],
"visible": true,
"searchable": false
},
{
"targets": [2],
"visible": true,
"searchable": false
},
{
"targets": [3],
"visible": false,
"searchable": false
}
],
"order": [[0, "asc" ]],
select: {
style: 'single'
},
"scrollY": "50vh",
"scrollX": false,
"scrollCollapse": true,
"paging": false,
"responsive": true,
"processing": true,
"serverSide": true,
"ajax": "/FormData.aspx?s=bla"
});

// create selected function
$('#listing tbody').on('click', 'tr', function () {
    if ($(this).hasClass('selected')) {
        $(this).removeClass('selected');
    }
    else {
        table.$('tr.selected').removeClass('selected');
        $(this).addClass('selected');
    }
    window.location = '/FormMain.aspx?f=2';
});

});

div.container {
width: 80%;
}

div.dataTables_wrapper {
width: 100%;
margin: 0 auto;
}

div.dataTables_wrapper .dataTables_scroll .dataTables_scrollBody {
overflow-x: hidden !important;
overflow-y: auto !important;
height: 424px;
max-height: 424px;
border: 1px solid #dee2e6;
}

div.dataTables_wrapper .dataTables_scroll .dataTables_scrollHeadInner {
background-color: silver;
}

table.dataTable thead th {
position: relative;
background-image: none !important;
}

table.dataTable thead th.sorting:after,
table.dataTable thead th.sorting_asc:after,
table.dataTable thead th.sorting_desc:after {
position: absolute;
top: 12px;
right: 8px;
display: block;
font-family: FontAwesome;
}

table.dataTable thead th.sorting:after {
content: "\f0dc";
color: #ddd;
font-size: 0.8em;
padding-top: 0.12em;
}

table.dataTable thead th.sorting_asc:after {
content: "\f0de";
}

table.dataTable thead th.sorting_desc:after {
content: "\f0dd";
}

kthorngren

The server side process is described here:
https://datatables.net/manual/server-side

Your server side code is responsible for the searching and sorting functionality. Is your server side code built to support the parameters described in the above doc?

Kevin

tblack2200

I guess I'm missing something. The URL I call expects to see the filter parameter in the form of a querystring parameter:

/FormListing.aspx?s=black

This performs a query on the server to return records with the last name of black.
How do I build the new URL for the ajax call when the filter values changes?

kthorngren

With server side processing enabled Datatables sends requests to the server that includes parameters for sorting and searching as described in the above doc I linked to. Take a look at this example:
https://www.datatables.net/examples/data_sources/server_side.html

You can look at the request sent using the browser's developer tools. You will see all the parameters are sent as described in that doc. If you search for airi for example you will see this search parameter (among others):
search[value]=airi

Kevin