Basé sur SpringMVC+Bootstrap+Implementation de la pagination serveur et de la recherche floue pour DataTables

Préambule

Basé sur SpringMVC+Bootstrap+DataTables réalise la pagination côté serveur des tableaux de données, la recherche floue (non DataTable Search), et l'actualisation asynchrone de la page.

Remarque : le tag sp:message utilise l'internationalisation de SpringMVC

effet

tableau DataTable

Recherche de mots-clés

Recherche de mots-clés personnalisée, non DataTable Search

code

code HTML

code des conditions de recherche

<!-- recherche, ajout, suppression en lot, exportation, actualisation -->
<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 du tableau des données

<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>

Code JS

Initialisation DataTables, requête de données serveur, encapsulation des conditions de recherche

<!-- page script -->
<script>
$(function () {
//Ajouter, modifier l'adresse de soumission asynchrone
var url = "";
var tables = $("#dataTable").dataTable({
serverSide: true,//Placer la pagination, la récupération des données, etc. sur le serveur
processing: true,//Lors du chargement des données, affiche-t-on "En cours de chargement" ?
pageLength: 10, //nombre de lignes de données à charger pour la première fois
ordering: false, //les opérations de tri sont effectuées sur le serveur, donc vous pouvez les désactiver.
pagingType: "full_numbers",
autoWidth: false,
stateSave: true,//conserver l'état de pagination, utilisez-le avec comTable.fnDraw(false);
searching: false,//désactiver la recherche de datatables
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();//sérialiser les données du form en tableau
formData.forEach(function (e) {
param[e.name] = e.value;
});
return param;//paramètres personnalisés à transmettre.
},
},
columns: [//correspondant à la séquence dans 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"}
],
//boutons d'opération
columnDefs: [
{
targets: 0,
defaultContent: "<input type='checkbox' name='checkList'>"
},
{
targets: -1,
defaultContent: "<div class='btn"-group'>"+
""+
""+
"