Я использую DataTables для форматирования своих таблиц на веб-сайте отчетов, который я запускаю. Я использую инициализацию, чтобы добавить гиперссылку на первый столбец моих таблиц. Есть ли способ заставить его действовать как кнопка вместо гиперссылки?
Мне нужно это, потому что у меня есть гиперссылка, отправляющая всю строку как часть ссылки (так через GET
), но это не удается из-за ограничения на символы в GET
, Мне нужно использовать POST
так что я могу отправить этот больший объем данных.
Определение гиперссылки:
data = '<a href="FormToEdit.php?everything=\'' + encodeURIComponent(row) + '\'">' + data + '</a>';
Вот полная инициализация datatables, чтобы показать гиперссылку в контексте:
$.fn.dataTable.ext.buttons.export =
{
className: 'buttons-alert',
"text": "Export All Test",
action: function (e, dt, node, config)
{
alert('Export All Test');
}
};
$(document).ready(function ()
{
// Setup - add a text input to each footer cell
$('#DataTableEdit tfoot th').each(function ()
{
var title = $(this).text();
$(this).html('<input type="text" placeholder="Search ' + title + '" />');
});
var table = $('#DataTableEdit').DataTable({
"lengthMenu": [[25, 50, 75, 100, 150, -1], [25, 50, 75, 100, 150, 'All']],
"dom": '<"top"Bifpl<"clear">>rt<"bottom"ip<"clear">>',
"buttons": [{
extend: 'collection',
text: 'Selection',
buttons: ['selectAll', 'selectNone']
}, {
extend: 'collection',
text: 'Export',
buttons: ['export', 'excel', 'csv', 'pdf', { extend: 'excel',
text: 'Export Current Page',
exportOptions: {
modifier: {
page: 'current'
}
},
customize: function (xlsx)
{
var sheet = xlsx.xl.worksheets['sheet1.xml'];
$('row:first c', sheet).attr('s', '7');
}
},
{
text: 'Export All to Excel',
action: function (e, dt, button, config)
{
dt.one('preXhr', function (e, s, data)
{
data.length = -1;
}).one('draw', function (e, settings, json, xhr)
{
var excelButtonConfig = $.fn.DataTable.ext.buttons.excelHtml5;
var addOptions = { exportOptions: { 'columns': ':all'} };
$.extend(true, excelButtonConfig, addOptions);
excelButtonConfig.action(e, dt, button, excelButtonConfig);
}).draw();
}
}]
}
],
"fixedHeader": {
header: true,
footer: true
},
"select": true,
"processing": true,
"serverSide": true,
"ajax": {
"url": "./ServerSide.php",
"type": "POST"},
//This is the part that adds the hyperlink
columnDefs: [
{
targets: 0,
render: function (data, type, row, meta)
{
if (type === 'display')
{
data = '<a href="FormToEdit.php?everything=\'' + encodeURIComponent(row) + '\'">' + data + '</a>';
}
return data;
}
}],
//End of hyperlink creation
initComplete: function ()
{
var api = this.api();
// Apply the search
api.columns().every(function ()
{
var that = this;
$('input', this.footer()).on('keyup change', function ()
{
if (that.search() !== this.value)
{
that
.search(this.value)
.draw();
}
});
});
}
});
});
Если у меня недостаточно информации, дайте мне знать, и я добавлю больше.
Вы можете попробовать и заключить его в <form>
тег, который заставит это представить как почту
if (type == 'display'){
data = '<form action="FormToEdit.php" method="post"><button type="submit"class="btn-as-link" value = \'' +
encodeURIComponent(row) + '\'>' + data + '</button></form>' ;
}
И вы можете сделать его похожим на ссылку:
.btn-as-link{
border: none;
outline: none;
background: none;
cursor: pointer;
padding: 0;
text-decoration: underline;
}
Других решений пока нет …