tab inline editor

yskapell

Hello,

I follow this examples for my code https://editor.datatables.net/examples/inline-editing/tabControl.html but I cannot edit on my page as the example shows.

Here is my code

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/table.vocabulary.php',
        table: '#vocabulary',
        fields: [
            {
                "label": "ideogram:",
                "name": "ideogram"
            },
            {
                "label": "pinyin:",
                "name": "pinyin"
            },
            {
                "label": "type:",
                "name": "type",
                "type": "select",
                "options": [
                    "\u0395\u03a0\u0399\u0398",
                    "P",
                    "\u0391\u039d\u03a4",
                    "\u039c",
                    "\u039c\u039c",
                    "\u039f\u03a5\u03a3",
                    "\u03a1\/\u039f\u03a5\u03a3"
                ]
            },
            {
                "label": "meaning:",
                "name": "meaning"
            }
        ],
        formOptions: {
            inline: {
                onBlur: 'submit'
            }
        }
    } );
 
    var table = $('#vocabulary').DataTable( {
        dom: 'Bfrtip',
        ajax: 'php/table.vocabulary.php',
        columns: [
            {
                data: null,
                defaultContent: '',
                className: 'select-checkbox',
                orderable: false
            },
            {
                "data": "ideogram"
            },
            {
                "data": "pinyin"
            },
            {
                "data": "type"
            },
            {
                "data": "meaning"
            }
        ],
        order: [ 1, 'asc' ],
        keys: {
            columns: ':not(:first-child)',
            keys: [ 9 ],
            editor: editor,
            editOnFocus: true
        },
        select: {
            style:    'os',
            selector: 'td:first-child'
        },
        buttons: [
            { extend: "create", editor: editor },
            { extend: "edit",   editor: editor },
            { extend: "remove", editor: editor }
        ]
    } );
} );

I load

        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jqc-1.12.4/moment-2.18.1/dt-1.13.1/b-2.3.3/date-1.2.0/sl-1.5.0/datatables.min.css">
        <link rel="stylesheet" type="text/css" href="css/generator-base.css">
        <link rel="stylesheet" type="text/css" href="css/editor.dataTables.min.css">
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.1/css/jquery.dataTables.min.css">
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/2.3.2/css/buttons.dataTables.min.css">
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.5.0/css/select.dataTables.min.css">
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/datetime/1.2.0/css/dataTables.dateTime.min.css">

        <script type="text/javascript" charset="utf-8" src="https://cdn.datatables.net/v/dt/jqc-1.12.4/moment-2.18.1/dt-1.13.1/b-2.3.3/date-1.2.0/sl-1.5.0/datatables.min.js"></script>
        <script type="text/javascript" charset="utf-8" src="js/dataTables.editor.min.js"></script>
        <script type="text/javascript" charset="utf-8" src="js/table.vocabulary.js"></script>
        <script type="text/javascript" charset="utf-8" src="https://code.jquery.com/jquery-3.5.1.js"></script>
        <script type="text/javascript" charset="utf-8" src="https://cdn.datatables.net/1.13.1/js/jquery.dataTables.min.js"></script>
        <script type="text/javascript" charset="utf-8" src="https://cdn.datatables.net/buttons/2.3.2/js/dataTables.buttons.min.js"></script>
        <script type="text/javascript" charset="utf-8" src="https://cdn.datatables.net/select/1.5.0/js/dataTables.select.min.js"></script>
        <script type="text/javascript" charset="utf-8" src="https://cdn.datatables.net/keytable/2.8.0/js/dataTables.keyTable.min.js"></script>
        <script type="text/javascript" charset="utf-8" src="https://cdn.datatables.net/datetime/1.2.0/js/dataTables.dateTime.min.js"></script>

Any idea?

kthorngren

Please provide details of the problem. Do you get any errors in the browser's console or alert messages?

Kevin

kthorngren

I did notice one problem. You are loading jquery.js and the Datatables libraries twice. On line 1 and 9 you re loading a concatenated set of Datatbles libraries. These are duplicated with lines 4-7 and 13-17. Looks like you added keyTable.

Click on the link in line 9 to open the CDN in your browser. You will see a link for updating the libraries. Open that link then add KeyTable. Use the new concatenated CDN and remove the duplicated individual lines. Duplicating the install of the libraries will cause issues.

Kevin

yskapell

Hello,

I removed the lines 4-7 and 13-17 and still I have no inline editing.

I get no error in console.

You can check here
https://learnchinese.kaiqiaozhi.space/editor/vocabulary.html

yskapell

Fixed!!

I think it was something wrong with the generator.

I upload the editor (trial) and rewrite the code and now evevrything work as suppose to

allan

Thanks for the update. Good to hear that you got it working.

Allan