Question

我有一个DataTable，在某些情况下可以返回多页。返回的每一行都显示一个删除按钮，但是我需要它在返回的最后一行上隐藏此按钮，无论是1 pg还是多个，所以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隐藏在第一页最后row所显示的最后row的pg 2上，因此为什么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>

jQuery DataTables：在最后一行隐藏“删除”按钮

1 个答案: