bootstrap table分页（前后端两种方式实现）

短命女 2022-11-10 01:35 188阅读 0赞

bootstrap table分页的两种方式：

前端分页：一次性从数据库查询所有的数据，在前端进行分页（数据量小的时候或者逻辑处理不复杂的话可以使用前端分页）

服务器分页：每次只查询当前页面加载所需要的那几条数据

bootstrap 下载地址：[bootstrap下载][bootstrap]

bootstrap-table 下载地址：[bootstrap-table下载][bootstrap-table]

jquery下载地址：[jquery下载][jquery]

**页面引入需要的js、css**

<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <link href="bootstrap-table/dist/bootstrap-table.min.css"rel="stylesheet">
    
    <script src="jquery/jquery.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <script src="bootstrap-table/dist/bootstrap-table.min.js"></script>
    <script src="bootstrap-table/dist/locale/bootstrap-table-zh-CN.min.js"></script>

**html页面标签内容**

展示效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTQ2MTQ4Nw_size_16_color_FFFFFF_t_70][]

**JS分页代码**

（**服务端分页**）

$("#apiHospitalList").bootstrapTable({
        url:"{:url('Hospital/hospitalListFormApi')}",   //请求地址
        method: 'get',                      //请求方式（*）
        striped : true, //是否显示行间隔色
        pageNumber : 1, //初始化加载第一页
        pageSize : 5,//单页记录数
        pagination : true,//是否分页
        sidePagination : 'server',//server:服务器端分页|client：前端分页
        pageList : [ 5, 10, 20],//可选择单页记录数
        // showRefresh : true,//刷新按钮
        // search: true,
        // searchAlign: 'left',
        queryParams : function(params) {
            return {
                limit: params.limit,   //页面大小
                offset: params.offset,  //页码
            };
        },
        responseHandler:responseHandler,//请求数据成功后，渲染表格前的方法
        columns : [
            {
                title : '',
                field : 'org_id',
                formatter:function(value, row, index) {
                    let html = "<input name='check-api-list' type='checkbox' data-id='"+row['org_id']+"'/>"
                    return html;
                }
            },
            {
                title : '序号',
                field : 'org_id',
                sortable : true
            },
            {
                title : '名称',
                field : 'org_name',
                formatter:function(value, row, index) {
                    let html = "<span>"+row["org_name"]+"</span>"
                    return html;
                }
            },
            {
                title : '联系人',
                field : 'org_contact',
                sortable : true
            }
        ]
    })
    
    function responseHandler(result) {
        if(result.code != 1) {
            layer.msg(result.msg)
            return false;
        }
        return {
            total: result.data.total_num,
            rows: result.data.list
        };
    }

responseHandler中返回的数据必须为 return \{ total: 12, **rows**: \[\]\}  否则表格展示不出

使用自己的搜索框查询数据，及刷新表格信息

$(document).on('click', '#search_api_btn', function(){
        let timeNode = {'org_name': $('#search_org_name').val()};
        $("#apiHospitalList").bootstrapTable('refresh', {query: timeNode });
    });

**（客户端分页）**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTQ2MTQ4Nw_size_16_color_FFFFFF_t_70 1][]

$("#apiHospitalList").bootstrapTable({
        url:"{:url('Hospital/hospitalListFormApi')}",   //请求地址
        method: 'get',                      //请求方式（*）
        striped : true, //是否显示行间隔色
        pageNumber : 1, //初始化加载第一页
        pageSize : 5,//单页记录数
        pagination : true,//是否分页
        sidePagination : 'client',//server:服务器端分页|client：前端分页
        pageList : [ 5, 10, 20],//可选择单页记录数
        showRefresh : true,//刷新按钮
        search: true,//搜索框
        searchAlign: 'left',//搜索框位置'left', 'right'
        queryParams : function(params) {
            return {
                limit: params.limit,   //页面大小
                offset: params.offset,  //页码
            };
        },
        columns : [
            {
                title : '',
                field : 'org_id',
                formatter:function(value, row, index) {
                    let html = "<input name='check-api-list' type='checkbox' data-id='"+row['org_id']+"'/>"
                    return html;
                }
            },
            {
                title : '序号',
                field : 'org_id',
                sortable : true
            },
            {
                title : '名称',
                field : 'org_name',
                formatter:function(value, row, index) {
                    let html = "<span>"+row["org_name"]+"</span>"
                    return html;
                }
            },
            {
                title : '联系人',
                field : 'org_contact',
                sortable : true
            }
        ]
    })

[bootstrap]: http://www.bootcss.com/
[bootstrap-table]: http://bootstrap-table.wenzhixin.net.cn/
[jquery]: http://www.jq22.com/jquery-info122
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTQ2MTQ4Nw_size_16_color_FFFFFF_t_70]: /images/20221023/12783bfdec2c4b98923877d78d461e1c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTQ2MTQ4Nw_size_16_color_FFFFFF_t_70 1]: /images/20221023/a8bb6c251fca440484e3854754913960.png