Find Last Data Row Returned And Hide A Button

murday1983

I am completely new to DataTables of which 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

    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,
        "searching": false, 
        "paging": true, 
        "info": false,
        "pagingType": 'simple_numbers',
        "pageLength": 10,
        "dom": '<"top"f>rt<"bottom"lp><"clear">',
        "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
        "fnDrawCallback": function () {
            if ($('#existingRulesDataTable').DataTable().rows().count() < 11) {
                $("div[class='bottom']").hide();
            } else {
                $("div[class='bottom']").show();
            }
        },
        'ajax': {
            "type": 'GET',
            "url": "js/dataTable.json", 
            "data": function (data) {
                return data;
            },
            "dataSrc": function(res){
                existingRuleTableCount = res.data.length;
                return res.data;
            }
        },
        "columns": [  
            { "data": "position" },
            { "data": "startTime" },
            { "data": "endTime" },
            { "data": "selectedDays" },
            { "data": "selectedDates" },
            { "data": "selectedMonths" },
            { "data": "timeRange" },
            {
                "data": null,
                "render": function (data) {
                    if (buttonclicked == 'Modify') {
                        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') { 
                        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');
            }
    
            if (data.timeRange == '-w') {
                $('td:eq(6)', row).html('Working hours');
            } else if (data.timeRange == '-oo') {
                $('td:eq(6)', row).html('Out of office hours');
            }
        },
        "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 and as such do not know if its what i need or not as i cant get it working due to lack of knowledge.

    $.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 row returned on the last page only to 'hide' the delete button or modify radio button

colin

Hi @murday1983 ,

You could do this in the createdRow callback - if the dataIndex is the last row (as you're not ordering, this is fair to use), then just blank out that button.

Cheers,

Colin

murday1983

Hi @colin

As i said i'm new to DataTables so not entirely sure on syntax to use to find the last row returned in the data, any possibility you could help me out with it please

murday1983

Also using the below doe now but cant edit my post. The Console.Log does return the data for the last row but the line below doesnt work at all as get a 'TypeError: existingRuleTable.row(...).css is not a function' error

"initComplete": function (dataIndex) {
            if (buttonclicked == 'Delete') {
                $('button[name=deleteRuleButton').focus();
            } else if (buttonclicked == 'Modify') {
                $('input[name=existingRuleActionRadioButton').focus();
            }

            
            console.log( existingRuleTable.row(':last').data() )

            existingRuleTable.row(':last').css('color', 'red')
        },

colin

Hi @murday1983 ,

You could do something like this here. Your initComplete with :last got me thinking.

Hope that helps,

Cheers,

Colin

murday1983

Hi @colin

Thanks. The following worked perfect

 $(this.api().cell(':last', 7, {order:'original'}).node()).css('display', 'none');