这个框架前前后后跳进了很多次坑，也算是本人比较愚笨吧做了很长的时间而积累的经验。。。
$(document).ready(function() {
$("#sample").DataTable({
// Internationalisation. For more info refer to http://datatables.net/manual/i18n
language: {
"aria": {
"sortAscending": ": 以升序排列此列",
"sortDescending": ": 以降序排列此列"
},
"emptyTable": "表中数据为空",
"info": "当前显示第 _START_ 至 _END_ 项，共 _TOTAL_ 项。",
"infoEmpty": "没有发现记录",
"infoFiltered": "(由 _MAX_ 项结果过滤)",
"infoPostFix": "",
"infoThousands": ",",
"lengthMenu": "每页 _MENU_ 项",
"loadingRecords": "载入中...",
"processing": "处理中...",
"paginate": {
"first": "首页",
"previous": "上页",
"next": "下页",
"last": "末页",
},
//"search": "搜索:",
//"url": "",
"zeroRecords": "没有匹配结果"
},
order: [],//取消默认排序查询,否则复选框一列会出现小箭头
bLengthChange:false,//禁止使用搜索框
autoWidth:false,//禁用自动调整列宽
stripeClasses:["odd", "even"],//为奇偶行加上样式，兼容不支持CSS伪类的场合
searching:false,//禁用原生搜索
orderMulti:false,//启用多列排序
renderer:"bootstrap",//渲染样式：Bootstrap和jquery-ui
pagingType:"simple_numbers", //分页样式：simple,simple_numbers,full,full_numbers
ajax: function (data, callback) {
var param = {};
param.limit = data.length;//每页显示多少
param.start = data.start;//开始的记录序号
//console.log(param.limit);
//param.draw = 1;
$.ajax({
type: "POST",
url: "/ajax/lock/list",
//cache: false, //禁用缓存
data: JSON.stringify(param), //传入组装的参数
queryParams:function(params){
var xsrf = $("input[name = ‘_xsrf‘]")
if(xsrf != undefined){
params._xsrf = product_ver[0].value;
}
var limit = $("select[name=‘table-record_length‘]");
if(limit != undefined){
limit = (limit[0] && limit[0].value) || 20;
params.length = limit;
}
return params
},
dataSrc: function(response){
return response.data;
},
dataType: "json",
success: function (result) {
//setTimeout仅为测试延迟效果
setTimeout(function () {
//封装返回数据
var returnData = {};
returnData.draw = data.draw;//这里直接自行返回了draw计数器,应该由后台返回
returnData.recordsTotal = result.recordsTotal;//返回数据全部记录
returnData.recordsFiltered = result.recordsTotal;//后台不实现过滤功能，每次查询均视作全部结果
returnData.data = result.data;//返回的数据列表
//调用DataTables提供的callback方法，代表数据已封装完成并传回DataTables进行渲染
//此时的数据需确保正确无误，异常判断应在执行此回调前自行处理完毕
callback(returnData);
}, 200);
}
})
},
processing:true,//隐藏加载提示,自行处理
serverSide:true,//启用服务器端分页
columns:[
{ "data": "lock_id","searchable":false,"orderable":true},
{ "data": "name","searchable":false,"orderable":false},
{ "data": "cat_eye", "render":function(data){
switch(data){
case true:
return ‘有‘;
case false:
return ‘没有‘;
}
}},
{ "data": "type", "render":function(data){
switch(data){
case 0:
return ‘F-A‘;
case 1:
return ‘F-B‘;
default:
return ‘F-C‘
}
}},
{ "data": "mac","searchable":false,"orderable":false},
{ "data": "province","searchable":false,"orderable":false},
{ "data": "alarm", "render":function(data){
switch(data){
case 0:
return ‘正常‘;
case 1:
return ‘不正常‘;
}
}},
{ "data": "online", "render":function(data){
switch(data){
case true:
return ‘在线‘;
case false:
return ‘不在线‘;
}
}},
{ "data": "corp_id", "render":function(data){
switch(data){
case 0:
return ‘安居心‘;
case 1:
return ‘国海‘;
}
}},
{ "data": "product_ver","searchable":false,"orderable":false},
{ "data": "firmware_ver","searchable":false,"orderable":false},
{ "data": "master_id"},
{ "data": "has_ap", "render":function(data){
switch(data){
case 0:
return ‘有‘;
case 1:
return ‘没有‘;
}
}},
{ "data": "descr","searchable":false,"orderable":false},
{
"data": null,
"className": "center",
"defaultContent": ‘<button type="button" id="editrow" data-toggle="modal" class="btn btn-outline btn-circle btn-sm purple"><i class="fa fa-edit"></i></button> <button id="delrow" class="btn btn-outline btn-circle dark btn-sm black"><i class="fa fa-trash-o"></i></button>‘
}
],
});
//表数据删除
$(‘#sample‘).on( ‘click‘, ‘button#delrow‘, function (even) {
even.preventDefault;//方法阻止元素发生默认的行为（例如，当点击提交按钮时阻止对表单的提交）。
if(confirm("确定删除该信息？") == false){
return;
}else{ //得到当前对象的值
var data = $("#sample").DataTable().row( $(this).parents(‘tr‘) ).data();
$.ajax({
url: ‘/ajax/lock/delete‘,
type: ‘POST‘,
dataType: ‘json‘,
data: JSON.stringify({
lock_id: data["lock_id"]
}), //success是指后台数据库的表么？如果是，先将success表中相关的数据封装在list里面，然后将list转为json数据格式的字符串返回到前台。如果你用的是jQuery的ajax方法，那么记得在前台接受的时候一定要指定数据接受格式为json,否则你得到是一个json的字符串，不是一个json的对象
success:function(data){
if (data.success == null){
alert(‘删除成功!‘);
start = $("#sample").dataTable().fnSettings()._iDisplayStart;//从第几行开始显示数据
total = $("#sample").dataTable().fnSettings().fnRecordsDisplay();//
window.location.reload();
if((total-start) == 1){
if (start > 0) {
$("#sample").dataTable().fnPageChange( ‘previous‘, true);//已回到上一页中 //.注意$("#sorting-advanced").dataTable().fnPageChange( ‘previous‘); 是不行的，必需进行刷新，否则页面中显示的iDisplayStart会从cookie中取得，还是删除前的iDisplayStart
}
}
}
},
error:function(){
console.log(data);
alert(‘服务器无响应，请联系管理员!‘);
}
})
}
});
});
时间： 2024-12-07 10:56:57