这里的实现相对于那些使用分页插件来说其实很简单,从页面上绑定得到第几页、每页数据条数,进行数据库分页实现。
这里使用到了bootstrap-table.js插件,可以结合中文插件bootstrap-table-zh-CN.js进行使用,这里贴出中文插件源码:
/**
* Bootstrap Table Chinese translation
* Author: Zhixin Wen<wenzhixin2010@gmail.com>
*/
(function ($) {
'use strict';
$.fn.bootstrapTable.locales['zh-CN'] = {
formatLoadingMessage: function () {
return '正在努力地加载数据中,请稍候……';
},
formatRecordsPerPage: function (pageNumber) {
return '每页显示 ' + pageNumber + ' 条记录';
},
formatShowingRows: function (pageFrom, pageTo, totalRows) {
return '显示第 ' + pageFrom + ' 到第 ' + pageTo + ' 条记录,总共 ' + totalRows + ' 条记录';
},
formatSearch: function () {
return '搜索';
},
formatNoMatches: function () {
return '没有找到匹配的记录';
},
formatPaginationSwitch: function () {
return '隐藏/显示分页';
},
formatRefresh: function () {
return '刷新';
},
formatToggle: function () {
return '切换';
},
formatColumns: function () {
return '列';
},
formatExport: function () {
return '导出数据';
},
formatClearFilters: function () {
return '清空过滤';
}
};
$.extend($.fn.bootstrapTable.defaults, $.fn.bootstrapTable.locales['zh-CN']);
})(jQuery);
下边开始我的实现过程:
页面部分:
index.html:
<div class="panel-body" style="padding-bottom:0px;">
<div id="toolbar" class="btn-group">
<button id="btn_add" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
</button>
<button id="btn_edit" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
</button>
<button id="btn_delete" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
</button>
</div>
<table id="tb_permissions"></table>
</div>
<script src="assets/js/index.js" type="text/javascript"></script>
<script type="text/javascript">
var oTable = new TableInit();
oTable.Init();
var oButtonInit = new ButtonInit();
oButtonInit.Init();
</script>
index.js:
var TableInit = function () {
var oTableInit = new Object();
//初始化Table
oTableInit.Init = function () {
$('#tb_permissions').bootstrapTable({
url: 'rbac/users/data.json', //请求后台的URL(*)
method: 'get', //请求方式(*)
toolbar: '#toolbar', //工具按钮用哪个容器
striped: true, //是否显示行间隔色
cache: false, //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
pagination: true, //是否显示分页(*)
sortable: false, //是否启用排序
sortOrder: "asc", //排序方式
queryParams: oTableInit.queryParams,//传递参数(*)
sidePagination: "server", //分页方式:client客户端分页,server服务端分页(*)
pageNumber: 1, //初始化加载第一页,默认第一页
pageSize: 10, //每页的记录行数(*)
pageList: [10, 25, 50, 100], //可供选择的每页的行数(*)
search: true, //是否显示表格搜索,此搜索是客户端搜索,不会进服务端,所以,个人感觉意义不大
strictSearch: true,
showColumns: true, //是否显示所有的列
showRefresh: true, //是否显示刷新按钮
minimumCountColumns: 2, //最少允许的列数
clickToSelect: true, //是否启用点击选中行
height: 500, //行高,如果没有设置height属性,表格自动根据记录条数觉得表格高度
uniqueId: "ID", //每一行的唯一标识,一般为主键列
showToggle:true, //是否显示详细视图和列表视图的切换按钮
cardView: false, //是否显示详细视图
detailView: false, //是否显示父子表
columns: [{
checkbox: true
}, {
field: 'username',
title: '用户名称'
}, {
field: 'locked',
title: '用户状态'
}, {
field: 'roles',
title: '角色列表'
}, {
field: 'desc',
title: '信息概要'
}, {
field: 'create_time',
title: '创建时间'
},{
field: 'last_update_time',
title: '最后修改时间'
}]
});
};
//得到查询的参数
oTableInit.queryParams = function (params) {
var temp = { //这里的键的名字和控制器的变量名必须一致,这边改动,控制器也需要改成一样的
limit: params.limit, //页面大小对应上边的pageSize: 10
offset: params.offset //页码 (pageNumber - 1)*pageSize
};
return temp;
};
return oTableInit;
};
var ButtonInit = function () {
var oInit = new Object();
var postdata = {};
oInit.Init = function () {
//$("#btn_add").click(function () {
// $("#myModalLabel").text("新增");
// $("#myModal").find(".form-control").val("");
// $('#myModal').modal()
// postdata.DEPARTMENT_ID = "";
//});
//$("#btn_edit").click(function () {
// var arrselections = $("#tb_departments").bootstrapTable('getSelections');
// if (arrselections.length > 1) {
// toastr.warning('只能选择一行进行编辑');
// return;
// }
// if (arrselections.length <= 0) {
// toastr.warning('请选择有效数据');
// return;
// }
// $("#myModalLabel").text("编辑");
// $("#txt_departmentname").val(arrselections[0].DEPARTMENT_NAME);
// $("#txt_parentdepartment").val(arrselections[0].PARENT_ID);
// $("#txt_departmentlevel").val(arrselections[0].DEPARTMENT_LEVEL);
// $("#txt_statu").val(arrselections[0].STATUS);
// postdata.DEPARTMENT_ID = arrselections[0].DEPARTMENT_ID;
// $('#myModal').modal();
//});
//$("#btn_delete").click(function () {
// var arrselections = $("#tb_departments").bootstrapTable('getSelections');
// if (arrselections.length <= 0) {
// toastr.warning('请选择有效数据');
// return;
// }
// Ewin.confirm({ message: "确认要删除选择的数据吗?" }).on(function (e) {
// if (!e) {
// return;
// }
// $.ajax({
// type: "post",
// url: "/Home/Delete",
// data: { "": JSON.stringify(arrselections) },
// success: function (data, status) {
// if (status == "success") {
// toastr.success('提交数据成功');
// $("#tb_departments").bootstrapTable('refresh');
// }
// },
// error: function () {
// toastr.error('Error');
// },
// complete: function () {
// }
// });
// });
//});
//$("#btn_submit").click(function () {
// postdata.DEPARTMENT_NAME = $("#txt_departmentname").val();
// postdata.PARENT_ID = $("#txt_parentdepartment").val();
// postdata.DEPARTMENT_LEVEL = $("#txt_departmentlevel").val();
// postdata.STATUS = $("#txt_statu").val();
// $.ajax({
// type: "post",
// url: "/Home/GetEdit",
// data: { "": JSON.stringify(postdata) },
// success: function (data, status) {
// if (status == "success") {
// toastr.success('提交数据成功');
// $("#tb_departments").bootstrapTable('refresh');
// }
// },
// error: function () {
// toastr.error('Error');
// },
// complete: function () {
// }
// });
//});
//$("#btn_query").click(function () {
// $("#tb_departments").bootstrapTable('refresh');
//});
};
return oInit;
};
action片段:
@RequestMapping(value = "data", method = RequestMethod.GET)
public Object getUserList(String limit, String offset, ModelMap model) {
List<User> list = userService.findUserList(offset, limit);
int count = userService.getUserCount();
logger.info("return data:[{}]", list);
logger.info("data count:[{}]", count);
model.addAttribute("list", list);
model.addAttribute("size", count);
return "rbac/list";
}
dao片段:
List<User> findAllUsers(@Param("offset")int offset, @Param("limit")int limit);
sql片段(MySQL):
<!-- 查找所有用户 -->
<select id="findAllUsers" resultMap="userMap">
select * from sys_users limit #{offset},#{limit}
</select>
sql片段(SQL SERVER):
<!-- 查找所有用户 -->
<select id="findAllUsers" resultMap="userMap">
SELECT top ${offset} *
from sys_users
where
id not in (
select top ${offset} id from tablename
)
order by id
</select>
sql片段(ORACLE):
<!-- 查找所有用户 -->
<select id="findAllUsers" resultMap="userMap">
SELECT * FROM (
SELECT *, ROWNUM rn FROM sys_users
WHERE
rn >= #{offset} AND rn <= #{offset} + #{limit}
</select>
list.json:
{
<#if list??>
"rows": [
<#list list as user>
{
"username": "${user.username}",
"locked": "<#if user.locked==false>激活<#else>锁定</#if>",
"roles": "",
"desc": "${user.desc}",
"create_time": "${user.createTime?datetime}",
"last_update_time": "${user.lastUpdateTime?datetime}"
}
<#sep>,
</#list>
],
"total": ${size}
</#if>
}