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

  1. الموقع الحالي
  2. الصفحة الرئيسية
  3. ملاحظات الخبرة
  4. النص

تحقيق تتبع الصفحة الخلفية للجداول باستخدام SpringMVC + Bootstrap + DataTables

المقدمة

تم تنفيذ خدمة تحويل الصفحة للجدول باستخدام SpringMVC + Bootstrap + DataTables، مع الاستعلام المبهم (ليس DataTable 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-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 code

DataTables initialization, server-side data request, query condition encapsulation

/* 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": '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"}
],
//操作按钮
columnDefs: [
{
targets: 0,
defaultContent: "<input type='checkbox' name='checkList'>"
},
{
targets: -1,
defaultContent: "<div class='btn-group'>"+
"<button id='editRow' class='btn btn-primary btn-sm' type='button'><i class='fa fa-edit'></i></button>"+
"<button id='delRow' class='btn btn-primary btn-sm' type='button'><i class='fa fa-trash-o'></i></button>"+
"</div>"
}
],
language: {
lengthMenu: "",
processing: "<sp:message code='sys.load'/>",
paginate: {
previous: "<"
next: ">"
first: "<<"
last: ">>"
},
zeroRecords: "<sp:message code='sys.nodata'/>",
info: "<sp:message code='sys.pages'/>",
infoEmpty: "",
infoFiltered: "",
sSearch: "<sp:message code='sys.keyword'/>: ",
},
//في كل مرة يتم فيها 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='checkList']").prop("checked", $(this).prop("checked"));
//$("#dataTable tbody tr").addClass('selected');
$(this).hasClass('selected')
}
$("input[name='checkList']").prop("checked", false);
$("#dataTable tbody tr").removeClass('selected');
}
});
//تعديل
$("#dataTable tbody").on("click", "#editRow", function () {
مستقل 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({
الذاكرة: false,
نوع: "POST",
المسار: url,
بيانات: $("#editForm").serialize(),
متسلسل: false,
خطأ: function(request) {
showFail("Server Connection Error...\
},
نجاح: function(data) {
إذا (data.status == 1){
$("#editModal").modal("hide");
showSuccess("<sp:message code='sys.oper.success'/>");
tables.fnDraw();
}else{
showFail("<sp:message code='sys.oper.fail'/>");
}
}
});
});
//حذف
$("#dataTable tbody").on("click", "#delRow", function () {
مستقل data = tables.api().row($(this).parents("tr")).data();
إذا (confirm("هل تريد تأكيد حذف هذه المعلومات؟")){
$.ajax({
المسار: "<%=path%>/goodsType/del/+data.typeIdStr",
نوع: 'delete',
نوع البيانات: "json",
الذاكرة: "false",
نجاح: function(data){
إذا (data.status == 1){
showSuccess("<sp:message code='sys.oper.success'/>");
tables.api().row().remove().draw(false);}}
}else{
showFail("<sp:message code='sys.oper.fail'/>");
}
},
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
}

DatatablesView، يعتمد على التركيب الذي يتطلبه DataTables

public class DatatablesView<T> { 
private List<T> data; //data يعادله مع 'dataSrc' المحدد من قبل 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;
} 
}

Service معالجة الأعمال، يعتمد بشكل رئيسي على شرط البحث لتعداد عدد السجلات، استعلام قائمة البيانات في الصفحة الحالية

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

Daو هي عمليات الاستعلام الأساسية للقاعدة البيانات، هنا يتم تجاهلها...

النهاية

في هذا المكان، تم استخدام البحث المضارب لكلمة المفتاح فقط، وفقًا للاحتياجات التجارية، يمكن إضافة شروط البحث الأخرى بشكل ديناميكي، ويجب أن يتم التعامل مع ذلك في الخلفية.

ما تم ذكره أعلاه هو ما قدمه المحرر لكم بناءً على SpringMVC + Bootstrap + DataTables لتحقيق تتبع الصفحات على الجانب الخلفي للجداول و البحث المضارب، نأمل أن يكون ذلك مفيدًا لكم، إذا كان لديكم أي استفسارات، فيرجى ترك تعليق، وسأقوم بالرد على رسائلكم في الوقت المناسب!

البيان: محتوى هذا المقال تم جمعه من الإنترنت، ملكية الحقوق للمراجع، تم جمع المحتوى من قبل المستخدمين على الإنترنت وتم تحميله بشكل تلقائي، هذا الموقع لا يمتلك الحقوق، ولم يتم تعديل المحتوى بشكل يدوي، ولا يتحمل أي مسؤولية قانونية. إذا وجدت محتوى يشتبه في انتهاك حقوق النسخ، فمرحبًا بمراسلتنا عبر البريد الإلكتروني إلى: notice#oldtoolbag.com (عند إرسال البريد الإلكتروني، يرجى استبدال '#' بـ '@') لإبلاغنا، وتقديم الأدلة ذات الصلة، وإذا تم التحقق من ذلك، فإن هذا الموقع سيقوم بإزالة المحتوى المشبوه في انتهاك حقوق النسخ.

تعليمية الأساس
أنت قد تحب