首页 > 代码库 > 三.jquery.datatables.js表格编辑与删除
三.jquery.datatables.js表格编辑与删除
1.为了使用如图效果（即将按钮放入行内http://www.datatables.net/examples/ajax/null_data_source.html）
采用了另一个数据格式
2.后台php,取表格数据变为：
public function initable(){ $db = M(‘yanfa_project‘)->select(); // 取$db的长度 // $len =count($db); $item=array(); // 循环将$db二维数组每一项的value取出放一个数组里 foreach ($db as &$value) { array_push($item,array_values($value)); } // array_push($item,array_values($db[0]),array_values($db[1])); // echo json_encode($item); $data=http://www.mamicode.com/["data"=>$item, ]; // 本地数据测试 // $data =http://www.mamicode.com/["data"=> [ // [ // "Michael Bruce", // "Javascript Developer", // "Singapore", // "5384", // "2011/06/27", // "$183,000", // "Javascript Developer", // "Singapore", // "5384", // "2011/06/27", // "$183,000" // ], // [ // "Donna Snider", // "Customer Support", // "New York", // "4226", // "2011/01/25", // "$112,000", // "Javascript Developer", // "Singapore", // "5384", // "2011/06/27", // "$183,000" // ] // ] // ]; echo json_encode($data); }3.前台js代码
//表格初始化化 var tables=$(‘.dataTables-example‘).DataTable({ "processing": true, // "serverSide": true, "autoWidth":false, "ajax":{ "url":"initable", }, "columnDefs": [{ "targets": -2,//编辑 "data": null, "defaultContent": "<button id=‘editrow‘ class=‘btn btn-primary‘ type=‘button‘><i class=‘fa fa-edit‘></i></button>" },{ "targets": -1,//删除 "data": null, "defaultContent": "<button id=‘delrow‘ class=‘btn btn-primary‘ type=‘button‘><i class=‘fa fa-trash-o‘></i></button>" }, { "targets": 0,//第一列隐藏 "visible": false, "searchable": false } ] });
数据删除
// 数据删除 $(‘.dataTables-example tbody‘).on( ‘click‘, ‘button#delrow‘, function () { var data = http://www.mamicode.com/tables.row( $(this).parents(‘tr‘) ).data(); $.ajax({ url: ‘deltable‘, type: ‘POST‘, dataType: ‘json‘, data: {id: data[0]}, }) .done(function(data) { if (datahttp://www.mamicode.com/=="success") { tables.ajax.reload(); }; }) .fail(function() { alert("error"); }); });
数据编辑
// 数据编辑 $(‘.dataTables-example tbody‘).on( ‘click‘, ‘button#editrow‘, function () { var data = http://www.mamicode.com/tables.row( $(this).parents(‘tr‘) ).data(); var fields = $("#add-form").serializeArray(); jQuery.each( fields, function(i, field){ //jquery根据name属性查找 $(":input[name=‘"+field.name+"‘]").val(data[i]); }); $(":input[name=‘mark‘]").val("edit"); $("#modal-form").modal("show");//弹出框show });
为了标记传入后台的是编辑还是删除，使用了<input name=‘mark‘ type="hidden" value="http://www.mamicode.com/add">隐形input在form里。
后台php代码为：
public function addtable(){ $data = $_POST; $mark=$data[‘mark‘]; unset($data[‘mark‘]); if ($mark==‘add‘) { if(M(‘yanfa_project‘)->add($data)){ $this->ajaxReturn("success"); } }else{ if(M(‘yanfa_project‘)->where(array(‘id‘ =>$data[‘id‘]))->save($data)){ $this->ajaxReturn("success"); } } }
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。