三.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=[ "data"=>$item, ]; // 本地数据测试 // $data =[ // "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 = tables.row( $(this).parents(‘tr‘) ).data(); $.ajax({ url: ‘deltable‘, type: ‘POST‘, dataType: ‘json‘, data: {id: data[0]}, }) .done(function(data) { if (data=="success") { tables.ajax.reload(); }; }) .fail(function() { alert("error"); }); });
数据编辑
// 数据编辑 $(‘.dataTables-example tbody‘).on( ‘click‘, ‘button#editrow‘, function () { var data = 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="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"); } } }
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。