boostrap-table插件分页展示表格数据

先引入jquery后引入插件

<link href="jquery/bs_table/bootstrap-table.css" type="text/css" rel="stylesheet" />
<!-- bs-table插件 -->
<script type="text/javascript" src="jquery/bs_table/bootstrap-table.js"></script>
<script type="text/javascript" src="jquery/bs_table/bootstrap-table-locale-all.js"></script>

实现代码：

    //分页查询
    function pagingByCondition(){

        $("#tb_user").bootstrapTable({
            toolbar: "#toolbar",
            contentType: 'application/json;charset=UTF-8',
            url: "${pageContext.request.contextPath}/workbench/activity/queryMarketActivityForPageByCondition.do",
            method: "GET",
            idField: "Id",
            striped:true,//是否显示行间隔色
            // 分页设置
            pagination: true,
            pageList: [2, 3, 5, 10],//可供选择的每页的行数
            sidePagination: "server",//表格分页的位置
            pageNumber:1,// 当前页数
            pageSize:3,// 每页展示的条数
            showRefresh: true,
            search: false,
            locale:'zh-CN',//中文支持
            clickToSelect: true,
            showColumns: true, //显示下拉框勾选要显示的列
            minimumCountColumns: 3,
            showPaginationSwitch: true,//展示页数的选择
            // 查询设置
            //queryParamsType : "undefined",
            queryParams: function queryParams(params){//设置查询参数
                var param = {
                    //后台接收参数必须一致，传到后台的pageNo已经是当前页数-1的结果
                    pageNo: params.offset,
                    pageSize: params.limit
                };
                return param;
            }, 
            columns: [{
                field: "id",
                checkbox: true
            }, {
                field: "name",
                title: "名称"
            }, {
                field: "type",
                title: "类型"
            }, {
                field: "state",
                title: "状态"
            }, {
                field: "startDate",
                title: "开始日期"
            }, {
                field: "endDate",
                title: "结束日期"
            }, {
                field: "budgetCost",
                title: "预算成本"
            }, {
                field: "actualCost",
                title: "实际成本"
            }, {
                field: "createBy",
                title: "创建者期"
            }, {
                field: "createTime",
                title: "创建时间"
            }, {
                field: "editBy",
                title: "修改者"
            }, {
                field: "editTime",
                title: "修改时间"
            }, {
                field: "description",
                title: "描述"
            }],

            onClickRow: function (row, $element) {
                curRow = row;
            }
        });

    };

返回结果：

如果是服务端分页，返回的结果必须包含total、rows两个参数：

public class PaginationVO<T> {

    private List<T> rows;// 集合
    private Long total;// 总记录数

    // 省略getter/setter方法
}

最后附上官网地址：

https://github.com/wenzhixin/bootstrap-table
http://www.cnblogs.com/landeanfen/p/4976838.html