DataTables “next” pagination text outside of button, and multiple pages showing for 5 results

Question

Im using DataTables library and for some reason without having touched the CSS, the "Next" text is displaying outside of the pagination button. And it is displaying multiple pages even though there are only 5 results thrown back by my AJAX.

Here is a screenshot of the page: screenshot of table

here is some code:

JS

table = $('#table_orders').DataTable(
        {
            "sAjaxSource": "ajaxData/getCommandes.php",
            "sAjaxDataProp":"aaData",
            "oLanguage": {
                "sEmptyTable": "Aucune donnée",
                "sProcessing": "chargement...",
                "sZeroRecords" : "Votre recherche n'a donné aucun résultat",
                "oPaginate" : {
                    "sNext" : "prochain",
                    "sPrevious" : "précédent"
                }
            },
            "bLengthChange": false,
            "bInfo": false,
            "bProcessing": true,
            "bServerSide": true,
            "columns": [
                { data: "reference" },
                { data: null, render: function ( data ) {
                    return data.firstname+' '+data.lastname;
                } },
                { data: "total_paid"},
                { data: "date_add"},
                { data: "name"},
                { data: null, render: function ( data ) {
                    // conditional HTML buttons
                    }
                }, "orderable": false }
            ]
        }
    );

AJAX JSON

{"sEcho":1,"iTotalRecords":{"COUNT( id_order )":"5","0":"5"},"iTotalDisplayRecords":{"FOUND_ROWS()":"5","0":"5"},"aaData":[{"id_order":"1","0":"1","reference":"XKBKNABJK","1":"XKBKNABJK","total_paid":"55.000000","2":"55.000000","name":"Annul\é","3":"Annul\é","firstname":"John","4":"John","lastname":"DOE","5":"DOE","date_add":"2017-04-26 09:44:56","6":"2017-04-26 09:44:56","current_state":"6","7":"6"},{"id_order":"2","0":"2","reference":"OHSATSERP","1":"OHSATSERP","total_paid":"75.900000","2":"75.900000","name":"Paiement accept\é","3":"Paiement accept\é","firstname":"John","4":"John","lastname":"DOE","5":"DOE","date_add":"2017-04-26 09:44:56","6":"2017-04-26 09:44:56","current_state":"2","7":"2"},{"id_order":"3","0":"3","reference":"UOYEVOLI","1":"UOYEVOLI","total_paid":"76.010000","2":"76.010000","name":"Erreur de paiement","3":"Erreur de paiement","firstname":"John","4":"John","lastname":"DOE","5":"DOE","date_add":"2017-04-26 09:44:56","6":"2017-04-26 09:44:56","curren t_state":"8","7":"8"},{"id_order":"4","0":"4","reference":"FFATNOMMJ","1":"FFATNOMMJ","total_paid":"89.890000","2":"89.890000","name":"En attente de paiement par ch\èque","3":"En attente de paiement par ch\èque","firstname":"John","4":"John","lastname":"DOE","5":"DOE","date_add":"2017-04-26 09:44:56","6":"2017-04-26 09:44:56","current_state":"1","7":"1"},{"id_order":"5","0":"5","reference":"KHWLILZLL","1":"KHWLILZLL","total_paid":"71.510000","2":"71.510000","name":"En attente de paiement par ch\èque","3":"En attente de paiement par ch\èque","firstname":"John","4":"John","lastname":"DOE","5":"DOE","date_add":"2017-04-26 09:44:56","6":"2017-04-26 09:44:56","current_state":"1","7":"1"}]}

Answer 1

The next text is the out of box functionality. It was setup to display as a link and not a button. You can change the pagination options here.

The page length can be changed using the API. 50 is the default.

Answer 2

found my issue. my script was returning the wrong parameters in my JSON. i needed instead of:

{"sEcho":1,"iTotalRecords":{"COUNT(id_order)":"5","0":"5"},"iTotalDisplayRecords":{"FOUND_ROWS()":"5","0":"5"}

this:

{"draw":1,"recordsTotal":"5","recordsFiltered":"5"