Simple inline editing data-tables
<p>I try this</p>

<p><a href="https://editor.datatables.net/examples/inline-editing/simple" rel="nofollow">https://editor.datatables.net/examples/inline-editing/simple</a></p>

<p>and i modified code like this</p>

<p><strong>CODE 1</strong></p>

<pre><code>&lt;script type="text/javascript"&gt;
       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 }
               ]
           });
       });

   &lt;/script&gt;
</code></pre>

<p><strong>POPULATE TABLE AND CALL STATIC WEB METHOD</strong>  <strong>CODE2</strong> </p>

<pre><code>&lt;script type="text/javascript"&gt;

    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 &gt;0)
                {
                    $("#tabledata").append
                    ("&lt;thead&gt;&lt;tr&gt;&lt;th&gt;RegionID&lt;/th&gt;&lt;th&gt;Region&lt;/th&gt;&lt;th&gt;StartDate&lt;/th&gt;&lt;th&gt;EndDate&lt;/th&gt;");

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


                }
            },
            error:function(error)
            {
                alert(Error);
            }
        });
    }
&lt;/script&gt;
</code></pre>

<p>this datatable example have this link ajax: "../php/staff.php" 
so for first i create a static web method and i call this method in ajax  and create table with jquery IN code 2 then for datatable i try code 1 but how i replace this line <code>ajax: "../php/staff.php",</code>  and what i do here?</p>