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;
}
});

};

返回结果：

public class PaginationVO<T> {

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

// 省略getter/setter方法
}

最后附上官网地址：