Simple inline editiing

suser

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

and i modified i code like this

 <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>

<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>

now what i write here instead of this

ajax: "../php/staff.php",

allan

You would replace the ajax option with wherever you want Editor to send its editing data. See the Editor manual for the data format it submits.

Allan

suser

i did not get you ... how i done this ?

suser

when i try this
editor = new $.fn.dataTable.Editor({ ajax: "Maintenance.aspx/data",

this show an error

Failed to load resource: the server responded with a status of 404 (Not Found)
http://localhost:33578/extensions/Editor/css/editor.dataTables.min.css Failed to load resource: the server responded with a status of 404 (Not Found)

http://localhost:33578/extensions/Editor/js/dataTables.editor.min.js Failed to load resource: the server responded with a status of 404 (Not Found)

http://localhost:33578/extensions/Editor/css/editor.dataTables.min.css Failed to load resource: the server responded with a status of 404 (Not Found)

Maintenance.aspx:32 Uncaught TypeError: $.fn.dataTable.Editor is not a constructor
http://localhost:33578/extensions/Editor/css/editor.dataTables.min.css Failed to load resource: the server responded with a status of 404 (Not Found)

allan

It sounds like the Editor JS and CSS files aren't where the browser is being told to load them from.

Can you give me a link to the page so I can take a look please?

Allan

suser

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

suser

https://jsfiddle.net/wtnwgz09/5/

F12Magic

You did not load the editor plugin. See the manual how you have to do that.

And in your fiddle you made the same mistake again. 4 table headers defined, 3 columns defined per row and no table body tag. Use the updated version I provided in another post to further experiment. Your updated fiddle.

suser

but how to edit these rows @F12Magic