仅删除特定字段为空的行

Question

在我的DataTable中，当用户单击某列的order图标时，我希望删除特定字段为空的行。

在本例中，我想删除'John‘，并在用户单击“City”时对列进行排序：

Name Sirname Gender City
Nick   S.      M    Rome
John   R.      M    
Mary   D.      F    London

这段代码可以工作，但前提是我单击两次DataTable的顺序图标。第一次命中，对列进行排序，第二次命中删除行。

var table = $('#datatable').DataTable();
$('#datatable').on( 'order.dt', function () {
    var order = table.order();
    var data = table.rows().data(); 

    if (order[0][0]== 3){
        if(data[0][3] == ''){
            table.row().remove().draw();
        }
    }
});

如何删除已触发的行并通过一次单击对列进行排序？

Answer 1

如果您需要在单击City列标题时永久删除具有空字段city的条目，我建议使用以下解决方案：

​

const srcData = [
  {name: 'Nick', surname: 'S.', gender: 'M', city: 'Rome'},
  {name: 'John', surname: 'R.', gender: 'M', city: ''},
  {name: 'Mary', surname: 'D.', gender: 'F', city: 'London'},
  {name: 'George', surname: 'K.', gender: 'M', city: ''}
];

$('#mytable').DataTable({
  dom: 't',
  data: srcData,
  columns: ['name', 'surname', 'gender', 'city'].map(header => ({title: header, data: header}))
});

$('thead th').unbind('click').on('click', function(e){
  //grab the table and column being affected
  const table = $(this).closest('table').DataTable();
  const column = table.column($(this));
  //define sort order to set (default 'asc')
  const sortingOrder = $(this).hasClass('sorting_asc') ? 'desc' : 'asc';
  //remove entries where 'city' is empty if 4-th column is clicked
  if(column.index() == 3) {
    //get an array of indexes of 'bad' rows
    const badRows = [];
    table.rows().every(function(rowIndex){
      if(this.data().city == '') badRows.push(rowIndex);
    });
    //get those badRows removed
    table.rows(badRows).remove();
  }
  //do default action - sort table
  table.order([column.index(), sortingOrder]).draw();
}).on('mousedown', e => e.preventDefault());

<!doctype html>
<html>
<head>
  <script type="application/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script type="application/javascript" 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>

​