如何使分页工作？答案

【问题标题】：How to make pagination working?如何使分页工作？
【发布时间】：2014-05-13 20:04:53
【问题描述】：

我正在尝试创建一个带分页的 Dynatable 示例，为此，我直接从与 html 文件相同的目录创建了一个 html 文件和一个使用 Ajax 加载的 json。

数据正确呈现，页脚说：“显示 5 条记录中的 5 条（从 45 条总记录中过滤）”，也可以。问题是右边的链接，只显示1页，而应该显示9页。

这是html内容：

<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>

这是“consulta.json”文件：

{
"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
}

【问题讨论】：

标签： dynatable

【解决方案1】：

我也遇到了同样的问题，看了源码才发现。

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

queryRecordCount 被 perPage 除以等于单个页面。

实际上应该是那个地方的totalRecordCount。也许问题只出在 ajax 上。将 queryRecordCount 更改为 totalRecordCount 对我来说效果很好。

【讨论】：

【解决方案2】：

在代码中添加这个

$('#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
}

});

【讨论】：

【解决方案3】：

配置分页参数后，确保您的 JSON 返回“queryRecordCount”和“totalRecordCount”字段。

【讨论】：

【解决方案4】：

该查询的queryRecordCount 和totalRecordCount 相同。应该是

"queryRecordCount": 45,
"totalRecordCount": 45

仅在过滤查询 (?search) 上有所不同

【讨论】：