Three. jquery.datatables.js form editing and deletion

1. In order to use the effect (the button will be placed in the line http://www.datatables.net/examples/ajax/null_data_source.html)

Another data format was used

2. Background php, take the table data into:

public function initable () {$db = M (' Yanfa_project ')->select ();    Take the length of the $db//$len =count ($DB);    $item =array (); The loop $db the value of each item in a two-dimensional array into an array of 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,];//Local data test//$data =[//"Data" = [//[//"Michael Bruce",//"Javascript D Eveloper ",//" 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_enc Ode ($data);} 
 

3. Front-desk JS code

//Initialization of Tables        vartables=$ ('. Datatables-example ').DataTable ({"Processing":true,//"ServerSide": true,"Autowidth":false, "Ajax":{                 "url": "Initable",            }, "Columndefs": [{                    "Targets":-2,//Edit"Data":NULL, "defaultcontent": "<button id= ' editrow ' class= ' btn btn-primary ' type= ' button ' ><i class= ' FA F A-edit ' ></i></button> "            },{                    "Targets":-1,//Delete"Data":NULL, "defaultcontent": "<button id= ' delrow ' class= ' btn btn-primary ' type= ' button ' ><i class= ' FA fa -trash-o ' ></i></button> "            },            {                "Targets": 0,//first column Hidden"Visible":false, "searchable":false            }            ]        });

Data deletion

//Data Deletion$ ('. Datatables-example tbody '). On (' Click ', ' Button#delrow ',function () {            vardata = 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");        }); });

Data editing

//Data Editing$ ('. Datatables-example tbody '). On (' Click ', ' Button#editrow ',function () {            vardata = Tables.row ($ (this). Parents (' tr ')).data (); varFields = $ ("#add-form").Serializearray (); JQuery. each(Fields,functionIfield) {                //jquery finds by Name property$ (": Input[name= '" "+field.name+" "]").Val (Data[i]);            }); $(": Input[name= ' Mark ']"). Val ("Edit"); $("#modal-form"). Modal ("show");//Popup Box Show});

In order to mark whether the incoming background is edit or delete, use <input name= ' mark ' type= "hidden" value= "add" > Invisible input in the form.

The background PHP code is:

 Public functionaddtable () {$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"); }        }    }