Heim Java javaLernprogramm Implementierung von tabellenserverseitigem Paging und Fuzzy-Abfrage basierend auf SpringMVC+Bootstrap+DataTables

Implementierung von tabellenserverseitigem Paging und Fuzzy-Abfrage basierend auf SpringMVC+Bootstrap+DataTables

Jan 07, 2017 am 10:23 AM

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

Implementierung von tabellenserverseitigem Paging und Fuzzy-Abfrage basierend auf SpringMVC+Bootstrap+DataTables

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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": &#39;typeNameCn&#39; },
{"data": &#39;typeNameEn&#39; },
{"data": &#39;createTime&#39;, 
"render":function(data,type,full,callback) {
return data.substr(0,19) 
}
},
{"data": &#39;updateTime&#39;, 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=&#39;checkbox&#39; name=&#39;checkList&#39;>"
},
{
targets: -1,
defaultContent: "<div class=&#39;btn-group&#39;>"+
"<button id=&#39;editRow&#39; class=&#39;btn btn-primary btn-sm&#39; type=&#39;button&#39;><i class=&#39;fa fa-edit&#39;></i></button>"+
"<button id=&#39;delRow&#39; class=&#39;btn btn-primary btn-sm&#39; type=&#39;button&#39;><i class=&#39;fa fa-trash-o&#39;></i></button>"+
"</div>"
}
],
language: {
lengthMenu: "",
processing: "<sp:message code=&#39;sys.load&#39;/>",
paginate: {
previous: "<",
next: ">",
first: "<<",
last: ">>"
},
zeroRecords: "<sp:message code=&#39;sys.nodata&#39;/>",
info: "<sp:message code=&#39;sys.pages&#39;/>",
infoEmpty: "",
infoFiltered: "",
sSearch: "<sp:message code=&#39;sys.keyword&#39;/>:",
},
//在每次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=&#39;checkList&#39;]").prop("checked", $(this).prop("checked"));
//$("#dataTable tbody tr").addClass(&#39;selected&#39;);
$(this).hasClass(&#39;selected&#39;)
} else {
$("input[name=&#39;checkList&#39;]").prop("checked", false);
$("#dataTable tbody tr").removeClass(&#39;selected&#39;);
}
});
//修改
$("#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=&#39;sys.oper.success&#39;/>");
tables.fnDraw();
}else{
showFail("<sp:message code=&#39;sys.oper.fail&#39;/>");
}
}
});
});
//删除
$("#dataTable tbody").on("click", "#delRow", function () {
var data = tables.api().row($(this).parents("tr")).data();
if(confirm("是否确认删除这条信息?")){
$.ajax({
url:&#39;<%=path%>/goodsType/del/&#39;+data.typeIdStr,
type:&#39;delete&#39;,
dataType: "json",
cache: "false",
success:function(data){
if(data.status == 1){
showSuccess("<sp:message code=&#39;sys.oper.success&#39;/>");
tables.api().row().remove().draw(false);
}else{
showFail("<sp:message code=&#39;sys.oper.fail&#39;/>");
}
},
error:function(err){
showFail("Server Connection Error...");
}
});
}
});
});
</script>
Nach dem Login kopieren

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;
}
Nach dem Login kopieren

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
}
Nach dem Login kopieren

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;
} 
}
Nach dem Login kopieren

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;
}
Nach dem Login kopieren

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!


Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Repo: Wie man Teamkollegen wiederbelebt
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Abenteuer: Wie man riesige Samen bekommt
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Top 4 JavaScript -Frameworks in 2025: React, Angular, Vue, Svelte Top 4 JavaScript -Frameworks in 2025: React, Angular, Vue, Svelte Mar 07, 2025 pm 06:09 PM

Dieser Artikel analysiert 2025 die vier besten JavaScript -Frameworks (React, Angular, Vue, Svelte) und verglichen ihre Leistung, Skalierbarkeit und Zukunftsaussichten. Während alle aufgrund starker Gemeinschaften und Ökosysteme dominant bleiben, sind ihr relatives Popul

