三.jquery.datatables.js表格编辑与删除

1.为了使用如图效果(即将按钮放入行内http://www.datatables.net/examples/ajax/null_data_source.html)

采用了另一个数据格式

2.后台php,取表格数据变为:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
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");
            }
        }
    }
复制代码

 

 

 

posted @   Ada zheng  阅读(36925)  评论(1编辑  收藏  举报
努力加载评论中...
点击右上角即可分享
微信分享提示