How to make pagination working?

Question

How to make pagination working?

2.2k Views Asked by leonardorame At 20 October 2024 at 12:41

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
}

Original Q&A

There are 4 best solutions below

**Ivo Necchi** · Answer 1

Ivo Necchi On 01 March 2017 at 17:22

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

**The Anish** · Answer 2

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
}

});

**Monster Brain** · Answer 3

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.

**boriselec** · Answer 4

boriselec On 08 October 2019 at 10:12

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

"queryRecordCount": 45,
"totalRecordCount": 45

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

How to make pagination working?

There are 4 best solutions below

Related Questions in DYNATABLE

Trending Questions

Popular # Hahtags

Popular Questions