Удалить только те строки, конкретное поле которых пусто - PullRequest
0 голосов
/ 03 мая 2019

В моем DataTable я хочу удалить строки, в которых определенное поле пусто, когда пользователь щелкает значок порядка в этом столбце.

В этом примере я хочу удалить 'John' и упорядочитьстолбец, когда пользователь нажимает «Город»:

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

Как убрать строки и упорядочить столбец одним щелчком мыши?

1 Ответ

1 голос
/ 03 мая 2019

Если вам нужно, чтобы записи с пустым полем 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...