Как создать плагин jQuery, который возвращает данные строк в DataTables? - PullRequest
0 голосов
/ 11 февраля 2020

Я почти всегда использую один и тот же код для инициализации своих таблиц с помощью DataTables, с некоторыми небольшими вариациями, такими как ajax url, форматирование столбцов и т. Д. c.

Я нашел несколько jQuery шаблонов чтобы создать свой собственный плагин, поэтому я начал разрабатывать тот, который выполняет всю инициализацию DataTables, но я хотел бы, чтобы при нажатии на кнопку таблицы он уже возвращал набор данных самой строки, позже, с этим возвратом набора данных, я сделать что-то другое для каждой отдельной таблицы, как если бы я расширял функцию.

Я хотел бы добиться чего-то вроде этого:

            $('#my-table').initDataTables({
                ajax: '{{route("users.get")}}',
                dom: 'tr',
                columns: [
                    {
                        data: 'id',
                        width: "1%",
                        visible: true,
                        createdCell: function(td, cellData, rowData, row, col) {
                            $(td).attr("data-label", "ID");
                        }
                    },
                    {
                        data: 'name',
                        createdCell: function(td, cellData, rowData, row, col) {
                            $(td).attr("data-label", "title");
                        }
                    },
                    {
                        data: null,
                        orderable: false,
                        className: 'text-right',
                        defaultContent: '<button class="btn btn-info btnedit"><i class="fa fa-pencil"></i></button>'
                    }
                ],
                onRowEdit: function (data) {
                     console.log(data); // how get dataset?!?
                },
            });

... то есть, используя возврат эта 'onRowEdit()' функция для чего-то другого в каждой отдельной таблице, так как я не хочу, чтобы эта функция была точно для всех таблиц.

Конечно, я знаю, что мог бы упростить все это и Не используйте плагин my, но цель состоит в том, чтобы создать плагин для минимизации повторения кода.

jQuery шаблон (плагин)

/*!
 * jQuery lightweight plugin boilerplate
 */
;(function ($, window, document, undefined) {

    // CREATE THE DEFAULTS ONCE
    const pluginName = 'initDataTables';

    // CREATE THE DEFAULTS ONCE
    const defaults = {
        propertyName: 'value',
        dom: '<"row"<"col-sm-6"f><"col-sm-6 actionbar">>tr<"row"<"col-sm-4"><"col-sm-4"p><"col-sm-4">>',
        onRowEdit: function() {},
        onRowDelete: function() {},
    };

    // THE ACTUAL PLUGIN CONSTRUCTOR
    function Plugin(element, options) {

        this.element = element;

        this.options = $.extend({}, defaults, options);

        this._defaults = defaults;
        this._name = pluginName;

        this.init();
    }

    Plugin.prototype.init = function () {

        this.datatables();
    };

    Plugin.prototype.datatables = function () {

        const $table = $(this.element);

        /* init datatable */
        const $dt = $table.DataTable({
            dom: this.options.dom,
            columns: this.options.columns || null,
            ajax: this.options.ajax || null,
            lengthMenu: [[20, 40, 80, 100, -1], [20, 40, 80, 100, "All"]],
            order: [[0, 'asc']],
            paging: true,
            info: false,
            language: {
                "emptyTable": "Nenhum registro encontrado",
                "loadingRecords": "Carregando...",
                "lengthMenu": "Exibindo _MENU_ registros por página",
                "zeroRecords": "Nenhum registro encontrado",
                "info": "Mostrando de _START_ até _END_ de _TOTAL_ registros",
                "infoEmpty": "Não há registros",
                "infoFiltered": "(filtrado de _MAX_ registros)",
                "search": "Filtrar ",
                "searchPlaceholder": "",
                "paginate": {
                    "first": "Primeira",
                    "last": "Última",
                    "next": "Próxima",
                    "previous": "Anterior"
                }
            },
            rowCallback: function (row, data, index) {
            },
            initComplete: function (settings, json) {
            }
        });

        /* BUTTON EDIT USER */
        $table.find('tbody').on('click', 'button.btnedit', function (e) {

            e.preventDefault();

            console.log('BUTTON EDIT USER (001)');

            const tr = $(this).closest('tr');

            const row = $dt.row(tr);

            // HOW RETURN THIS DATA ?!?
            return row.data();
        });


        console.log(this.options);
    };


    // A REALLY LIGHTWEIGHT PLUGIN WRAPPER AROUND THE CONSTRUCTOR,
    // PREVENTING AGAINST MULTIPLE INSTANTIATIONS
    $.fn[pluginName] = function (options) {
        return this.each(function () {
            if (!$.data(this, 'plugin_' + pluginName)) {
                $.data(this, 'plugin_' + pluginName, new Plugin(this, options));
            }
        });
    }
})(jQuery, window, document);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...