三.jquery.datatables.js表格編輯與刪除

標籤：style   blog   http   color   java   使用   os   io   

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