前端分页如下
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<link rel="stylesheet" href="css/bootstrap-table.min.css"/>
<form class="form-inline" role="form" style="float: left; width: 100%" method="post" id="queryForm">
<div class="form-group">
<label for="nickname">名称:label>
<input type="text" class="form-control" name="nickname" id="nickname" placeholder="请输入名称"/>
div>
<div class="form-group">
<button type="button" id="queryBtn" onclick="doQuery();" class="btn btn-primary">查询button>
div>
form>
div>
<div class="container" style="width: 95%">
<table id="tradeList"/>
div>
<script src="libs/jquery.min.js">script>
<script src="libs/bootstrap-table.min.js">script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/locale/bootstrap-table-zh-CN.min.js">script>
<script type="application/javascript">
$(function () {
//初始化Table
var oTable = new TableInit();
oTable.Init();
});
function doQuery(params){
$('#tradeList').bootstrapTable('refresh'); //刷新表格
}
var TableInit = function () {
var oTableInit = new Object();
//初始化Table
oTableInit.Init = function () {
$('#tradeList').bootstrapTable({
contentType: "application/x-www-form-urlencoded",//必须要有!!!!
url: '/user/list', //请求后台的URL(*)
method: 'get', //请求方式(*)
dataType: 'json',
toolbar: '#query', //工具按钮用哪个容器
pagination: true, //是否显示分页(*)
sortOrder: "asc", //排序方式
queryParams: oTableInit.queryParams,//传递参数(*)
sidePagination: "server", //分页方式:client客户端分页,server服务端分页(*)
clickToSelect: true, //是否启用点击选中行
height: $(window).height() - 100, //行高,如果没有设置height属性,表格自动根据记录条数觉得表格高度
width: $(window).width() - 10,
uniqueId: "id", //每一行的唯一标识,一般为主键列
queryParamsType : "",
responseHandler: oTableInit.responseHandler,
silent: true, //刷新事件必须设置
formatLoadingMessage: function () {
return "请稍等,正在加载中...";
},
columns: [
{
field: 'companyId',
checkbox: true
},{
field: '',
title: '序号',
formatter: function (value, row, index) {
return index + 1;
},
align: 'center'
}, {
field: 'nickname',
title: '用户名',
align: 'center'
}, {
field: 'email',
title: '邮箱/登陆名',
align: 'center'
}, {
field: 'createTime',
title: '录入时间',
align: 'center'
/*,
formatter : function (value, row, index){
return new Date(value).format('yyyy-MM-dd hh:mm:ss');
}*/
}, {
field: 'lastLoginTime',
title: '最近登陆时间'
/*,
formatter : function (value, row, index){
return new Date(value).format('yyyy-MM-dd hh:mm:ss');
}*/,
align: 'center'
}, {
field: 'status',
title: '状态',
formatter : function (value, row, index){
return value == 1 ? '启用' : '禁用';
},
align: 'center'
}, {
title: '操作',
field: 'id',
align: 'center',
formatter:function(value,row,index){
var e = '+ row.id + '\')">编辑 ';
var d = '+ row.id +'\')">删除 ';
return e+d;
}
}]
});
};
oTableInit.responseHandler = function(res) { //数据筛选
if (res) {
return {
"rows" : res.list,
"total" : res.total
};
} else {
return {
"rows" : [],
"total" : 0
};
}
}
//得到查询的参数
oTableInit.queryParams = function (params) {
var temp = {
pageSize : params.pageSize,
pageNum : params.pageNumber
};
$.each(params, function (index, value) {
console.log(index+"---"+value);
})
return temp;
};
return oTableInit;
};
script>
//获取参数方法 **queryParamsType 默认为 limit**
function getParams(params) {
var temp = {
pageSize : params.limit,
offset: params.offset
};
return temp;
}
//获取参数 **queryParamsType : ""**
function getParams(params) {
var temp = {
pageSize : params.pageSize,
pageNumber : params.pageNumber
};
return temp;
}