Bootsrap Table 分页

一、需要准备的文件
如果想使用bootstrap必须要引入bootstrap的相关文件，bootstrap的js与css文件与普通的js和css文件引入到页面的方式一样，在本例中用到的文件有以下几个：

注：jQuery文件必须在bootstrap文件引入之前引入。
二、在bootstrap table中有两种分页的方式，一种是客户端（client）分页，一种是服务端（server）分页，以下分别介绍两种分页方式。

A、客户端分页（client）

function createTable() {        $("#stuinfo").bootstrapTable({            url : "StudentServlet",            method : 'get', //请求方式（*）            toolbar : '#toolbar', //工具按钮用哪个容器            striped : true, //是否显示行间隔色            cache : false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）            pagination : true, //是否显示分页（*）            pageSize : 2, //每页的记录行数（*）            pageNumber : 1, //初始化加载第一页，默认第一页            pageList : [ 2, 4, 6 ],            singleSelect : false,            showColumns : true,            sortable : true, //是否启用排序             sidePagination : "client", //分页方式：client客户端分页，server服务端分页（*）            strictSearch : true,            minimumCountColumns : 2, //最少允许的列数            clickToSelect : true, //是否启用点击选中行            showRefresh : false, //是否显示刷新按钮            uniqueId : "name", //每一行的唯一标识，一般为主键列            cardView : false, //是否显示详细视图            search : true,            strictSearch : true,            showColumns : true,            showRefresh : true,            onLoadError : function(data) {                $('#stuinfo').bootstrapTable('removeAll');            },            columns : [ {                field : 'name',                title : '名字'            }, {                field : 'age',                title : '年龄'            }, {                field : 'address',                title : '地址'            }, ]        });    }

注：在使用客户端分页的时候，“sidePagination”的值为“client”，后台返回的JSON数据形式为：[{},{},{}……..]这种形式。

B、服务端分页（server）

function createTable() {        $("#stuinfo").bootstrapTable({            url : "StudentServlet",            method : 'get', //请求方式（*）            toolbar : '#toolbar', //工具按钮用哪个容器            striped : true, //是否显示行间隔色            cache : false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）            pagination : true, //是否显示分页（*）            queryParams : function(params) {                 return {                       pageOffset: params.offset,                       pageSize: params.limit,                     };             },            pageSize : 2, //每页的记录行数（*）            pageNumber : 1, //初始化加载第一页，默认第一页            pageList : [ 2, 4, 6 ],            singleSelect : false,            showColumns : true,            sortable : true, //是否启用排序             sidePagination : "server", //分页方式：client客户端分页，server服务端分页（*）            strictSearch : true,            minimumCountColumns : 2, //最少允许的列数            clickToSelect : true, //是否启用点击选中行            showRefresh : false, //是否显示刷新按钮            uniqueId : "name", //每一行的唯一标识，一般为主键列            cardView : false, //是否显示详细视图            search : true,            strictSearch : true,            showColumns : true,            showRefresh : true,            onLoadError : function(data) {                $('#stuinfo').bootstrapTable('removeAll');            },            columns : [ {                field : 'name',                title : '名字'            }, {                field : 'age',                title : '年龄'            }, {                field : 'address',                title : '地址'            }, ]        });    }

注：在使用bootstrap的服务端分页时，需要向后台程序传递两个参数，即：offset和pagesize（当前页与每页记录的条数），以便数据库使用这两个参数为数据库中符合条件的数据记录进行分页。“sidePagination”为“server”，后台程序即servlet返回给前台的数据格式为：{“total”：“”，“rows”：[{},{},{}……..]}，“total”为数据的条数，“rows”为数据的集合。

三、完整的代码示例
以服务端分页为例：
1、使用JDBC将数据库中数据查询出来（从数据库中查询出来的时候是一个ResultSet结果集，之后我们将它转换为一个List集合），再写一个方法查询出记录的条数，代码如下：

public class StudentService {    /**     * 查询数据库中的数据并转换为一个List     *      * @return     * @throws SQLException     */    public List<Student> getStudents(Integer pageOffset,Integer pageSize) throws SQLException {        String sql = "select * from student limit "+pageOffset+" ,"+pageSize;        ResultSet rs = DBUtil.query(sql);        List<Student> students = new ArrayList<>();        while (rs.next()) {            Student student = new Student();            student.setName(rs.getString("name"));            student.setAge(rs.getInt("age"));            student.setAddress(rs.getString("address"));            students.add(student);        }        return students;    }    /**     * 获取记录的条数     * @return     * @throws SQLException     */    public int getStudentsCount() throws SQLException{        String sql = "select count(1) as count from student";        ResultSet rs = DBUtil.query(sql);        if(rs.next()){            return rs.getInt("count");        }        return 0;    }}

2、编写Servlet，即bootstrap table中“url”属性即为这个Servlet的名字

@WebServlet("/StudentServlet")public class StudentServlet extends HttpServlet {    private static final long serialVersionUID = 1L;    /**     * @see HttpServlet#HttpServlet()     */    public StudentServlet() {        super();        // TODO Auto-generated constructor stub    }    /**     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse     *      response)     */    protected void doGet(HttpServletRequest request, HttpServletResponse response)            throws ServletException, IOException {        response.setCharacterEncoding("utf-8");        String pageSizeStr = request.getParameter("pageSize");        String pageOffsetStr = request.getParameter("pageNumber");        // 如果参数为空设置默认值        Integer pageSize = pageSizeStr == null ? 10 : Integer.parseInt(pageSizeStr);        Integer pageOffset = pageOffsetStr == null ? 0 : Integer.parseInt(pageOffsetStr);        StudentService test = new StudentService();        try {            List<Student> students = test.getStudents(pageOffset, pageSize);            JSONObject jsonObject = new JSONObject();            jsonObject.put("total", test.getStudentsCount());            jsonObject.put("rows", students);            PrintWriter out = response.getWriter();            out.print(jsonObject.toString());        } catch (SQLException e) {            e.printStackTrace();        }    }    /**     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse     *      response)     */    protected void doPost(HttpServletRequest request, HttpServletResponse response)            throws ServletException, IOException {        doGet(request, response);    }}

注：我们可以在浏览器中直接测试Servlet，查看返回的JSON数据是否是我们需要的格式。

通过测试servlet我们发现返回的JSON数据是我们需要的格式，接下来进行最关键的一步将数据显示到页面中。

3、html页面代码

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>所有学生</title><script type="text/javascript" src="js/jquery-3.2.0.js"></script><script type="text/javascript" src="js/bootstrap.min.js"></script><script type="text/javascript" src="js/bootstrap-table.min.js"></script><script type="text/javascript" src="js/bootstrap-table-zh-CN.min.js"></script><link rel="stylesheet" href="css/bootstrap.min.css"><link rel="stylesheet" href="css/bootstrap-table.min.css"><script>    $(document).ready(function() {        createTable();    })    function createTable() {        $("#stuinfo").bootstrapTable({            url : "StudentServlet",            method : 'get', //请求方式（*）            toolbar : '#toolbar', //工具按钮用哪个容器            striped : true, //是否显示行间隔色            cache : false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）            pagination : true, //是否显示分页（*）            queryParams : function(params) {                 return {                       pageOffset: params.offset,                       pageSize: params.limit,                     };             },            pageSize : 2, //每页的记录行数（*）            pageNumber : 1, //初始化加载第一页，默认第一页            pageList : [ 2, 4, 6 ],            singleSelect : false,            showColumns : true,            sortable : true, //是否启用排序             sidePagination : "server", //分页方式：client客户端分页，server服务端分页（*）            strictSearch : true,            minimumCountColumns : 2, //最少允许的列数            clickToSelect : true, //是否启用点击选中行            showRefresh : false, //是否显示刷新按钮            uniqueId : "name", //每一行的唯一标识，一般为主键列            cardView : false, //是否显示详细视图            search : true,            strictSearch : true,            showColumns : true,            showRefresh : true,            onLoadError : function(data) {                $('#stuinfo').bootstrapTable('removeAll');            },            columns : [ {                field : 'name',                title : '名字'            }, {                field : 'age',                title : '年龄'            }, {                field : 'address',                title : '地址'            }, ]        });    }</script></head><body>    <table class="table table-bordered table-hover table-striped"        id="stuinfo"></table></body></html>

在浏览器中显示的效果如下图所示：