bootstrapTable分页、模糊查询、数据刷新、页面跳转。。。各种坑

最新推荐文章于 2022-04-24 18:34:27 发布

置顶

qq_39628595

最新推荐文章于 2022-04-24 18:34:27 发布

阅读量4.3k

点赞数 2

分类专栏：前端文章标签： bootstrap-table bootstrap分页 bootstrapTable刷新 bootstrap-table查询 bootstrap-table查询

本文链接：https://blog.csdn.net/qq_39628595/article/details/89257223

版权

本文介绍了如何在bootstrap-table中实现分页、模糊查询、数据刷新及页面跳转功能。通过将页码和搜索条件存入sessionStorage，在编辑或查看页面后返回时，能自动加载先前的状态。主要涉及的文件包括bootstrap-table.css、jquery.min.js等，并提供了关键代码示例，以确保页面状态的一致性。

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

首先准备好用到的js和css

bootstrap下载地址：http://www.bootcss.com/

bootstrap table插件下载地址

官网：https://bootstrap-table.com/

Github：https://github.com/wenzhixin/bootstrap-table

主要css和js bootstrap-table.css、jquery.min.js、bootstrap.min.js、bootstrap-table.js、bootstrap-table-zh-CN.js

接下来上代码（主要部分的代码）

注意红色部分

<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
    <div class="content-wrapper">
        <section class="content-header">
            <h1>
                用户列表<span id="a"></span>
            </h1>
        </section>
        <section class="content">
            <table id="dataGrid"></table>
        </section>
    </div>
</div>

<script type="text/javascript">
    $(function () {
        initDataGrid()
    });
    $table = $("#dataGrid");
    function initDataGrid() {
        //pageNumber必须是纯数字 但js是弱类型语言，没有int这种类型
        //所以设置var num=1;这时num的值就是数字1，（不是字符串1）
        var pageSize = sessionStorage.getItem("pageSize");
        var pageNum = sessionStorage.getItem("pageNum");
        var num=1;
        num=pageNum==null?1:parseInt(pageNum);

        $table.bootstrapTable({
            url: '/user/getlist',         //请求后台的URL（*）
            method: 'get',                      //请求方式（*）
            //toolbar: '#toolbar',                //工具按钮用哪个容器
            striped: true,                      //是否显示行间隔色
            cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            pagination: true,                   //是否显示分页（*）
            sortable: false,                     //是否启用排序
            sortOrder: "asc",                   //排序方式
            //queryParams: queryParams,//传递参数（*）
            queryParamsType : "",
            quer