English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
前言
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'>"+ ""+ ""+ "
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.