leonardorame
leonardorame

Reputation: 1161

How to make pagination working?

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
}

Upvotes: 4

Views: 2250

Answers (4)

boriselec
boriselec

Reputation: 364

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

"queryRecordCount": 45,
"totalRecordCount": 45

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

Upvotes: 0

Monster Brain
Monster Brain

Reputation: 2119

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.

Upvotes: 1

Ivo Necchi
Ivo Necchi

Reputation: 43

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

Upvotes: 0

The Anish
The Anish

Reputation: 19

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
}

});

Upvotes: 0

Related Questions