jQuery DataTables: hide 'delete' button for the last row

后端未结

关注

 1  1747

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 las

相关标签:

1条回答

误落风尘

2021-01-27 18:30

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>

0 讨论(0)