简单的内联编辑数据表

时间:2016-10-03 05:21:36

标签: javascript jquery ajax datatables jquery-datatables-editor

我试试这个

https://editor.datatables.net/examples/inline-editing/simple

我修改了这样的代码

代码1

<script type="text/javascript">
       var editor; // use a global for the submit and return data rendering in the examples

       $(document).ready(function () {
           editor = new $.fn.dataTable.Editor({
               ajax: "../php/staff.php",
               table: "#example",
               fields: [{
                   label: "RegionID:",
                   name: "RegionID"
               }, {
                   label: "Region:",
                   name: "Region"
               }, {
                   label: "StartDate:",
                   name: "StartDate"
               }, {
                   label: "EndDate:",
                   name: "EndDate"
               }              
               ]
           });

           // Activate an inline edit on click of a table cell
           $('#example').on('click', 'tbody td:not(:first-child)', function (e) {
               editor.inline(this);
           });

           $('#example').DataTable({
               dom: "Bfrtip",
               ajax: "../php/staff.php",
               columns: [
                   {
                       data: null,
                       defaultContent: '',
                       className: 'select-checkbox',
                       orderable: false
                   },
                   { data: "RegionID" },
                   { data: "Region" },
                   { data: "StartDate" },
                   { data: "EndDate" },

               ],
               select: {
                   style: 'os',
                   selector: 'td:first-child'
               },
               buttons: [
                   { extend: "create", editor: editor },
                   { extend: "edit", editor: editor },
                   { extend: "remove", editor: editor }
               ]
           });
       });

   </script>

热门表和呼叫静态网络方法 CODE2

<script type="text/javascript">

    function data(){
        $.ajax({
            type: "POST",
            url: "Maintenance.aspx/data",
            //data: "",
            contentType: "application/json;charset=utf-8",
            dataType: "json",
            async: true,
            cache: false,
            success: function (result) {

                var re = JSON.parse(result.d).response;
                console.log(JSON.parse(result.d).response);
                $("#tabledata").empty()

                if(re.length >0)
                {
                    $("#tabledata").append
                    ("<thead><tr><th>RegionID</th><th>Region</th><th>StartDate</th><th>EndDate</th>");

                    for(var i=0;i<final.length;i++)
                    {
                        if(re[i]!==null)
                        {
                            $("#tabledata").append("<tbody><tr><td>" +
                                re[i][0] + "</td><td>" +
                                re[i][1] + "</td><td>" +
                                re[i][2] + "</td><td>" +
                                re[i][3] + "</td></tr></tbody>");
                        }
                    }


                }
            },
            error:function(error)
            {
                alert(Error);
            }
        });
    }
</script>

这个数据表示例有这个链接ajax:“../ php /staff.php” 所以首先我创建一个静态Web方法,我在ajax中调用此方法并使用jquery IN代码2创建表,然后对于数据表我尝试代码1,但我如何替换此行ajax: "../php/staff.php",以及我在这做什么?

0 个答案:

没有答案