Spring Boot Snakeyaml 2.0 CVE-2022-1471 Problem behoben Spring Boot Snakeyaml 2.0 CVE-2022-1471 Problem behoben Mar 07, 2025 pm 05:52 PM

Dieser Artikel befasst sich mit der Verwundbarkeit von CVE-2022-1471 in Snakeyaml, einem kritischen Fehler, der die Ausführung von Remote-Code ermöglicht. Es wird beschrieben

Wie funktioniert der Klassenladungsmechanismus von Java, einschließlich verschiedener Klassenloader und deren Delegationsmodelle? Wie funktioniert der Klassenladungsmechanismus von Java, einschließlich verschiedener Klassenloader und deren Delegationsmodelle? Mar 17, 2025 pm 05:35 PM

Mit der Klassenbelastung von Java wird das Laden, Verknüpfen und Initialisieren von Klassen mithilfe eines hierarchischen Systems mit Bootstrap-, Erweiterungs- und Anwendungsklassenloadern umfasst. Das übergeordnete Delegationsmodell stellt sicher

Wie implementiere ich mehrstufige Caching in Java-Anwendungen mit Bibliotheken wie Koffein oder Guava-Cache? Wie implementiere ich mehrstufige Caching in Java-Anwendungen mit Bibliotheken wie Koffein oder Guava-Cache? Mar 17, 2025 pm 05:44 PM

In dem Artikel wird in der Implementierung von mehrstufigem Caching in Java mithilfe von Koffein- und Guava-Cache zur Verbesserung der Anwendungsleistung erläutert. Es deckt die Einrichtungs-, Integrations- und Leistungsvorteile sowie die Bestrafung des Konfigurations- und Räumungsrichtlinienmanagements ab

Node.js 20: wichtige Leistungssteigerung und neue Funktionen Node.js 20: wichtige Leistungssteigerung und neue Funktionen Mar 07, 2025 pm 06:12 PM

Node.js 20 verbessert die Leistung durch V8 -Motorverbesserungen erheblich, insbesondere durch schnellere Müllsammlung und E/A. Zu den neuen Funktionen gehören eine bessere Support von WebAssembly und raffinierte Debugging -Tools, die Produktivität der Entwickler und die Anwendungsgeschwindigkeit.

ICEBERG: Die Zukunft von Data Lake Tabellen ICEBERG: Die Zukunft von Data Lake Tabellen Mar 07, 2025 pm 06:31 PM

Iceberg, ein offenes Tabellenformat für große analytische Datensätze, verbessert die Leistung und Skalierbarkeit von Data Lake. Es befasst sich mit Einschränkungen von Parquet/ORC durch internes Metadatenmanagement und ermöglicht eine effiziente Schemaentwicklung, Zeitreisen, gleichzeitiger W

So teilen Sie Daten zwischen Schritten in der Gurke So teilen Sie Daten zwischen Schritten in der Gurke Mar 07, 2025 pm 05:55 PM

In diesem Artikel werden Methoden zum Austausch von Daten zwischen Gurkenschritten und dem Vergleich des Szenario -Kontextes, globalen Variablen, Argumentenübergabe und Datenstrukturen untersucht. Es betont Best Practices für Wartbarkeit, einschließlich präziser Kontextgebrauch, beschreibend

Wie kann ich funktionale Programmierungstechniken in Java implementieren? Wie kann ich funktionale Programmierungstechniken in Java implementieren? Mar 11, 2025 pm 05:51 PM

In diesem Artikel wird die Integration der funktionalen Programmierung in Java unter Verwendung von Lambda -Ausdrücken, Streams -API, Methodenreferenzen und optional untersucht. Es zeigt Vorteile wie eine verbesserte Lesbarkeit der Code und die Wartbarkeit durch SUKTIVE UND VERUSNAHMETALITÄT

See all articles