jQuery dataTable 页面变化跳转到首页

AkiraZhyib

于 2021-09-30 22:08:52 发布

阅读量512

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 前端文章标签： ajax jquery javascript

本文链接：https://blog.csdn.net/zhyib002/article/details/120572997

JavaScript 同时被 2 个专栏收录

19 篇文章

订阅专栏

前端

17 篇文章

订阅专栏

在使用jQuery DataTables时，作者遇到了在数量变更时不自动切换到第一页的问题。通过在`fnDrawCallback`中检查并手动调用`fnPageChange`实现了此功能，虽然方法简单但有效。博客探讨了这一解决方案，并邀请读者访问作者的博客获取更多信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

由于最近的也业务原因，又开始使用 jQuery，jQuery 的组件虽然丰富，但是感觉不太协调，各管各的，配置起来也比较麻烦，这里先说个遇到的问题

业务场景是这样的，需要在页面显示数量变更的时候自动切换到第一页，但是如果是默认的配置不会有这样的功能。

$(document).ready(function () {
    $('#example').dataTable({
        ajax() {
            // 要前往的页码
            let cuttPageParam = Math.ceil(data.start / data.length) + 1;
            if (currPageSize !== data.length) {
                // 当前 pageSize 与期望不符
                // pageSize 变化
                // 查询用参数初始化
                pageChange = true;
                currPageSize = data.length;
                data.start = 1;
                currPageParam = 1;
            }
            let param = {
                // 使用一个动态的 pageSize
                currPage: currPageParam,
                pageNum: data.length,
            }
            $.ajax({
                ...
            })
        }
        ...
        // 当表格重绘就会调用这个回调
        fnDrawCallback(data) {
            if (pageChange) {
                // 判断确实存在 pageSize 变化
                pageChange = false;
                oTable.fnPageChange(0);
            }
        }
    });
});