Jquery Datatable的使用样例（ssm+bootstrsp框架下）服务器端分页
Jquery Datatable的使用样例（ssm+bootstrsp框架下）服务器端分页
微风-- 轻许--
发布于 2022-04-13 09:08:52
发布于 2022-04-13 09:08:52
效果：
我这个表格数据 比较少没有第2页
有多例多页的效果（带滚动条和翻页）：
1. jsp页面：
表格声明部分：
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="x_panel">
<div class="x_title">
<h2>权限角色管理 </h2>
<ul class="nav navbar-right panel_toolbox">
<li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a></li>
<li><a href="javascript:void(0);" id="add"><i class="fa fa-plus"></i></a></li>
</ul>
<div class="clearfix"></div>
</div>
<div class="x_content">
<div class="form-inline">
<label>角色名称：
<input id="theRoleName" type="text" class="form-control input-sm" placeholder="输入角色名称" style="width: 100px;">
</label>
<button class="btn btn-success btn-sm" style="margin-bottom:0;" onclick="javascript: myTable.ajax.url('system/getAuthRoleList').load();">
<i class="fa fa-search">查询</i>
</button>
<button class="btn btn-info btn-sm" style="margin-bottom:0;" onclick="reset();"><i class="fa fa-undo">重置</i></button>
</div>
<table id="datatable" class="table table-striped table-bordered">
<thead>
<tr>
<th width="120px">序号</th>
<th width="340px">角色名称</th>
<th width="440px">角色资源字串</th>
<th>操作</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>表格初始化部分：
页面加载的时候 会自动初始化表格，从后端查出数据装入表中。
<!-- 分页相关JS -->
<script src="css/vendors/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="css/vendors/datatables.net-bs/js/dataTables.bootstrap.js"></script>
<script type="text/javascript">
var myTable
$(function() {
//初始化表格对象
myTable = $('#datatable').DataTable({
dom: 'irtlp',
searching: false,
processing: true,
serverSide: true,
paging: true,
info: true,
scrollX: true, //列太多，超过显示长度需要滚动条时使用
ajax: {
url: "system/getAuthRoleList",// 数据请求地址
type: "POST",
data: function (params) {
//此处为定义查询条件 传给控制器的参数
//角色名称
params.roleName = $("#theRoleName").val()
}
},
columns: [
{ data: "id" },
{ data: "roleName" },
{ data: "resourcesIds" }
],
columnDefs: [{
targets: 3,// 操作例的位置，从0开始数为第几例，
data: "id",
width: 140,
"render": function(data, type, full){
return "<a id='upd' class='btn btn-info btn-xs'><i class='fa fa-pencil'></i>修改权限</a>"
+ "<button class='btn btn-danger btn-xs' onclick='deleteRoleRes("+data+")'><i class='fa fa-remove'></i> 删除</button>"
}
}],
language: {url: "css/vendors/language-zh.json"}
});
<!-- 分页相关JS -->
<script src="css/vendors/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="css/vendors/datatables.net-bs/js/dataTables.bootstrap.js"></script>
<script type="text/javascript">
var myTable
$(function() {
//初始化表格对象
myTable = $('#datatable').DataTable({
dom: 'irtlp',
searching: false,
processing: true,
serverSide: true,
paging: true,
info: true,
scrollX: true, //列太多，超过显示长度需要滚动条时使用
ajax: {
url: "system/getAuthRoleList",// 数据请求地址
type: "POST",
data: function (params) {
//此处为定义查询条件 传给控制器的参数
//角色名称
params.roleName = $("#theRoleName").val()
}
},
columns: [
{ data: "id" },
{ data: "roleName" },
{ data: "resourcesIds" }
],
columnDefs: [{
targets: 3,// 操作例的位置，从0开始数为第几例，
data: "id",
width: 140,
"render": function(data, type, full){
return "<a id='upd' class='btn btn-info btn-xs'><i class='fa fa-pencil'></i>修改权限</a>"
+ "<button class='btn btn-danger btn-xs' οnclick='deleteRoleRes("+data+")'><i class='fa fa-remove'></i> 删除</button>"
}
}],
language: {url: "css/vendors/language-zh.json"}
});2. 通过 数据请求地址 找到对应的控制器方法：
参数： draw ： 不用管
start ： 从第N条开始
length ： 每页显示N条
roleName ：查询条件（此处是一个角色表，用于查询角色名为N的结果）
返回的参数：recordsTotal、recordsFiltered 都是结果集总记录数。data：结果集。draw：原样返回。
/**
* 加载权限角色列表
* @param draw
* @param start
* @param length
* @param roleName
* @return
* @throws Exception
*/
@ResponseBody
@RequestMapping("/getAuthRoleList")
public Object getAuthRoleList(int draw, int start, int length, String roleName)throws Exception{
_logger.info("＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋ 展示权限角色列表 ＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋＋ ");
PageInfo<AuthRole> pageInfo = _authRoleService.selectAuthRoleByPage((start/length)+1, length, roleName);
Map<String, Object> map = new HashMap<String, Object>();
List<Object> data = new ArrayList<Object>();
for(AuthRole res : pageInfo.getList()){
Map<String, Object> obj = new HashMap<String, Object>();
obj.put("id", res.getId());
obj.put("roleName", res.getRoleName());
obj.put("resourcesIds", res.getResourcesIds());
data.add(obj);
}
map.put("draw", draw);
map.put("recordsTotal", pageInfo.getTotal());
map.put("recordsFiltered", pageInfo.getTotal());
map.put("data", data);
return map;
}只要把后端数据查出来，处理为要求的json格式数据返回给datatable就是了。
我的代码分页有用pagehelper分页插件。可以不用插件自己写分页sql一样的。只要返回的数据格式对了，datatable就能解析。
3.pageHelper的用法 ：http://blog.csdn.net/jiangyu1013/article/details/56287388点击打开链接
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017-02-21 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读