Basierend auf SpringMVC+Bootstrap+DataTables für Serverseitige Paginierung und unscharfe Abfrage von Tabellen implementieren

Einleitung

Basierend auf SpringMVC+Bootstrap+DataTables implementiert die Serverseitige Paginierung und vage Suche (nicht DataTable Search), die Seite wird asynchron aktualisiert.

Anweisung: Der sp:message-Tag verwendet SpringMVC-Internationalisierung

Effekt

DataTable-Tabelle

Schlüsselwortabfrage

Benutzerdefinierte Schlüsselwortabfrage, nicht DataTable Search

Code

HTML-Code

Abfragebedingungen-Code

<!-- Abfrage, Hinzufügen, Massenlöschen, Exportieren, Aktualisieren -->
<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/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>

Code der Daten-Tabelle

<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, Datenanfrage vom Server, Abfragebedingungen verpacken

<!-- page script -->
<script>
$(function () {
//Adresse für asynchrone Übermittlung von Hinzufügen und Bearbeiten
var url = "";
var tables = $("#dataTable").dataTable({
serverSide: true,//Seitenverteilung, Datenabfrage usw. werden auf den Server gelegt
processing: true,//Während des Ladens der Daten wird angezeigt, ob "Laden..." angezeigt wird
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', 

return data.substr(0,19) 
}
},
{"data": 'updateTime', defaultContent: "", 

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'>"+
""+
""+
"

" } ], language: { lengthMenu: "", processing: "", paginate: { previous: "<", next: ">", first: "<<", last: ">>" }, zeroRecords: "", info: "", infoEmpty: "", infoFiltered: "", sSearch: "：", }, //在每次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\ }); //刷新 $("#btn-re").on("click", function () { tables.fnDraw(false);//Aktualisieren, um den Status der Paginierung beizubehalten }); //Checkbox auswählen $("#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'); } }); //Bearbeiten $("#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); url = "<%=path%>/goodsType/update"; $("#editModal").modal("show"); }); $("#btn-submit").on("click", function(){ cache: false, type: "POST", url: url, data:$("#editForm").serialize(), async: false, error: function(request) { showFail("Serververbindungsfehler..."); }, 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'/">); } } }); }); //Löschen $("#dataTable tbody").on("click", "#delRow", function () { var data = tables.api().row($(this).parents("tr")).data();}} if(confirm("Sind Sie sicher, dass Sie diese Information löschen möchten?"63;")){ 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("Serververbindungsfehler..."); } }); } }); }); </script>

Java-Code

Controller-Verarbeitungsmethode, verantwortlich für die Abfrage der Tabellen Daten auf der Seite, formatiert Json und gibt es zurück.

@RequestMapping(value="/goodsType/getData", produces = "text/plain",/json;charset=UTF-8-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;
}

Rückgabe des Json-Datenformats

{
"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>();
//Erstellen Sie die Suchbedingungen
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;
}

Die Dao-Schicht umfasst grundlegende Datenbankabfragen. Dies wird hier weggelassen...

Schluss

Hier wurde nur die unscharfe Suchabfrage nach Schlüsselwörtern verwendet. Nach Bedarf können andere Suchkriterien dynamisch hinzugefügt werden. Die Backend-Verarbeitung muss entsprechend angepasst werden.

Das Folgende ist eine von mir vorgestellte Anleitung basierend auf SpringMVC+Bootstrap+DataTables implementiert die Serverseitige Paginierung und die unscharfe Suche für Tabellen. Hoffentlich hilft dies Ihnen weiter. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht, und ich werde umgehend antworten!

Erklärung: Der Inhalt dieses Artikels wurde aus dem Internet übernommen und gehört dem Urheber. Der Inhalt wurde von Internetnutzern freiwillig beigesteuert und hochgeladen. Diese Website besitzt keine Eigentumsrechte und hat den Inhalt nicht manuell bearbeitet. Sie übernimmt auch keine Haftung für rechtliche Fragen. Wenn Sie urheberrechtlich anstößige Inhalte finden, sind Sie herzlich eingeladen, eine E-Mail an notice#w zu senden.3codebox.com (Bitte ersetzen Sie # durch @ beim Senden von E-Mails, um eine Beschwerde zu melden, und fügen Sie relevante Beweise bei. Sobald die Beschwerde überprüft wurde, wird diese Website die beanstandeten urheberrechtlichen Inhalte sofort löschen.)

Grund教程

Möchten Sie mehr sehen