时间戳

首页 > 解决方案 > 隐藏数据表中最后一行的按钮 - JQuery

javascript - 隐藏数据表中最后一行的按钮 - JQuery

问题描述

我是新手DataTable，正在苦苦挣扎。在我的最后一列中，我有一个“删除”按钮，但我想将hide其用于“仅最后一行”。

我遇到的问题是我在挣扎，实际上不知道如何识别最后一行。

我认为下面的代码可能已经拉回了Data返回，但它没有。

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

也试过

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

以下是填充后Data我正在执行的部分功能和其他一些功能rowsData

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

我只需要这个button用于hidden最后一行

标签： javascriptjquerydatatables

解决方案

您可以使用 CSS 始终隐藏最后一行的按钮，这样您就无需确保在正确的时间调用任何其他 javascript。

#tableId tr:last-child button

如果最后一行有多个按钮，则可以使用 eg 来识别它，.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>

推荐阅读