Я почти всегда использую один и тот же код для инициализации своих таблиц с помощью 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);