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