從數據表的最后一行隱藏按鈕-JQuery

Question

我是DataTable新手，正在苦苦掙扎。 在我的最后一欄中，我有一個“刪除”按鈕，但我想為“僅最后一行” hide它。

我遇到的問題是我很掙扎，實際上不知道如何識別最后一行。

我以為下面的代碼可能可以拉回返回的Data但事實並非如此。

var rowData = $('#existingRulesDataTable').DataTable().rows('.row:last' ).data();

也嘗試過

var rowData = $('#existingRulesDataTable').rows( '.row:last' ).data();

下面是Data一部分以及rows中填充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'
                }

                var rowData = $('#existingRulesDataTable').DataTable().rows('.row:last' ).data();
                //var rowData = $('#existingRulesDataTable').rows( '.row:last' ).data();

                alert('rowData: ' + rowData.position)
            },

我要隱藏的按鈕是columns的部分

 return '<button name="deleteRuleButton"

我只需要在最后一行hidden此button

Answer 1

您可以使用CSS始終隱藏最后一行的按鈕，這省去了確保在正確的時間調用任何其他JavaScript的麻煩。

#tableId tr:last-child button

如果最后一行上有多個按鈕，則可以用.btn.btn-danger標識它，或者給它一個更明確的類，或者使用[name=deleteRuleButton]

使用CSS的示例：

 #existingRulesDataTable tr:last-child button { display:none; } 

 <table id='existingRulesDataTable'> <tbody> <tr><td>Row 1</td><td><button>del</button></td></tr> <tr><td>Row 2</td><td><button>del</button></td></tr> <tr><td>Row 3</td><td><button>del</button></td></tr> </tbody> </table> 

Answer 2

使用tr:last查找具有name attribute按鈕並隱藏該按鈕。

$('#existingRulesDataTable tr:last').find("[name='deleteRuleButton']").hide(); //or you may use id or class when using find

注意：您必須在渲染數據表之后調用此函數。

根據評論編輯：

您可以使用自定義功能來擴展datatbale默認功能。 檢查是否為最后一頁，是否為最后一頁，請應用您的條件。

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

代碼檢查最后一頁服用從該如此答案，修改，按您的條件。