DataTables and Tabledit getting TypeError-CodePudding

I am trying to use DataTables with Tabledit , but I am getting "TypeError: Cannot set properties of undefined (setting 'nTf')". The number of tags are also matching.

To make it work if I comment the "editable" object it doesn't show any error. How can i make it work? But this part is required by the lib as it will make only those column editable.

                <html>
                
                <head>
                    <title>Person Information</title>
                    <meta charset="UTF-8">
                    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
                
                    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
                    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
                    <script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
                    <script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
                    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css" />
                    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
                    <script src="https://markcell.github.io/jquery-tabledit/assets/js/tabledit.min.js"></script>
                    <script>
                        $(document).ready(function () {
                            var baseurl = "https://run.mocky.io/v3/391adcbb-160c-4111-b853-2e273700676b";
                            var xmlhttp = new XMLHttpRequest();
                            xmlhttp.open("GET", baseurl, true);
                            xmlhttp.onreadystatechange = function () {
                                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                                    var persons = JSON.parse(xmlhttp.responseText);
                
                                    $.fn.dataTable.ext.errMode = 'none';
                                    $("#example").DataTable({
                                        data: persons,
                                        "columns": [{
                                                "data": "id"
                                            },
                                            {
                                                "data": "username"
                                            },
                                            {
                                                "data": "email"
                                            },
                
                                            {
                                                "data": "avatar"
                                            }
                                        ]
                                    });
                                }
                            };
                            xmlhttp.send();
                
                        
                                $('#example').Tabledit({
                                    url: 'action.php',
                                    dataType: 'json',
                                    eventType: 'dblclick',
                                    editButton: false,
                                    columns: {
                                        identifier: [0, 'id'],
                                        editable: [
                                            [1, 'username'],
                                            [2, 'email']
                                            
                                        ]
                                    }
                                });
                          
                
                        });
                    </script>
                </head>
                
                <body>
                
                    <div >
                
                    </div>
                    <div >
                
                        <table id="example" style="width:100%">
                            <thead>
                                <tr>
                                    <th>id</th>
                                    <th>username</th>
                                    <th>email</th>
                                    <th>avatar</th>
                
                
                                </tr>
                            </thead>
                            <tfoot>
                                <tr>
                                    <th>id</th>
                                    <th>username</th>
                                    <th>email</th>
                                    <th>avatar</th>
                
                
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </body>
                
                </html>

CodePudding user response：

You can re-structure how your DataTable calls its Ajax data, by using the DataTables built-in support for Ajax.

You can then apply the Tabledit functionality to the resulting DataTable, using the initComplete option.

$(document).ready(function() {
    var baseurl = "https://run.mocky.io/v3/391adcbb-160c-4111-b853-2e273700676b";

    $("#example").DataTable({
        ajax: {
            url: baseurl,
            dataSrc: ""
        },
        columns: [{
                data: "id"
            },
            {
                data: "username"
            },
            {
                data: "email"
            },

            {
                data: "avatar"
            }
        ],
        initComplete: function(settings, json) {

            $('#example').Tabledit({
                //url: 'action.php',
                dataType: 'json',
                eventType: 'dblclick',
                editButton: false,
                columns: {
                    identifier: [0, 'id'],
                    editable: [
                        [1, 'username'],
                        [2, 'email']

                    ]
                }
            });

        }
    });

});

<html>
    <head>
        <title>Person Information</title>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
        <script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
        <script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
        <link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css" />
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
        <script src="https://markcell.github.io/jquery-tabledit/assets/js/tabledit.min.js"></script>
    </head>
    <body>
        <div >
        </div>
        <div >
            <table id="example" style="width:100%">
                <thead>
                    <tr>
                        <th>id</th>
                        <th>username</th>
                        <th>email</th>
                        <th>avatar</th>
                    </tr>
                </thead>
                <tfoot>
                    <tr>
                        <th>id</th>
                        <th>username</th>
                        <th>email</th>
                        <th>avatar</th>
                    </tr>
                </tfoot>
            </table>
        </div>
    </body>
</html>

Now, if you run the above code snippet, and then double-click on a value in the username or email columns, the cell will become editable.

Note - I commented out your action.php option because I do not have that file. So, edits are not sent/saved anywhere.