jquery.Datatables页面刷新


1.执行操作后刷新表格,停留在当前页面

1.1 场景

​ 删除(操作)某一页的数据后,希望刷新数据并停留在当前页上,结果却回到了第一页。

1.2 解决方法
function delete(id){
    //删除操作
    ......

    //draw()重绘表格.false不是指不重绘,而是重绘当前页的表格;没有false会做一个完全的重绘,并且回到第一页.
    $("#businessTable").dataTable().draw(false);
}
1.3 参考文档

[1] http://datatables.club/reference/api/draw().html
[2] https://blog.csdn.net/littleqiang520/article/details/52800001

2.状态保存

2.1 场景

从当前页面跳转到详情页,从详情页返回时跳转到之前所在的页面,而不是第一页。

2.2 解决方法
$(function () {
    //初始化表格
    window.groupTable = $("#businessTable").dataTable({
        ......        
        bStateSave: true, //保存表格状态。当用户重新刷新页面,表格的状态将会被设置为之前的设置。
        ......
    }).api();
});
2.3 参考文档

[1] http://datatables.club/reference/option/stateSave.html

3.不需要保存状态的页面跳转

3.1 场景

​  使用bStateSave后,从其他页面跳转回到某个页面时,一直显示为之前的状态。期望清除该表格页面的状态,显示第一页,而不是在之前的状态。

3.2 解决方法

3.2.1 consumerList.html(应用列表)

$(function () {
    //初始化表格
    window.consumerTable = $("#businessTable").dataTable({
        ......        
        bStateSave: true,
        ......
    }).api();
    //检查consumerStateSave
    var isFirst = sessionStorage.getItem("consumerStateSave");
    if (isFirst != 1) {
        consumerTable.state.clear();
        consumerTable.ajax.reload();
    }
    sessionStorage.setItem("consumerStateSave", 0); //重置
});

3.2.2 consumerDetails.html(详情页)

$(function () {
    sessionStorage.setItem("consumerStateSave", 1);
    ......
});

3.2.3 其他页面

​  从其他页面跳转到consumerList.html时,期望显示第一页,所以不对consumerStateSave进行操作。跳转到consumerList.html,consumerStateSave为0,执行clear()和reload()。

3.3 参考文档

[1] https://jingyan.baidu.com/article/3c48dd34d38edde10be35825.html
[2] https://blog.csdn.net/z5976749/article/details/50474949
[3] http://datatables.club/reference/api/state.clear().html

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值