jQuery DataTables: hide 'delete' button fo

Question

I have a DataTable which can return multiple pages in some cases. Each row returned, displays a delete button but what i need it to hide this button on the very last row returned, whether 1 pg or multiple so css cant be used in this.

I have no idea how to implement this as DataTables are new to me

Below is my current code i have which is working fine except for the hiding of the button, hope you can and show my how to implement this

// 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,
});

I have tried the below but not too sure where to add it, as i said i'm new and still learning about DataTables so i tried adding this to the createdRow section but it didn't work

$.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();
    }
});

Whether the data returns 1 or 100 records, i need the last button to be removed. The screen below shows that there are 2pg's which i need the button hiding on pg 2 in the last row BUT displayed for the last row on the first page hence why css wont wont for me

Answer 1

May I recommend not to hide 'delete' button, when you got the last entry in your table (which will look awkward, from user standpoint), but rather to disable that?

Here's the example of my point (I'm sure, you'll grasp the idea):

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