Sort and filtering with ajax
Sort and filtering with ajax
![tblack2200](https://secure.gravatar.com/avatar/257bc00811fd35513a28ae67a3da730b/?default=https%3A%2F%2Fvanillicon.com%2F257bc00811fd35513a28ae67a3da730b_200.png&rating=g&size=120)
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";
}
Answers
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
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?
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