How to make pagination working?

Question

I'm trying to create an example of Dynatable with pagination, to do this, I created an html file and a json loaded using Ajax, directly from the same directory as the html file.

The data is rendered correctly, te footer says: "Showing 5 of 5 records (filtered from 45 total records)", that's ok also. The problem is the link at the right, only displays 1 page, when it should show 9 pages.

This is the html content:

<body>
<div class="dynatable-demo">    
<table id="my-ajax-table" class="table table-bordered hoverTable">
<thead>
       <tr>
        <th data-dynatable-column="idturno" data-dynatable-no-sort="true">Id Turno</th>
        <th data-dynatable-column="accessionnumber">Accesion Number</th>
        <th data-dynatable-column="apellidopaterno">Apellido Paterno</th>
       </tr>
</thead>
<tbody>
</tbody>
</table>
</div>

<script>

$('#my-ajax-table').dynatable({
 dataset: {
    ajax: true,
    ajaxOnLoad: true,
    ajaxUrl: 'consulta.json',
    records: [],
    perPageDefault: 5,
    perPageOptions: [5,10,100]
 }
});
</script>

And here's the "consulta.json" file:

{
"records": [
    {
        "idturno": "88",
        "accessionnumber": "24471579",
        "apellidopaterno": "DORATO^PABLO EZEQUIEL"
    },
    {
        "idturno": "89",
        "accessionnumber": "0001",
        "apellidopaterno": "apepaterno"
    },
    {
        "idturno": "90",
        "accessionnumber": "0002",
        "apellidopaterno": "apepaterno"
    },
    {
        "idturno": "91",
        "accessionnumber": "0003",
        "apellidopaterno": "apepaterno"
    },
    {
        "idturno": "92",
        "accessionnumber": "0004",
        "apellidopaterno": "apepaterno"
    }
],
"queryRecordCount": 5,
"totalRecordCount": 45
}

score 1 · Answer 1 · answered Feb 01 '19 at 12:22

I've too got the same issue, after going through the source found out this.

pages = Math.ceil(settings.dataset.queryRecordCount / settings.dataset.perPage)

the queryRecordCount is getting divided by the perPage which is equal hence the single page.

It should be the totalRecordCount in that place actually. Maybe the issue was at the ajax only. Change the queryRecordCount with totalRecordCount and it works fine for me.

score 0 · Answer 2 · answered Nov 06 '14 at 07:17

add this in the code

$('#my-ajax-table').dynatable({
dataset: {
    ajax: true,
    ajaxOnLoad: true,
    ajaxUrl: 'consulta.json',
    records: [],
    perPageDefault: 5,
    perPageOptions: [5, 10, 100]
},
features: {
    paginate: true,
    sort: true,
    pushState: false,
    search: true,
    recordCount: true,
    perPageSelect: true
}

});

score 0 · Answer 3 · answered Mar 01 '17 at 17:22

0

After configure pagination parameters ensure that your JSON is returning 'queryRecordCount' AND 'totalRecordCount' fields.

answered Mar 01 '17 at 17:22

Ivo Necchi

43
3

boriselec · Answer 4 · 2019-10-08T10:20:21.570

0

queryRecordCount and totalRecordCount are the same for this query. Should be

"queryRecordCount": 45,
"totalRecordCount": 45

It's only differs on filtered queries (?search)

edited Oct 08 '19 at 10:20

answered Oct 08 '19 at 10:12

boriselec

360
2
4

How to make pagination working?

4 Answers4