基于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 相关文章推荐
document.getElementById为空或不是对象的解决方法
Jan 24 Javascript
jquery easyui的tabs使用时的问题
Mar 23 Javascript
firefox火狐浏览器与与ie兼容的2个问题总结
Jul 20 Javascript
LABjs、RequireJS、SeaJS的区别
Mar 04 Javascript
new Date()问题在ie8下面的处理方法
Jul 31 Javascript
Jquery EasyUI $.Parser
Jun 02 jQuery
jQuery取得元素标签名称小结(附代码)
Aug 16 jQuery
基于Vue制作组织架构树组件
Dec 06 Javascript
angularJS开发注意事项
May 26 Javascript
angularjs1.5 组件内用函数向外传值的实例
Sep 30 Javascript
代码实例ajax实现点击加载更多数据图片
Oct 12 Javascript
手写实现JS中的new
Nov 07 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 程式大小
2006/12/06 PHP
URL Rewrite的设置方法
2007/01/02 PHP
php 将bmp图片转为jpg等其他任意格式的图片
2009/06/29 PHP
PHP 日,周,月点击排行统计
2012/01/11 PHP
Nginx服务器上安装并配置PHPMyAdmin的教程
2015/08/18 PHP
PHP防止刷新重复提交页面的示例代码
2015/11/11 PHP
深入解析PHP的Yii框架中的event事件机制
2016/03/17 PHP
PHP实现redis限制单ip、单用户的访问次数功能示例
2018/06/16 PHP
PHP封装类似thinkphp连贯操作数据库Db类与简单应用示例
2019/05/08 PHP
php写入mysql中文乱码的实例解决方法
2019/09/17 PHP
gearman中任务的优先级和返回状态实例分析
2020/02/27 PHP
Jquery实现图片放大镜效果的思路及代码(自写)
2013/10/18 Javascript
js清除input中type等于file的值域(示例代码)
2013/12/24 Javascript
鼠标悬浮停留三秒后自动显示大图js代码
2014/09/09 Javascript
原生JavaScript实现异步多文件上传
2015/12/02 Javascript
jQuery打字效果实现方法(附demo源码下载)
2015/12/18 Javascript
jQuery插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
2017/03/23 jQuery
angularJs中$scope数据序列化的实例
2018/09/30 Javascript
JS面向对象之单选框实现
2020/01/17 Javascript
javascript实现前端成语点击验证
2020/06/24 Javascript
微信小程序学习之自定义滚动弹窗
2020/12/20 Javascript
python解析json实例方法
2013/11/19 Python
Python中的Classes和Metaclasses详解
2015/04/02 Python
Python中的Matplotlib模块入门教程
2015/04/15 Python
Python中json格式数据的编码与解码方法详解
2016/07/01 Python
python 识别图片中的文字信息方法
2018/05/10 Python
Python面向对象类编写细节分析【类,方法,继承,超类,接口等】
2019/01/05 Python
Python常用爬虫代码总结方便查询
2019/02/25 Python
Pycharm连接远程服务器并实现远程调试的实现
2019/08/02 Python
基于pytorch padding=SAME的解决方式
2020/02/18 Python
PyCharm中如何直接使用Anaconda已安装的库
2020/05/28 Python
mysql有关权限的表都有哪几个
2015/04/22 面试题
毕业生物理教师求职信
2013/10/17 职场文书
技术合作协议书范本
2014/04/18 职场文书
工程催款通知书
2015/04/17 职场文书
React 并发功能体验(前端的并发模式)
2021/07/01 Javascript