springboot-PageHelper-查询操作后BootstrapTable没有更新下方页码的地址

最新推荐文章于 2023-03-13 15:33:48 发布

陆沙

最新推荐文章于 2023-03-13 15:33:48 发布

阅读量174

点赞数

分类专栏： springboot 文章标签： spring boot 后端 java javascript

本文链接：https://blog.csdn.net/pxy7896/article/details/129284026

版权

springboot 专栏收录该内容

34 篇文章 2 订阅

订阅专栏

文章讲述了在使用BootstrapTable时遇到的问题，即查询后表格内容更新为查询结果，但分页仍然基于原始数据。解决方案是销毁表格后再重新初始化，传入新的URL（查询地址）以确保分页和内容基于查询结果。点击按钮触发重新初始化表格的方法`reInitTableList()`，避免了使用`load`方法只更新当前页面而未影响分页的错误做法。

摘要由CSDN通过智能技术生成

问题描述

我有一个BootstrapTable，所有的列出操作都在该表格展示。我另外写了搜索引擎，那么，当用户查询后，表格的内容应更换为查询结果，翻页自然也是翻查询结果的页，结果实际翻页翻的是未查询时的结果页面，总页数也是未查询时的页数，非查询结果的页数。
在这里插入图片描述

解决方案

其实很简单，即先销毁该表格，再重新初始化即可。这里贴一下：

function reInitTableList(url, options) {
	...
	$('#tablelist').bootstrapTable({
        url: url,
        method: 'post',                      //请求方式（*）
        ...
        pagination: true,                   //是否显示分页（*）
        sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
        pageNumber: 1,                       //初始化加载第一页，默认第一页
        pageSize: 10,                       //每页的记录行数（*）
        pageList: [10, 20, 30, 50, 100],        //可供选择的每页的行数（*）
        rowStyle: options.rowStyle || function (row, index){return {};},
        columns: options.columns
	});
	...    
}

reInitTableList()里的内容与最开始初始化BootstrapTable是完全一致的。不同的是，这次需要传递一个新的url进去，这个url就是我的查询地址。用法如下所示：

$("#btn_get_proc").click(function () {
	var $this = $(this);
    var userId = $this.attr("data-id");
	// 原本使用load，导致表格沿用上一次的分页
	// load只会更新表格当前页面的内容，翻页那里是不会更新的
	/*$.ajax({
        type: "post",
        url: options.getProcUrl,
        data: {userid:userId},
        success: function (dat) {
            // 这里重新装填tablelist的数据
            $("#tablelist").bootstrapTable('load', dat);        	
        },
        error: $.tool.ajaxError
    });*/
    $("#tablelist").bootstrapTable('destroy');
    reInitTableList(options.getProcUrl, options);
});