前言
基于SpringMVC+Bootstrap+DataTables实现数据表格服务端分页、模糊查询（非DataTables Search），页面异步刷新。
说明：sp:message标签是使用了SpringMVC国际化
效果
DataTable表格
关键字查询
自定义关键字查询，非DataTable Search
代码
HTML代码
查询条件代码
<> <div> <div> <div> <button type="button" id="btn-add"> <i></i> <sp:message code="sys.add"/> </button> <button type="button" id="btn-delAll"> <i></i> <sp:message code="sys.delAll"/> </button> <button type="button" id="btn-export"> <i></i> <sp:message code="sys.export"/> </button> <button type="button" id="btn-re"> <i></i> <sp:message code="sys.refresh"/> </button> </div> </div> <div> <form id="queryForm" action="<%=path%>/goodsType/list" method="post"> <div> <input type="text" id="keyword" name="keyword" placeholder="<sp:message code="sys.keyword"/>"> </div> <button type="button" id="btn-query"> <i></i> <sp:message code="sys.query"/> </button> </form> </div> </div>
数据table代码
<table id="dataTable" align="center"> <thead> <tr> <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初始化、服务端数据请求、查询条件封装
<> <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>"+ "<button id='editRow' type='button'><i></i></button>"+ "<button id='delRow' type='button'><i></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实现表格服务端分页、模糊查询】相关文章：
★ Javascript中prototype属性实现给内置对象添加新的方法
★ 颜色渐变效果