CODEWITHSUNDEEP
javascriptjqueryajaxjsondatatables
Mac Luc
Mac Luc

Reputation: 1001

DataTables rows are fine but are not initialized?

Ive set up my website with DataTables.
Im getting my data through its ajax service from my java servlet backend - This is working fine and the DOM everything looks good. But even though i have all the data working, its seems like all the DataTables features are failing.

datatables no features

(All fields work, I have returned null to the empty ones on purpose)
My jQuery DataTables setup look like this:

function getUserTable() {
  var table = $('#example').DataTable({
    "destroy": true,
    "processing": true,
    "serverSide": true,
    "ajax": {
        "dataType": 'json',
        "url": "action=getAllUsers",
        "type": "POST",
        "dataSrc": "allUsers"
    },
    "columns": [
        {"data": "id"},
        {"data": "username"},
        {"data": "firstName"},
        {"data": "lastName"},
        {"data": "loggedIn"},
        {"data": "email"}
    ]
  });
}

So i have serverSide set to true, because my backend is on the same server - I cant seem to find any tutorial for this, but it seems like the built in search feature doesnt work when its set to serverside?
Also why does it seem like the the tables hasnt been initialized? It shows too many pages and saying "Showing 0 to 0 of 0 entries".
My returned json data looks like this:

allUsers: [{email:null, firstName:null, id:1, lastName:null, loggedIn:false, username:mag},…]

Html table structure:

<table id="example" class="display" cellspacing="0" width="100%">
                <thead>
                    <tr>
                        <th>Id</th>
                        <th>Brugernavn</th>
                        <th>Navn</th>
                        <th>Efternavn</th>
                        <th>Logged</th>
                        <th>Email</th>
                    </tr>
                </thead>
                <tfoot>
                    <tr>
                        <th>Id</th>
                        <th>Brugernavn</th>
                        <th>Navn</th>
                        <th>Efternavn</th>
                        <th>Logged</th>
                        <th>Email</th>
                    </tr>
                </tfoot>
            </table>

Upvotes: 1

Views: 454

Answers (1)

Kevin Lab&#233;cot
Kevin Lab&#233;cot

Reputation: 1995

Concerning the built-in search feature, as I remember, you are right. It doesn't work with AJAX. You can use it but the built-in search is not used. Search must be done on the server side. When the search field is used, a new AJAX is made with an additionnal parameter containing the search value.

To get the pagination working you have to return the number of total entries inside your ajax response and to set pagination configuration when you initialize your DataTables.

Example

Ajax response :

{"iTotalRecords":"497","iTotalDisplayRecords":"497","aaData":[]}

Pagination config :

var gridSettings = {
/* .... */
    "iDisplayStart": 0,
    "iDisplayLength": 20
};
$('#elt').dataTable(gridSettings);

Upvotes: 2

Related Questions