前言
基于springmvc+bootstrap+datatables实现数据表格服务端分页、模糊查询（非datatables search），页面异步刷新。
说明：sp:message标签是使用了springmvc国际化
效果
datatable表格
关键字查询
自定义关键字查询，非datatable search
代码
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实现表格服务端分页、模糊查询，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！
更多基于springmvc+bootstrap+datatables实现表格服务端分页、模糊查询。