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

<!-- 查询、添加、批量删除、导出、刷新 --><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 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>

<!-- 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>

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

{"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}

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;} }

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;}