ajax删除之后分页,DataTable ajax分页+删除(示例代码)

$(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": ‘

}

],

});

//表数据删除

$(‘#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(‘服务器无响应,请联系管理员!‘);

}

})

}

});

});

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值