Sort and filtering with ajax

Sort and filtering with ajax

tblack2200tblack2200 Posts: 4Questions: 3Answers: 0

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

  • kthorngrenkthorngren Posts: 20,791Questions: 26Answers: 4,860

    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

  • tblack2200tblack2200 Posts: 4Questions: 3Answers: 0

    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?

  • kthorngrenkthorngren Posts: 20,791Questions: 26Answers: 4,860

    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

This discussion has been closed.