本文实例讲述了bootstrap-table后端分页功能。分享给大家供大家参考，具体如下：
使用bootstrap-table实现后台分页
插件资源点击此处。
引用以下css
<link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css" rel="external nofollow" > <link rel="stylesheet" href="../plugins/bootstrap-table/css/bootstrap-table.css" rel="external nofollow" >
引用以下js
<script src="../plugins/jquery/jquery-1.12.4.min.js"></script> <script src="../plugins/bootstrap/js/bootstrap.min.js"></script> <script src="../plugins/bootstrap-table/js/bootstrap-table.js"></script> <script src="../plugins/bootstrap-table/js/bootstrap-table-zh-cn.js"></script>
html
<table id="usertable" style="text-align: center;font-size: 14px;margin: auto;word-wrap:break-word; word-break:break-all" > </table>
js代码
我要评论
$(function () {
//初始化表格
var otable = new tableinit();
otable.init();
});
function tableinit() {
var otableinit = new object();
//初始化table
otableinit.init = function () {
$('#usertable').bootstraptable({
url: httprequesturl + '/admin/queryuserlist', //请求后台的url（*）
method: 'post', //请求方式（*）
striped: true, //是否显示行间隔色
cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
pagination: true, //是否显示分页（*）
sortorder: "asc", //排序方式
queryparamstype: '',
datatype: 'json',
paginationshowpagego: true,
showjumpto: true,
pagenumber: 1, //初始化加载第一页，默认第一页
queryparams: queryparams,//请求服务器时所传的参数
sidepagination: 'server',//指定服务器端分页
pagesize: 10,//单页记录数
pagelist: [10, 20, 30, 40],//分页步进值
search: false, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
silent: true,
showrefresh: false, //是否显示刷新按钮
showtoggle: false,
minimumcountcolumns: 2, //最少允许的列数
uniqueid: "id", //每一行的唯一标识，一般为主键列
columns: [{
checkbox: true,
visible: false
}, {
field: 'id',
title: '序号',
align: 'center',
formatter: function (value, row, index) {
return index + 1;
}
},
{
field: 'username',
title: '用户账号',
align: 'center',
width: '230px'
},
{
field: 'password',
title: '用户密码',
align: 'center'
}, {
field: 'starttime',
title: '开始时间',
align: 'center'
}, {
field: 'endtime',
title: '结束时间',
align: 'center'
},
{
field: 'rolename',
title: '用户角色',
align: 'center'
}, {
field: 'operation',
title: '操作',
align: 'center',
events: operateevents,//给按钮注册事件
formatter: addfunctionalty//表格中增加按钮
}],
responsehandler: function (res) { //后台返回的结果
console.log(res);
if(res.code == "666"){
var userinfo = res.data.list;
var newdata = [];
if (userinfo.length) {
for (var i = 0; i < userinfo.length; i++) {
var datanewobj = {
'id': '',
"username": '',
'password': '',
"starttime": '',
'endtime': '',
'rolename': '',
'status': ''
};
datanewobj.id = userinfo[i].id;
datanewobj.username = userinfo[i].username;
datanewobj.password = userinfo[i].password;
datanewobj.starttime = userinfo[i].starttime.replace(/-/g,'/');
datanewobj.endtime = userinfo[i].endtime.replace(/-/g,'/');
datanewobj.rolename = userinfo[i].rolename;
datanewobj.status = userinfo[i].status;
newdata.push(datanewobj);
}
console.log(newdata)
}
var data = {
total: res.data.total,
rows: newdata
};
return data;
}
}
});
};
// 得到查询的参数
function queryparams(params) {
var username = $("#keyword").val();
console.log(username);
var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
pagenum: params.pagenumber,
pagesize: params.pagesize,
username: username
};
return json.stringify(temp);
}
return otableinit;
}
// 表格中按钮
function addfunctionalty(value, row, index) {
var btntext = '';
btntext += "<button type=\"button\" id=\"btn_look\" οnclick=\"resetpassword(" + "'" + row.id + "'" + ")\" style='width: 77px;' class=\"btn btn-default-g ajax-link\">重置密码</button> ";
btntext += "<button type=\"button\" id=\"btn_look\" οnclick=\"opencreateuserpage(" + "'" + row.id + "'" + "," + "'编辑')\" class=\"btn btn-default-g ajax-link\">编辑</button> ";
btntext += "<button type=\"button\" id=\"btn_stop" + row.id + "\" οnclick=\"changestatus(" + "'" + row.id + "'" + ")\" class=\"btn btn-danger-g ajax-link\">关闭</button> ";
btntext += "<button type=\"button\" id=\"btn_stop" + row.id + "\" οnclick=\"deleteuser(" + "'" + row.id + "'" + ")\" class=\"btn btn-danger-g ajax-link\">删除</button> ";
return btntext;
}
//刷新表格
function getuserlist() {
$("#usertable").bootstraptable('refresh');
}
ps：关于bootstrap布局，这里再为大家推荐一款本站的在线可视化布局工具供大家参考使用：
在线bootstrap可视化布局编辑工具：
希望本文所述对大家基于bootstrap的程序设计有所帮助。
如对本文有疑问， 点击进行留言回复！！
asp.net中ajax和一般处理程序（handler.ashx）的交互
egg.js创建项目，目录介绍，简单使用，sequelize mysql使用
网友评论