Basado en SpringMVC+Bootstrap+Implementación de paginación de la tabla en el servidor y búsqueda borrosa con DataTables

Introducción

Basado en SpringMVC+Bootstrap+DataTables realiza la paginación del servidor de la tabla de datos, la búsqueda borrosa (no DataTable Search), actualización asincrónica de la página.

Nota: El etiqueta sp:message utiliza la internacionalización de SpringMVC

Efecto

Tabla de DataTables

Búsqueda de palabras clave

Búsqueda de palabras clave personalizada, no DataTable Search

Código

Código HTML

Código de condiciones de búsqueda

<!-- Consultar, agregar, eliminar en lote, exportar, actualizar -->
<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 de entrada-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>

Código de la tabla de datos

<table id="dataTable" class="table table-tabla con rayas-tabla con borde-tabla con efecto hover-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>

Código JS

Inicialización de DataTables, solicitud de datos del lado del servidor, encapsulación de condiciones de búsqueda

<!-- script de página -->
<script>
$(function () {
//Agregar, modificar la dirección de presentación asíncrona
var url = "";
var tables = $("#dataTable").dataTable({
serverSide: true,//Paginación, obtención de datos, etc., se colocan en el lado del servidor
processing: true,//¿Se muestra "Cargando" al cargar los datos?
pageLength: 10, //número de filas de datos cargados por primera vez
ordering: false, //la operación de ordenamiento se realiza en el servidor, por lo que se puede desactivar.
pagingType: "full_numbers",
autoWidth: false,
stateSave: true,//mantener el estado de paginación, y usarlo con comTable.fnDraw(false);
searching: false,//deshabilitar la búsqueda 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();//secuencializar los datos del formulario en un array
formData.forEach(function (e) {
param[e.name] = e.value;
});
return param;//parámetros personalizados a pasar.
},
},
columns: [//corresponde a la secuencia en el thead superior
{"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"}
],
//botones de operación
columnDefs: [
{
targets: 0,
defaultContent: "<input type='checkbox' name='checkList'>"
},
{
targets: -1,
defaultContent: "<div class='btn-group'>"+
""+
""+
"