jQuery DataTables: скрыть кнопку «Удалить» для последней строки

Question

У меня есть DataTable, который может возвращать несколько страниц в некоторых случаях.Каждая возвращенная строка отображает кнопку удаления, но что мне нужно, чтобы скрыть эту кнопку в самой последней возвращенной строке, будь то 1 стр. Или несколько, поэтому 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, скрывающиеся на pg 2 в последнем row НО, отображаемом для последних row на первой странице, поэтому, почему css не будет для меня

Answer 1

Могу ли я порекомендовать не скрывать кнопку «удалить», когда вы получили последнюю запись в вашей таблице (что будет выглядеть неудобно, с точки зрения пользователя), а вместо этого отключить это?

Вот примермоя точка зрения (я уверен, вы поймете идею):

//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>