English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Baseado em SpringMVC+Bootstrap+Implementação de paginação do servidor e busca fuzzy com DataTables

前言

Baseado em SpringMVC+Bootstrap+DataTables实现数据表格服务端分页、模糊查询(非DataTables Search),页面异步刷新。

说明:sp:message标签是使用了SpringMVC国际化

效果

DataTable表格

关键字查询

自定义关键字查询,非DataTable Search

代码

HTML代码

查询条件代码

<!-- 查询、添加、批量删除、导出、刷新 -->
<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-input de controle-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 da tabela de dados

<table id="dataTable" class="table table-table com listras-table com bordas-table com 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

Inicialização DataTables, solicitação de dados do servidor, encapsulamento de condições de consulta

<!-- script da página -->
<script>
$(function () {
//Endereço de submissão assíncrona para adição e modificação
var url = "";
var tables = $("#dataTable").dataTable({
serverSide: true,//Páginação, recuperação de dados etc., todas são movidas para o servidor
processing: true,//Ao carregar dados, exibir 'Carregando'?
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"}
],
//botões de operação
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\ }); //Atualizar $("#btn-re").on("click", function () { tables.fnDraw(false);//atualizar mantendo o estado da paginação }); //selecionar todos os checkboxes $("#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'); } }); //editar $("#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/atualizar"; $("#editModal").modal("show"); }); $("#btn-submit").on("click", function(){ $.ajax({ cache: false, type: "POST", url: url, data:$("#editForm").serialize(), async: false, error: function(request) { showFail("Erro de Conexão do Servidor..."); }, success: function(data) { if(data.status == 1{ $("#editModal").modal("hide"); showSuccess("<sp:message code='sys.oper.success'/"> tables.fnDraw(); }else{ /"> } } }); }); //excluir $("#dataTable tbody").on("click", "#delRow", function () { var data = tables.api().row($(this).parents("tr")).data(); if(confirm("Confirma a exclusão dessa informação?"63;")){ $.ajax({ 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{ /"> } }, error:function(err){ showFail("Erro de Conexão do Servidor..."); } }); } }); }); </script>

Código Java

Método de controle do Controller, responsável por consultar os dados da página da tabela e retornar o formato JSON formatado.

@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;
}

Retorna formato de dados JSON

{
"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, definido de acordo com o formato necessário pelo DataTables

public class DatatablesView<T> { 
private List<T> data; //data corresponde a "dataSrc" carregada pelo datatales 
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;
} 
}

Classe de serviço de processamento, principalmente com base nas condições de consulta para contar o número de registros, consultar a lista de dados da página atual

public DatatablesView<GoodsType> getGoodsTypeByCondition(QueryCondition query) {
DatatablesView<GoodsType> dataView = new DatatablesView<GoodsType>();
//Construção de condições de pesquisa
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;
}

A camada Dao é a operação básica de consulta de banco de dados. Aqui é omitido...

Fim

Aqui, a condição de pesquisa usa apenas busca fuzzy por palavras-chave. De acordo com as necessidades do negócio, podem ser adicionadas outras condições de pesquisa dinamicamente. O backend precisa fazer o tratamento correspondente.

O que foi mencionado acima é apresentado pelo editor com base em SpringMVC+Bootstrap+DataTables implementa paginação de servidor de tabelas e busca fuzzy, esperando ajudar a todos. Se tiverem alguma dúvida, por favor, deixem um comentário, o editor responderá a todos a tempo.

Declaração: O conteúdo deste artigo é extraído da internet, pertencente ao autor original. O conteúdo é contribuído e carregado voluntariamente pelos usuários da internet. Este site não possui direitos autorais, não realiza edição humana e não assume responsabilidade legal. Se você encontrar conteúdo suspeito de violação de direitos autorais, por favor, envie um e-mail para: notice#oldtoolbag.com (ao enviar e-mail, substitua # por @) para denunciar, e forneça provas relacionadas. Em caso de verificação, o site deletará imediatamente o conteúdo suspeito de violação de direitos autorais.

Você também pode gostar