基于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 相关文章推荐
JavaScript中yield实用简洁实现方式
Jun 12 Javascript
Javascript创建Silverlight Plugin以及自定义nonSilverlight和lowSilverlight样式
Jun 28 Javascript
jQuery Ajax 实例全解析
Apr 20 Javascript
日历查询的算法 如何计算某一天是星期几
Dec 12 Javascript
jQuery ajax(复习)—Baidu ajax request分离版
Jan 24 Javascript
JS操作iframe里的dom(实例讲解)
Jan 29 Javascript
浅谈JavaScript function函数种类
Dec 29 Javascript
Vue.js实现拖放效果的实例
Sep 30 Javascript
bootstrap select2插件用ajax来获取和显示数据的实例
Aug 09 Javascript
angularJS1 url中携带参数的获取方法
Oct 09 Javascript
在vue项目中使用sass语法问题
Jul 18 Javascript
vue中keep-alive、activated的探讨和使用详解
Jul 26 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中3des加密代码(完全与.net中的兼容)
2012/08/02 PHP
如何利用php array_multisort函数 对数据库结果进行复杂排序
2013/06/08 PHP
php解析mht文件转换成html的实例
2017/03/13 PHP
thinkphp5.1框架模板布局与模板继承用法分析
2019/07/19 PHP
基于jQuery的输入框无值自动显示指定数据的实现代码
2011/01/24 Javascript
背景图跟随鼠标移动的Mootools插件实现代码
2011/12/12 Javascript
jQuery jcrop插件截图使用方法
2013/11/20 Javascript
清除div下面的所有标签的方法
2014/02/17 Javascript
jquerymobile局部渲染的各种刷新方法小结
2014/03/05 Javascript
JS和函数式语言的三特性
2014/03/05 Javascript
javascript中利用柯里化函数实现bind方法
2016/04/29 Javascript
JS获取中文拼音首字母并通过拼音首字母快速查找页面内对应中文内容的方法【附demo源码】
2016/08/19 Javascript
jQuery异步提交表单的两种方式
2016/09/13 Javascript
bootstrap fileinput实现文件上传功能
2017/08/23 Javascript
iview给radio按钮组件加点击事件的实例
2017/09/30 Javascript
用js编写留言板
2020/03/17 Javascript
jquery实现抽奖功能
2020/10/22 jQuery
JavaScript 防盗链的原理以及破解方法
2020/12/29 Javascript
python3使用PyMysql连接mysql数据库实例
2017/02/07 Python
解决安装pycharm后不能执行python脚本的问题
2019/01/19 Python
python 操作mysql数据中fetchone()和fetchall()方式
2020/05/15 Python
python爬虫使用requests发送post请求示例详解
2020/08/05 Python
详解Python 中的 defaultdict 数据类型
2021/02/22 Python
html5教你做炫酷的碎片式图片切换 (canvas)
2017/07/28 HTML / CSS
美国儿童服装、家具和玩具精品店:Maisonette
2019/11/24 全球购物
市场营销战略计划书
2014/05/06 职场文书
活动总结报告怎么写
2014/07/03 职场文书
事业单位个人总结
2015/02/12 职场文书
公司财务部岗位职责
2015/04/14 职场文书
一般纳税人申请报告
2015/05/18 职场文书
孝女彩金观后感
2015/06/10 职场文书
初中信息技术教学反思
2016/02/16 职场文书
Nginx快速入门教程
2021/03/31 Servers
golang http使用踩过的坑与填坑指南
2021/04/27 Golang
mybatis调用sqlserver存储过程返回结果集的方法
2021/05/08 SQL Server
html输入两个数实现加减乘除功能
2021/07/01 HTML / CSS