基于SpringMVC+Bootstrap+DataTables实现表格服务端分页、模糊查询


Posted in Javascript onOctober 30, 2016

前言

基于SpringMVC+Bootstrap+DataTables实现数据表格服务端分页、模糊查询(非DataTables Search),页面异步刷新。

说明:sp:message标签是使用了SpringMVC国际化

效果

DataTable表格

基于SpringMVC+Bootstrap+DataTables实现表格服务端分页、模糊查询

关键字查询

自定义关键字查询,非DataTable Search

基于SpringMVC+Bootstrap+DataTables实现表格服务端分页、模糊查询

代码

HTML代码

查询条件代码

<!-- 查询、添加、批量删除、导出、刷新 -->
<div class="row-fluid">
<div class="pull-right">
<div class="btn-group">
<button type="button" class="btn btn-primary btn-sm" id="btn-add">
<i class="fa fa-plus"></i> <sp:message code="sys.add"/>
</button>
<button type="button" class="btn btn-primary btn-sm" id="btn-delAll">
<i class="fa fa-remove"></i> <sp:message code="sys.delAll"/>
</button>
<button type="button" class="btn btn-primary btn-sm" id="btn-export">
<i class="fa fa-sign-in"></i> <sp:message code="sys.export"/>
</button>
<button type="button" class="btn btn-primary btn-sm" id="btn-re">
<i class="fa fa-refresh"></i> <sp:message code="sys.refresh"/>
</button>
</div>
</div>
<div class="row">
<form id="queryForm" action="<%=path%>/goodsType/list" method="post">
<div class="col-xs-2">
<input type="text" id="keyword" name="keyword" class="form-control input-sm"
placeholder="<sp:message code="sys.keyword"/>">
</div>
<button type="button" class="btn btn-primary btn-sm" id="btn-query">
<i class="fa fa-search"></i> <sp:message code="sys.query"/>
</button>
</form>
</div>
</div>

数据table代码

<table id="dataTable" class="table table-striped table-bordered table-hover table-condensed" align="center">
<thead>
<tr class="info">
<td><input type="checkbox" id="checkAll"></td>
<th><sp:message code="sys.no"/></th>
<th><sp:message code="goods.type.name.cn"/></th>
<th><sp:message code="goods.type.name.en"/></th>
<th><sp:message code="sys.create.time"/></th>
<th><sp:message code="sys.update.time"/></th>
<th><sp:message code="sys.oper"/></th>
</tr>
</thead>
</table>

JS代码

DataTables初始化、服务端数据请求、查询条件封装

