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

bootstrap table分页的两种方式：

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

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

bootstrap 下载地址：bootstrap下载

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

jquery下载地址：jquery下载

页面引入需要的js、css

html页面标签内容

    

        搜索
    

    

展示效果：

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 = ""
                return html;
            }
        },
        {
            title : '序号',
            field : 'org_id',
            sortable : true
        },
        {
            title : '名称',
            field : 'org_name',
            formatter:function(value, row, index) {
                let html = ""+row["org_name"]+""
                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 });
});

 

（客户端分页）

$("#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 = ""
                return html;
            }
        },
        {
            title : '序号',
            field : 'org_id',
            sortable : true
        },
        {
            title : '名称',
            field : 'org_name',
            formatter:function(value, row, index) {
                let html = ""+row["org_name"]+""
                return html;
            }
        },
        {
            title : '联系人',
            field : 'org_contact',
            sortable : true
        }
    ]
})