SpringMVC+Bootstrap+DataTables를 기반으로 테이블 서버 측 페이징 및 퍼지 쿼리 구현

머리말

SpringMVC+Bootstrap+DataTables를 기반으로 데이터 테이블 서버 측 페이징, 퍼지 쿼리(비DataTables 검색), 페이지 새로 고침이 비동기적으로 구현됩니다.

참고: sp:message 태그는 SpringMVC 국제화를 사용합니다

효과

DataTable 테이블

키워드 쿼리

맞춤형 키워드 쿼리, non -데이터 테이블 검색

코드

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

데이터 테이블 코드

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

DataTables 초기화, 서버 데이터 요청, 쿼리 조건 캡슐화

<!-- page script -->
<script>
$(function () {
//添加、修改异步提交地址
var url = "";
var tables = $("#dataTable").dataTable({
serverSide: true,//分页，取数据等等的都放到服务端去
processing: true,//载入数据的时候是否显示“载入中”
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": &#39;typeNameCn&#39; },
{"data": &#39;typeNameEn&#39; },
{"data": &#39;createTime&#39;, 
"render":function(data,type,full,callback) {
return data.substr(0,19) 
}
},
{"data": &#39;updateTime&#39;, defaultContent: "", 
"render":function(data,type,full,callback) {
if(data != null && data != ""){
return data.substr(0,19) 
}else{
return data;
}
}
},
{"data": null,"width":"60px"}
],
//操作按钮
columnDefs: [
{
targets: 0,
defaultContent: "<input type=&#39;checkbox&#39; name=&#39;checkList&#39;>"
},
{
targets: -1,
defaultContent: "<div class=&#39;btn-group&#39;>"+
"<button id=&#39;editRow&#39; class=&#39;btn btn-primary btn-sm&#39; type=&#39;button&#39;><i class=&#39;fa fa-edit&#39;></i></button>"+
"<button id=&#39;delRow&#39; class=&#39;btn btn-primary btn-sm&#39; type=&#39;button&#39;><i class=&#39;fa fa-trash-o&#39;></i></button>"+
"</div>"
}
],
language: {
lengthMenu: "",
processing: "<sp:message code=&#39;sys.load&#39;/>",
paginate: {
previous: "<",
next: ">",
first: "<<",
last: ">>"
},
zeroRecords: "<sp:message code=&#39;sys.nodata&#39;/>",
info: "<sp:message code=&#39;sys.pages&#39;/>",
infoEmpty: "",
infoFiltered: "",
sSearch: "<sp:message code=&#39;sys.keyword&#39;/>：",
},
//在每次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").on("click", function () {
});
//刷新
$("#btn-re").on("click", function () {
tables.fnDraw(false);//刷新保持分页状态
});
//checkbox全选
$("#checkAll").on("click", function () {
if ($(this).prop("checked") === true) {
$("input[name=&#39;checkList&#39;]").prop("checked", $(this).prop("checked"));
//$("#dataTable tbody tr").addClass(&#39;selected&#39;);
$(this).hasClass(&#39;selected&#39;)
} else {
$("input[name=&#39;checkList&#39;]").prop("checked", false);
$("#dataTable tbody tr").removeClass(&#39;selected&#39;);
}
});
//修改
$("#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);
$("input[name=typeNameEn]").val(data.typeNameEn);
url = "<%=path%>/goodsType/update";
$("#editModal").modal("show");
});
$("#btn-submit").on("click", function(){
$.ajax({
cache: false,
type: "POST",
url: url,
data:$("#editForm").serialize(),
async: false,
error: function(request) {
showFail("Server Connection Error...");
},
success: function(data) {
if(data.status == 1){
$("#editModal").modal("hide");
showSuccess("<sp:message code=&#39;sys.oper.success&#39;/>");
tables.fnDraw();
}else{
showFail("<sp:message code=&#39;sys.oper.fail&#39;/>");
}
}
});
});
//删除
$("#dataTable tbody").on("click", "#delRow", function () {
var data = tables.api().row($(this).parents("tr")).data();
if(confirm("是否确认删除这条信息?")){
$.ajax({
url:&#39;<%=path%>/goodsType/del/&#39;+data.typeIdStr,
type:&#39;delete&#39;,
dataType: "json",
cache: "false",
success:function(data){
if(data.status == 1){
showSuccess("<sp:message code=&#39;sys.oper.success&#39;/>");
tables.api().row().remove().draw(false);
}else{
showFail("<sp:message code=&#39;sys.oper.fail&#39;/>");
}
},
error:function(err){
showFail("Server Connection Error...");
}
});
}
});
});
</script>

Java 코드

컨트롤러 처리 방식, 쿼리를 담당 테이블 형식의 데이터가 필요하고 Json을 포맷한 후 반환하는 페이지입니다.

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

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
}

DataTables에서 요구하는 형식에 따라 정의된 DatatablesView

public class DatatablesView<T> { 
private List<T> data; //data 与datatales 加载的“dataSrc"对应 
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;
} 
}

서비스 비즈니스 처리 클래스는 주로 숫자를 계산합니다. 쿼리 조건에 따른 레코드 조회, 현재 페이지 데이터 목록 조회

public DatatablesView<GoodsType> getGoodsTypeByCondition(QueryCondition query) {
DatatablesView<GoodsType> dataView = new DatatablesView<GoodsType>();
//构建查询条件
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;
}

다오 레이어는 기본 데이터베이스 쿼리 연산으로 여기서는 생략...

끝

쿼리 조건 여기서는 퍼지 쿼리 키워드만 사용합니다. 비즈니스 요구에 따라 다른 쿼리 조건을 동적으로 추가할 수 있으며 그에 따라 배경을 처리해야 합니다.

위 내용은 SpringMVC+Bootstrap+DataTables를 기반으로 테이블 서버 페이징과 퍼지 쿼리를 구현하기 위해 편집자가 소개한 내용입니다. 궁금한 사항이 있으면 남겨주세요. 메시지를 보내주세요. 편집자는 제 시간에 모든 사람에게 답변을 드릴 것입니다!

SpringMVC+Bootstrap+DataTables 기반의 테이블 서버사이드 페이징 및 퍼지 쿼리와 관련된 더 많은 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!