<!-- page script -->
<script>
$(function () {
//添加、修改异步提交地址
var url = "";
var tables = $("#dataTable").dataTable({
serverSide: true,//分页,取数据等等的都放到服务端去
processing: true,//载入数据的时候是否显示“载入中”
pageLength: 10, //首次加载的数据条数
ordering: false, //排序操作在服务端进行,所以可以关了。
pagingType: "full_numbers",
autoWidth: false,
stateSave: true,//保持翻页状态,和comTable.fnDraw(false);结合使用
searching: false,//禁用datatables搜索
ajax: { 
type: "post",
url: "<%=path%>/goodsType/getData",
dataSrc: "data",
data: function (d) {
var param = {};
param.draw = d.draw;
param.start = d.start;
param.length = d.length;
var formData = $("#queryForm").serializeArray();//把form里面的数据序列化成数组
formData.forEach(function (e) {
param[e.name] = e.value;
});
return param;//自定义需要传递的参数。
},
},
columns: [//对应上面thead里面的序列
{"data": null,"width":"10px"},
{"data": null},
{"data": 'typeNameCn' },
{"data": 'typeNameEn' },
{"data": 'createTime', 
"render":function(data,type,full,callback) {
return data.substr(0,19) 
}
},
{"data": 'updateTime', defaultContent: "", 
"render":function(data,type,full,callback) {
if(data != null && data != ""){
return data.substr(0,19) 
}else{
return data;
}
}
},
{"data": null,"width":"60px"}
],
//操作按钮
columnDefs: [
{
targets: 0,
defaultContent: "<input type='checkbox' name='checkList'>"
},
{
targets: -1,
defaultContent: "<div class='btn-group'>"+
"<button id='editRow' class='btn btn-primary btn-sm' type='button'><i class='fa fa-edit'></i></button>"+
"<button id='delRow' class='btn btn-primary btn-sm' type='button'><i class='fa fa-trash-o'></i></button>"+
"</div>"
}
],
language: {
lengthMenu: "",
processing: "<sp:message code='sys.load'/>",
paginate: {
previous: "<",
next: ">",
first: "<<",
last: ">>"
},
zeroRecords: "<sp:message code='sys.nodata'/>",
info: "<sp:message code='sys.pages'/>",
infoEmpty: "",
infoFiltered: "",
sSearch: "<sp:message code='sys.keyword'/>:",
},
//在每次table被draw完后回调函数
fnDrawCallback: function(){
var api = this.api();
//获取到本页开始的条数
 var startIndex= api.context[0]._iDisplayStart;

 api.column(1).nodes().each(function(cell, i) {


 cell.innerHTML = startIndex + i + 1;

 }); 
}
});
//查询按钮
$("#btn-query").on("click", function () {
tables.fnDraw();//查询后不需要保持分页状态,回首页
});
//添加
$("#btn-add").on("click", function () {
url = "<%=path%>/goodsType/add";
$("input[name=typeId]").val(0);
$("input[name=typeNameCn]").val("");
$("input[name=typeNameEn]").val("");
$("#editModal").modal("show");
});
//批量删除
$("#btn-delAll").on("click", function () {
});
//导出
$("#btn-export").on("click", function () {
});
//刷新
$("#btn-re").on("click", function () {
tables.fnDraw(false);//刷新保持分页状态
});
//checkbox全选
$("#checkAll").on("click", function () {
if ($(this).prop("checked") === true) {
$("input[name='checkList']").prop("checked", $(this).prop("checked"));
//$("#dataTable tbody tr").addClass('selected');
$(this).hasClass('selected')
} else {
$("input[name='checkList']").prop("checked", false);
$("#dataTable tbody tr").removeClass('selected');
}
});
//修改
$("#dataTable tbody").on("click", "#editRow", function () {
var data = tables.api().row($(this).parents("tr")).data();
$("input[name=typeId]").val(data.typeIdStr);
$("input[name=typeNameCn]").val(data.typeNameCn);
$("input[name=typeNameEn]").val(data.typeNameEn);
url = "<%=path%>/goodsType/update";
$("#editModal").modal("show");
});
$("#btn-submit").on("click", function(){
$.ajax({
cache: false,
type: "POST",
url: url,
data:$("#editForm").serialize(),
async: false,
error: function(request) {
showFail("Server Connection Error...");
},
success: function(data) {
if(data.status == 1){
$("#editModal").modal("hide");
showSuccess("<sp:message code='sys.oper.success'/>");
tables.fnDraw();
}else{
showFail("<sp:message code='sys.oper.fail'/>");
}
}
});
});
//删除
$("#dataTable tbody").on("click", "#delRow", function () {
var data = tables.api().row($(this).parents("tr")).data();
if(confirm("是否确认删除这条信息?")){
$.ajax({
url:'<%=path%>/goodsType/del/'+data.typeIdStr,
type:'delete',
dataType: "json",
cache: "false",
success:function(data){
if(data.status == 1){
showSuccess("<sp:message code='sys.oper.success'/>");
tables.api().row().remove().draw(false);
}else{
showFail("<sp:message code='sys.oper.fail'/>");
}
},
error:function(err){
showFail("Server Connection Error...");
}
});
}
});
});
</script>

Java代码

Controller处理方法,负责查询页面需要表格数据,格式化Json后返回。

@RequestMapping(value="/goodsType/getData", produces = "text/json;charset=UTF-8")
@ResponseBody
public String getData(HttpServletRequest request, QueryCondition query) {
DatatablesView<GoodsType> dataTable = goodsTypeService.getGoodsTypeByCondition(query);
dataTable.setDraw(query.getDraw());
String data = JSON.toJSONString(dataTable);
return data;
}

返回Json数据格式

{
"data": [{
"createTime": "2016-10-27 09:42:28.0",
"typeId": 96824775296417986,
"typeIdStr": "96824775296417986",
"typeNameCn": "食品",
"typeNameEn": "Foods",
"updateTime": "2016-10-28 13:00:24.0"
},
{
"createTime": "2016-10-27 09:42:27.0",
"typeId": 96824775296417979,
"typeIdStr": "96824775296417979",
"typeNameCn": "汽车",
"typeNameEn": "Cars123",
"updateTime": "2016-10-27 09:51:24.0"
}],
"draw": 1,
"recordsFiltered": 17,
"recordsTotal": 17
}

DatatablesView,根据DataTables需要格式定义

public class DatatablesView<T> { 
private List<T> data; //data 与datatales 加载的“dataSrc"对应 
private int recordsTotal; 
private int recordsFiltered; 
private int draw;
public DatatablesView() { 
}
public int getDraw() {
return draw;
}
public void setDraw(int draw) {
this.draw = draw;
}
public List<T> getData() {
return data;
}
public void setData(List<T> data) {
this.data = data;
}
public int getRecordsTotal() {
return recordsTotal;
}
public void setRecordsTotal(int recordsTotal) {
this.recordsTotal = recordsTotal;
this.recordsFiltered = recordsTotal;
}
public int getRecordsFiltered() {
return recordsFiltered;
}
public void setRecordsFiltered(int recordsFiltered) {
this.recordsFiltered = recordsFiltered;
} 
}

Service业务处理类,主要根据查询条件统计记录数量,查询当前页数据列表

