


Implementierung von tabellenserverseitigem Paging und Fuzzy-Abfrage basierend auf SpringMVC+Bootstrap+DataTables
Vorwort
Basierend auf SpringMVC+Bootstrap+DataTables werden serverseitiges Paging der Datentabelle, Fuzzy-Abfrage (Nicht-DataTables-Suche) und Seitenaktualisierung asynchron implementiert.
Hinweis: Das sp:message-Tag verwendet die SpringMVC-Internationalisierung
Effekt
DataTable-Tabelle
Schlüsselwortabfrage
Benutzerdefinierte Schlüsselwortabfrage, nicht -DataTable Search
Code
HTML-Code
Abfragebedingungscode
<!-- 查询、添加、批量删除、导出、刷新 --> <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>
Datentabellencode
<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-Code
DataTables-Initialisierung, Serverdatenanforderung, Abfragebedingungskapselung
<!-- 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-Code
Controller-Verarbeitungsmethode, verantwortlich für die Abfrage der Seite, die tabellarische Daten erfordert, und gibt diese nach der Json-Formatierung zurück.
@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-Datenformat zurückgeben
{ "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, definiert gemäß dem von DataTables geforderten Format
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-Geschäftsverarbeitungsklasse, zählt hauptsächlich die Anzahl von Datensätzen basierend auf Abfragebedingungen, Abfrage der aktuellen Seitendatenliste
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-Schicht ist der grundlegende Datenbankabfragevorgang, der hier weggelassen wird...
Ende
Abfrage Bedingungen Hier wird nur das Schlüsselwort Fuzzy-Abfrage verwendet. Je nach Geschäftsanforderungen können andere Abfragebedingungen dynamisch hinzugefügt werden und der Hintergrund muss entsprechend verarbeitet werden.
Das Obige stellt Ihnen der Herausgeber vor, um Tabellenserver-Paging und Fuzzy-Abfrage basierend auf SpringMVC+Bootstrap+DataTables zu implementieren. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht. Der Herausgeber wird allen rechtzeitig antworten!
Weitere Artikel zum serverseitigen Paging von Tabellen und Fuzzy-Abfragen basierend auf SpringMVC+Bootstrap+DataTables finden Sie auf der chinesischen PHP-Website!

Heiße KI -Werkzeuge

Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool
Ausziehbilder kostenlos

Clothoff.io
KI-Kleiderentferner

Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heißer Artikel

Heiße Werkzeuge

Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6
Visuelle Webentwicklungstools

SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

Fehlerbehebung und Lösungen für die Sicherheitssoftware des Unternehmens, die dazu führt, dass einige Anwendungen nicht ordnungsgemäß funktionieren. Viele Unternehmen werden Sicherheitssoftware bereitstellen, um die interne Netzwerksicherheit zu gewährleisten. ...

Bei Verwendung von MyBatis-Plus oder anderen ORM-Frameworks für Datenbankvorgänge müssen häufig Abfragebedingungen basierend auf dem Attributnamen der Entitätsklasse erstellt werden. Wenn Sie jedes Mal manuell ...

Die Verarbeitung von Feldzuordnungen im Systemdocken stößt häufig auf ein schwieriges Problem bei der Durchführung von Systemdocken: So kartieren Sie die Schnittstellenfelder des Systems und ...

Beginnen Sie den Frühling mit der Intellijideaultimate -Version ...

Lösungen zum Umwandeln von Namen in Zahlen zur Implementierung der Sortierung in vielen Anwendungsszenarien müssen Benutzer möglicherweise in Gruppen sortieren, insbesondere in einem ...

Konvertierung von Java-Objekten und -Arrays: Eingehende Diskussion der Risiken und korrekten Methoden zur Konvertierung des Guss-Typs Viele Java-Anfänger werden auf die Umwandlung eines Objekts in ein Array stoßen ...

Wenn Sie TKMybatis für Datenbankabfragen verwenden, ist das Aufbau von Abfragebedingungen ein häufiges Problem. Dieser Artikel wird ...

Wie erkennt die Redis -Caching -Lösung die Anforderungen der Produktranking -Liste? Während des Entwicklungsprozesses müssen wir uns häufig mit den Anforderungen der Ranglisten befassen, z. B. das Anzeigen eines ...
