基于SpringMVC+Bootstrap+DataTables實(shí)現(xiàn)表格服務(wù)端分頁(yè)、模糊查詢
前言
基于SpringMVC+Bootstrap+DataTables實(shí)現(xiàn)數(shù)據(jù)表格服務(wù)端分頁(yè)、模糊查詢(非DataTables Search),頁(yè)面異步刷新。
說(shuō)明:sp:message標(biāo)簽是使用了SpringMVC國(guó)際化
效果
DataTable表格
關(guān)鍵字查詢
自定義關(guān)鍵字查詢,非DataTable Search
代碼
HTML代碼
查詢條件代碼
<!-- 查詢、添加、批量刪除、導(dǎo)出、刷新 --> <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>
數(shù)據(jù)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初始化、服務(wù)端數(shù)據(jù)請(qǐng)求、查詢條件封裝
<!-- page script --> <script> $(function () { //添加、修改異步提交地址 var url = ""; var tables = $("#dataTable").dataTable({ serverSide: true,//分頁(yè),取數(shù)據(jù)等等的都放到服務(wù)端去 processing: true,//載入數(shù)據(jù)的時(shí)候是否顯示“載入中” pageLength: 10, //首次加載的數(shù)據(jù)條數(shù) ordering: false, //排序操作在服務(wù)端進(jìn)行,所以可以關(guān)了。 pagingType: "full_numbers", autoWidth: false, stateSave: true,//保持翻頁(yè)狀態(tài),和comTable.fnDraw(false);結(jié)合使用 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里面的數(shù)據(jù)序列化成數(shù)組 formData.forEach(function (e) { param[e.name] = e.value; }); return param;//自定義需要傳遞的參數(shù)。 }, }, columns: [//對(duì)應(yīng)上面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完后回調(diào)函數(shù) fnDrawCallback: function(){ var api = this.api(); //獲取到本頁(yè)開(kāi)始的條數(shù) 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();//查詢后不需要保持分頁(yè)狀態(tài),回首頁(yè) }); //添加 $("#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 () { }); //導(dǎo)出 $("#btn-export").on("click", function () { }); //刷新 $("#btn-re").on("click", function () { tables.fnDraw(false);//刷新保持分頁(yè)狀態(tài) }); //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("是否確認(rèn)刪除這條信息?")){ $.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處理方法,負(fù)責(zé)查詢頁(yè)面需要表格數(shù)據(jù),格式化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數(shù)據(jù)格式
{ "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,根據(jù)DataTables需要格式定義
public class DatatablesView<T> { private List<T> data; //data 與datatales 加載的“dataSrc"對(duì)應(yīng) 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業(yè)務(wù)處理類,主要根據(jù)查詢條件統(tǒng)計(jì)記錄數(shù)量,查詢當(dāng)前頁(yè)數(shù)據(jù)列表
public DatatablesView<GoodsType> getGoodsTypeByCondition(QueryCondition query) { DatatablesView<GoodsType> dataView = new DatatablesView<GoodsType>(); //構(gòu)建查詢條件 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層就是基本的數(shù)據(jù)庫(kù)查詢操作,這里省略…
結(jié)尾
查詢條件這里只使用了關(guān)鍵字模糊查詢,根據(jù)業(yè)務(wù)需要,可以動(dòng)態(tài)加入其他查詢條件,后臺(tái)需要做相應(yīng)處理。
以上所述是小編給大家介紹的基于SpringMVC+Bootstrap+DataTables實(shí)現(xiàn)表格服務(wù)端分頁(yè)、模糊查詢,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)歡迎給我留言,小編會(huì)及時(shí)回復(fù)大家的!
相關(guān)文章
echarts地圖設(shè)置背景圖片及海岸線實(shí)例代碼
公司的業(yè)務(wù)涉及到統(tǒng)計(jì)圖的有很多,最近一直echarts里面踩各種坑,下面這篇文章主要給大家介紹了關(guān)于echarts地圖設(shè)置背景圖片及海岸線的相關(guān)資料,需要的朋友可以參考下2022-12-12如何使用less實(shí)現(xiàn)隨機(jī)下雪動(dòng)畫(huà)詳解
這篇文章主要給大家介紹了關(guān)于如何使用less實(shí)現(xiàn)隨機(jī)下雪動(dòng)畫(huà)的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-01-01JS實(shí)現(xiàn)判斷滾動(dòng)條滾到頁(yè)面底部并執(zhí)行事件的方法
這篇文章主要介紹了JS實(shí)現(xiàn)判斷滾動(dòng)條滾到頁(yè)面底部并執(zhí)行事件的方法,本文先是分析了需求以及必備知識(shí),然后給出實(shí)現(xiàn)代碼,需要的朋友可以參考下2014-12-12jquery 實(shí)現(xiàn)上下滾動(dòng)效果示例代碼
上下滾動(dòng)的效果,不用說(shuō),大家都有看到過(guò),本文為大家介紹下使用jquery實(shí)現(xiàn)上下滾動(dòng)效果,感興趣的朋友可以參考下,希望對(duì)大家有所幫助2013-08-08JavaScript之underscore_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
JavaScript是函數(shù)式編程語(yǔ)言,支持高階函數(shù)和閉包。函數(shù)式編程非常強(qiáng)大,可以寫(xiě)出非常簡(jiǎn)潔的代碼。下面通過(guò)實(shí)例講解JavaScript之underscore的相關(guān)知識(shí),一起看看吧2017-07-07帶參數(shù)的function 的自運(yùn)行效果代碼
這篇文章介紹了帶參數(shù)的function 的自運(yùn)行效果,通過(guò)實(shí)例對(duì)比展示了帶參數(shù)與不帶參數(shù)function自運(yùn)行效果,需要的朋友可以參考一下2007-12-12動(dòng)態(tài)的改變IFrame的高度實(shí)現(xiàn)IFrame自動(dòng)伸展適應(yīng)高度
動(dòng)態(tài)的改變IFrame的高度,實(shí)現(xiàn)IFrame自動(dòng)伸展,父頁(yè)面也自動(dòng)神縮原理: 在IFrame子頁(yè)面一加載的時(shí)候,調(diào)用父IFrame對(duì)象,改變其高度2012-12-12基于JavaScript創(chuàng)建動(dòng)態(tài)Dom
這篇文章主要介紹了基于JavaScript創(chuàng)建動(dòng)態(tài)Dom的相關(guān)資料,需要的朋友可以參考下2015-12-12