如何使用bootstrap进行数据的分页展示,分页技术有：前端分页，和后端分页，私聊:可以定制基本的增删改查的前后端代码生成的插件

一、前期的工作：引入相应的js和css样式（可以网上下载，或者私聊我个人：QQ:27530091）

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

二、相应的字段渲染

//生成用户数据
$('#mytab').bootstrapTable({
    method: 'post',
    contentType: "application/x-www-form-urlencoded",//必须要有！！！！
    url: "url",//要请求数据的文件路径
    toolbar: '#toolbar',//指定工具栏
    striped: true, //是否显示行间隔色
    dataField: "res",
    sortable: true, //是否启用排序 sortOrder: "ID asc",
    sortOrder: "ID asc",
    pagination: true,//是否分页
    queryParamsType: 'limit',//查询参数组织方式
    queryParams: queryParams,//请求服务器时所传的参数
    sidePagination: 'server',//指定服务器端分页或者是客户端分页
    // 设置在哪里进行分页，可选值为"client" 或者
    // "server"
    // queryParams : queryParams,
    // //请求服务器数据时，你可以通过重写参数的方式添加一些额外的参数，例如 toolbar 中的参数 如果
    // queryParamsType = 'limit' ,返回参数必须包含
    // limit, offset, search, sort, order 否则, 需要包含:
    // pageSize, pageNumber, searchText, sortName,
    // sortOrder.
    // 返回false将会终止请求
    pageNumber: 1, //初始化加载第一页，默认第一页
    pageSize: 10,//单页记录数
    pageList: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100],//分页步进值
    showRefresh: true,//刷新按钮
    showColumns: true,
    clickToSelect: true,//是否启用点击选中行
    toolbarAlign: 'right',//工具栏对齐方式
    buttonsAlign: 'right',//按钮对齐方式
    toolbar: '#toolbar', search: true,
    uniqueId: "id",                     //每一行的唯一标识，一般为主键列
    showExport: true,
    exportDataType: 'all',
    columns: [
        {
            title: '全选',
            field: 'select',
            //复选框
            checkbox: true,
            width: 25,
            align: 'center',
            valign: 'middle'
        },
        {
            title: '表格显示字段名',
            field: 'javaBean组件字段名',
            align: 'center',
            sortable: true
        }
        ,
        {
            title: '表格显示字段名',
            field: 'javaBean组件字段名',
            align: 'center',
            sortable: true
            formatter: function (value, row, index) {
                //格式化操作，value：指的是当前字段的值，row指的是当前行的值，index指的是索引值
            }
        }
        ,
        {
            title: '操作',
            align: 'center',
            field: '',
            formatter: function (value, row, index) {
                var e = '<a title="编辑" href="javascript:void(0);" id="cashSubject"  data-toggle="modal" data-id="\'' + row.id + '\'" data-target="#myModal" οnclick="return edit(\'' + row.id + '\')"><i class="glyphicon glyphicon-pencil" alt="修改" style="color:green">修改</i></a> ';
                var d = '<a title="删除" href="javascript:void(0);" οnclick="del(' + row.id + ',' + row.isActive + ')"><i class="glyphicon glyphicon-trash" alt="删除" style="color:red">删除</i></a> ';
                var f = '';
                if (row.isActive == 1) {
                    f = '<a title="启用" href="javascript:void(0);" οnclick="updatestatus(' + row.id + ',' + 0 + ')"><i class="glyphicon glyphicon-ok-sign" style="color:green">启用</i></a> ';
                } else if (row.isActive == 0) {
                    f = '<a title="停用" href="javascript:void(0);" οnclick="updatestatus(' + row.id + ',' + 1 + ')"><i class="glyphicon glyphicon-remove-sign"  style="color:red">停用</i></a> ';
                }

                return e + d + f;
            }
        }
    ],
    locale: 'zh-CN',//中文支持,
    responseHandler: function (res) {
        if (res) {
            return {
                "res": res.rows,
                "total": res.total
            };
        } else {
            return {
                "rows": [],
                "total": 0
            };
        }
    }
})
//请求服务数据时所传参数
function queryParams(params) {
    //使用bootstrap的表格搜索控件，.search input 是搜索的表单值
    var title = "";
    $(".search input").each(function () {
        title = $(this).val();
    });
    return {
        //每页多少条数据
        pageSize: this.pageSize,
        //请求第几页
        pageIndex: this.pageNumber,
        //搜索的值
        searchVal: title
    }
}
//查询按钮事件
$('#search_btn').click(function () {
    $('#mytab').bootstrapTable('refresh', {url: 'url'});
})
//刷新
function refush() {
    $('#mytab').bootstrapTable('refresh', {url: 'url'});
}

三、后端分页的参数
int pageSize,分页大小
int pageIndex, //当前页
String searchVal//条件搜索
四、后端返回的基本格式

    private static final long serialVersionUID = 1L;
    //总记录数
    private long total;
    //每页显示记录数
    private int pageSize;
    //当前页数
    private int currentPage;
    //返回的列表
    private List<T> rows;

必须返回的是**json**格式数据