public DatatablesView<GoodsType> getGoodsTypeByCondition(QueryCondition query) {
DatatablesView<GoodsType> dataView = new DatatablesView<GoodsType>();
//构建查询条件
WherePrams where = goodsTypeDao.structureConditon(query);
Long count = goodsTypeDao.count(where);
List<GoodsType> list = goodsTypeDao.list(where);
dataView.setRecordsTotal(count.intValue());
dataView.setData(list);
return dataView;
}

Dao层就是基本的数据库查询操作,这里省略…

结尾

查询条件这里只使用了关键字模糊查询,根据业务需要,可以动态加入其他查询条件,后台需要做相应处理。

以上所述是小编给大家介绍的基于SpringMVC+Bootstrap+DataTables实现表格服务端分页、模糊查询,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
Hutia 的 JS 代码集
Oct 24 Javascript
jQuery 源码分析笔记(2) 变量列表
May 28 Javascript
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之二
Dec 31 Javascript
JS实现静止元素自动移动示例
Apr 14 Javascript
javascript模拟map输出与去除重复项的方法
Feb 09 Javascript
JS监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法
Aug 05 Javascript
Angularjs 制作购物车功能实例代码
Sep 14 Javascript
JS实现搜索框文字可删除功能
Dec 28 Javascript
AngularJS框架中的双向数据绑定机制详解【减少需要重复的开发代码量】
Jan 19 Javascript
JavaScript继承与多继承实例分析
May 26 Javascript
微信小程序 调用微信授权窗口相关问题解决
Jul 25 Javascript
在LayUI图片上传中,解决由跨域问题引起的请求接口错误的方法
Sep 24 Javascript
原生js代码实现图片放大境效果
Oct 30 #Javascript
Angular2 多级注入器详解及实例
Oct 30 #Javascript
Javascript 跨域知识详细介绍
Oct 30 #Javascript
jquery.validate[.unobtrusive]和Bootstrap实现tooltip错误提示问题分析
Oct 30 #Javascript
JS触摸屏网页版仿app弹窗型滚动列表选择器/日期选择器
Oct 30 #Javascript
js模式化窗口问题![window.dialogArguments]
Oct 30 #Javascript
Chrome不支持showModalDialog模态对话框和无法返回returnValue问题的解决方法
Oct 30 #Javascript
You might like
php adodb连接mssql解决乱码问题
2009/06/12 PHP
php批量更改数据库表前缀实现方法
2013/10/26 PHP
[原创]php获取数组中键值最大数组项的索引值
2015/03/17 PHP
Yii框架数据库查询、增加、删除操作示例
2019/10/14 PHP
正则表达式判断是否存在中文和全角字符和判断包含中文字符串长度
2008/09/27 Javascript
JS 非图片动态loading效果实现代码
2010/04/09 Javascript
jquery ajax 同步异步的执行示例代码
2010/06/23 Javascript
js中window.open()的所有参数详细解析
2014/01/09 Javascript
提取jquery的ready()方法单独使用示例
2014/03/25 Javascript
JavaScript中自定义事件用法分析
2014/12/23 Javascript
自定义函数实现IE7与IE8不兼容js中trim函数的问题
2015/02/03 Javascript
JavaScript基于自定义函数判断变量类型的实现方法
2016/11/23 Javascript
通过sails和阿里大于实现短信验证
2017/01/04 Javascript
jQuery实现鼠标经过显示动画边框特效
2017/03/24 jQuery
angular2中router路由跳转navigate的使用与刷新页面问题详解
2017/05/07 Javascript
详解tween.js的使用教程
2017/09/14 Javascript
vue-video-player 通过自定义按钮组件实现全屏切换效果【推荐】
2018/08/29 Javascript
微信小程序如何实现在线客服功能
2019/10/16 Javascript
jQuery实时统计输入框字数及限制
2020/06/24 jQuery
[54:30]Liquid vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
python和shell变量互相传递的几种方法
2013/11/20 Python
python实现在控制台输入密码不显示的方法
2015/07/02 Python
Python中常见的数据类型小结
2015/08/29 Python
Python 正则表达式入门(初级篇)
2016/12/07 Python
Python从数据库读取大量数据批量写入文件的方法
2018/12/10 Python
jupyter notebook 的工作空间设置操作
2020/04/20 Python
python+appium+yaml移动端自动化测试框架实现详解
2020/11/24 Python
计算机应用与科学个人的自我评价
2013/11/15 职场文书
九年级体育教学反思
2014/01/23 职场文书
仓管岗位职责范本
2014/02/08 职场文书
艺人经纪人岗位职责
2014/04/15 职场文书
竞选班长的演讲稿
2014/04/24 职场文书
体育教师个人总结
2015/02/09 职场文书
英文版辞职信
2015/02/28 职场文书
《金色的草地》教学反思
2016/02/17 职场文书
spring项目中切面及AOP的使用方法
2021/06/26 Java/Android