Question

I have a search form which pulls out various rows from a DB which are then displayed in a table. The code for pulling the rows is working fine. I am using datatables to display in a user-friendly way. The datatables code is working as I can see the search controls etc and the next-previous buttons once the table is filled however the table doesnt appear to be completing pagination on initial load.

There is no “Showing ** to ** of ** entries” text and all rows returned are displayed however once I click the next button or use the display only 10/25/50/100 dropdown pagination kicks in and pagination works perfectly from thereforth. I’m pulling my hair out because this was working for me yesterday and I cant think of what I have changed since to stop it working:

I intialize datatables below

$(document).ready(function() {
    $('#blog-search').dataTable( {
        "aaSorting": [[ 4, "DESC" ]],
        "aoColumnDefs": [
          { "sType": "numeric-comma", "aTargets": [ 2 ] }

        ],
        "bPaginate": true,

    } );
} );

the sorting of the columns also

Answer 1

When I add your code into a jsfiddle I recieved the following error message in the console:

Uncaught TypeError: Property 'string-DESC' of object #<Object> is not a function

On further investigation it appears that the "aaSorting": [[ 4, "DESC" ]], line in your code is the problem. The sort string needs to be in all lower case, I.E. "desc" NOT "DESC".

The working code should be as follows:

$(document).ready(function() {
    $('#blog-search').dataTable( {
        "aaSorting": [[ 4, "desc" ]],
        "aoColumnDefs": [
          { "sType": "numeric-comma", "aTargets": [ 2 ] }

        ],
        "bPaginate": true,

    } );
} );