jQuery DataTables:隐藏最后一行的“delete”按钮
jQuery DataTables:隐藏最后一行的“delete”按钮
提问于 2019-03-04 17:37:26
我有一个DataTable，在某些情况下可以返回多个页面。每一行返回，显示一个删除按钮，但我需要它隐藏在最后一行返回的按钮，无论是1 pg或多个，所以css不能在此使用。
我不知道如何实现这一点，因为DataTables对我来说是新的
下面是我目前的代码，除了隐藏按钮之外，它工作得很好，希望你能告诉我如何实现这一点
// Existing rule datatable creator
var existingRuleTable = $('#existingRulesDataTable')
.on( 'error.dt', function () {
$('#todrexitingrules').hide();
$('#errorModal').modal('show');
$('#errorModal').on('shown.bs.modal', function () {
$('#errorModalCloseButton').focus();
})
$('#existingRuleError').html(
'<p>There was an issue retrieving the data. Please try again.</p>'
+ '<p>If the error keeps occurring, please get in touch.</p>');
})
.DataTable({
"ordering": false, // Allows ordering
"searching": false, // Searchbox
"paging": true, // Pagination
"info": false, // Shows 'Showing X of X' information
"pagingType": 'simple_numbers', // Shows Previous, page numbers & next buttons only
"pageLength": 10, // Defaults number of rows to display in table. If changing this value change the show/hide below
"dom": '<"top"f>rt<"bottom"lp><"clear">', // Positions table elements
"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]], // Sets up the amount of records to display
"fnDrawCallback": function () {
if ($('#existingRulesDataTable').DataTable().rows().count() < 11) {
$("div[class='bottom']").hide(); // Hides paginator & dropdown if less than 11 records returned
} else {
$("div[class='bottom']").show(); // Shows paginator & dropdown if 11 or more records are returned
}
},
'ajax': {
"type": 'GET',
"url": "js/dataTable.json", // TODO > Needs to be changed when actual file resolved
"data": function (data) {
return data;
},
"dataSrc": function(res){
existingRuleTableCount = res.data.length;
return res.data;
}
},
"columns": [ // Display JSON data in table
{ "data": "position" },
{ "data": "startTime" },
{ "data": "endTime" },
{ "data": "selectedDays" },
{ "data": "selectedDates" },
{ "data": "selectedMonths" },
{ "data": "timeRange" },
{
"data": null,
"render": function (data) {
if (buttonclicked == 'Modify') { // Displays the radio button when 'Mod' clicked
return '<label class="c-radio" style="margin-bottom: 0px">'
+ '<input type="radio" name="existingRuleActionRadioButton" value="option1">'
+ '<span class="fa fa-check"></span>'
+ '</label>';
} else if (buttonclicked == 'Delete') { // Displays the delete button when 'Del' clicked
return '<button name="deleteRuleButton" class="btn btn-danger" id="' + data.position + '">'
+ '<i class="fa fa-trash-o" style="font-size: large"></i>'
+ '</button>';
} else {
return ''; // Needed for the 'Add' button click
}
}
},
],
"createdRow": function (row, data, dataIndex) {
if (data.startTime == 'Anytime') {
$('td:eq(1)', row).attr('colspan', 2).css('text-align', 'center').html('All day'); // Adds COLSPAN attribute, centers the wording and changes it from 'Anytime'
$('td:eq(2)', row).css('display', 'none'); // Hides cell next to the cell with COLSPAN attribute
}
if (data.timeRange == '-w') {
$('td:eq(6)', row).html('Working hours'); // Changes text returned by JSON if '-w'
} else if (data.timeRange == '-oo') {
$('td:eq(6)', row).html('Out of office hours'); // Changes text returned by JSON if '-oo'
}
},
"destroy": true,
});我试过下面的方法，但不太确定在哪里添加它，因为我说我是新手，还在学习DataTables，所以我试着将它添加到createdRow部分，但它不起作用
$.fn.dataTableExt.oApi.fnPagingInfo = function ( oSettings ) {
return {
"iStart": oSettings._iDisplayStart,
"iEnd": oSettings.fnDisplayEnd(),
"iLength": oSettings._iDisplayLength,
"iTotal": oSettings.fnRecordsTotal(),
"iFilteredTotal": oSettings.fnRecordsDisplay(),
"iPage": Math.ceil( oSettings._iDisplayStart / oSettings._iDisplayLength ),
"iTotalPages": Math.ceil( oSettings.fnRecordsDisplay() / oSettings._iDisplayLength )
};
}
$.extend(true, $.fn.dataTable.defaults, {
"fncheckPage": function() {
var Page = this.fnPagingInfo().iPage;
if ((+Page + +1) == this.fnPagingInfo().iTotalPages)
$('#existingRulesDataTable tr:last').find("[name='deleteRuleButton']").hide();
}
});无论数据返回1条还是100条记录，我都需要删除最后一个button。下面的屏幕显示有2pg，我需要button隐藏在最后一个row的pg2上，但显示在第一页的最后一个row上，所以为什么css不适合我
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-03-04 18:54:43
我建议您在获得表中的最后一个条目时，不要隐藏'delete‘按钮(从用户的角度来看，这看起来很尴尬)，而是禁用它。
这是我的观点的例子(我相信，你会理解的)：
//table data
const srcData = [
{name: 'apple', category: 'fruit'},
{name: 'banana', category: 'fruit'},
{name: 'carrot', category: 'vegie'},
{name: 'pineapple', category: 'fruit'},
{name: 'kiwi', category: 'fruit'},
];
//table initialization
const dataTable = $('#mytable').DataTable({
sDom: 'tp',
data: srcData,
ordering: false,
pageLength:3,
drawCallback: () => {
const table = $('#mytable').DataTable();
$(table.row(table.rows(':last')).node()).find('button').remove();
},
columns: [
{title: 'Name', data: 'name'},
{
title: 'Category',
data: 'category',
render: data => data+'<button class="del">x</button>'},
]
});
//'delete' button callback
$('#mytable').on('click', 'td button', function(){
dataTable.row($(this).closest('tr')).remove().draw();
});tbody td button {float:right}<!doctype html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
</head>
<body>
<table id="mytable"></table>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54980356
复制相关文章
相似问题
腾讯云开发者
