Based on SpringMVC+Bootstrap+DataTables Implementation of Server-side Pagination and Fuzzy Query in Tables

Introduction

Based on SpringMVC+Bootstrap+DataTables implements server-side pagination, fuzzy search (not DataTable Search), and page asynchronous refresh.

Note: The sp:message tag uses SpringMVC internationalization

Effect

DataTable Table

Keyword Query

Custom Keyword Query, Not DataTable Search

Code

HTML Code

Query Condition Code

<!-- Query, Add, Batch Delete, Export, Refresh -->
<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>

Data table code

<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 initialization, server-side data request, query condition encapsulation

<!-- page script -->
<script>
$(function () {
//Add, modify asynchronous submission address
var url = "";
var tables = $("#dataTable").dataTable({
serverSide: true,//Pagination, fetching data, and so on are all placed on the server side
processing: true,//When loading data, whether to display "loading"
pageLength: 10, //number of data items loaded for the first time
ordering: false, //Sorting operations are performed on the server side, so it can be turned off.
pagingType: "full_numbers",
autoWidth: false,
stateSave: true,//Maintain pagination state, used in combination with comTable.fnDraw(false);
searching: false,//disable datatables search
ajax: { 

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();//serialize the data in the form into an array
formData.forEach(function (e) {
param[e.name] = e.value;
});
return param;//custom parameters to be passed.
},
},
columns: [//corresponding to the sequence in the above 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) 
}
return data;
}
}
},
{"data": null,"width":"60px"}
],
//operation button
columnDefs: [
{
targets: 0,
defaultContent: "<input type='checkbox' name='checkList'>"
},
{
targets: -1,
defaultContent: "<div class='btn-group'>"+
""+
""+
"