Как сделать выбранные столбцы в таблице данных доступными для редактирования с использованием настраиваемых полей в jQuery? - PullRequest
Новая
       37

Как сделать выбранные столбцы в таблице данных доступными для редактирования с использованием настраиваемых полей в jQuery?

1 голос
/ 17 июня 2020

Я пытаюсь выполнить приведенный ниже код для редактирования таблицы данных с использованием настраиваемых полей в jquery, и это дает мне эту ошибку «fn.dataTable.Editor is not a constructor». Пожалуйста, предложите любой другой обходной путь

Ниже приведены загруженные библиотеки JavaScript: 

https://code.jquery.com/jquery-3.5.1.js
https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js
https://cdn.datatables.net/buttons/1.6.2/js/dataTables.buttons.min.js
https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js
../../extensions/Editor/js/dataTables.editor.min.js

Код: 

<script>
    var editor; // use a global for the submit and return data rendering in the examples

    $(document).ready(function() {
        editor = new $.fn.dataTable.Editor({
            table: "#example",
            fields: [{
                label: "First name:",
                name: "first_name"
            }, {
                label: "Last name:",
                name: "last_name"
            }, {
                label: "Salary:",
                name: "salary"
            }]
        });

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

        $('#example').DataTable({
            dom: 'Bfrtip',
            columns: [{
                    data: null,
                    defaultContent: '',
                    className: 'select-checkbox',
                    orderable: false
                },
                { data: 'first_name', className: 'editable' },
                { data: 'last_name', className: 'editable' },
                { data: 'position' },
                { data: 'office' },
                { data: 'start_date' },
                { data: 'salary', render: $.fn.dataTable.render.number(',', '.', 0, '$'), className: 'editable' }
            ],
            select: {
                style: 'os',
                selector: 'td:first-child'
            },
            buttons: [
                { extend: 'create', editor: editor },
                { extend: 'edit', editor: editor },
                { extend: 'remove', editor: editor }
            ]
        });
    });
</script>
...