javascript - 为什么我只能删除数据表中的某些行？ (jquery)

Question

我正在使用 datatables.js 脚本，并用从 json 中获取的数据填充我的表。一切都很顺利，但是有一个问题我不明白。我表中的每一行都有一个 remove 链接定义为:

$.each(json, function(i, v) {
   var row = table.row.add([v.number, v.id, v.price, v.date, '<a>remove</a>']);
   table.cells( { row : row.index(), column : 4 }).nodes().to$().find('a')
      .attr('href', '#')
      .addClass('show-details')
      .css('cursor', 'pointer')
      .data('id', v.hidden)
      .data('v', v)   
      .on('click', function() {
            var v = $(this).data('v');
            console.dir(v);
       row.remove();
            table.draw();           
      })
   table.draw();
})

它在某些情况下有效，但在某些情况下却无效。我无法一个接一个地删除所有行。总是剩下一个。这是怎么回事？

您可以在我的 fiddle 中看到这种行为:http://jsfiddle.net/2wujw71x/15/

Answer 1

问题是每次您通过调用 row.remove() 删除一行时，它都会使用索引删除该行。因此，如果您随机删除行，索引就会困惑。 (在这里查看我的意思:http://jsfiddle.net/2wujw71x/16/)。

删除行的最佳方法是定位最近的 tr 元素，然后使用 draw() 调用 remove()。

var table = $('#dataTables-example').DataTable({
                responsive: true
        });   

var data = '[{"number":"1","id":"2","price":"100.70","date":"2015-10-18 03:00:00","hidden":"21"},{"number":"2","id":"2","price":"88.20","date":"2015-10-18 04:00:00","hidden":"22"},{"number":"3","id":"3","price":"120.70","date":"2015-10-18 07:00:00","hidden":"23"},{"number":"4","id":"4","price":"1021.70","date":"2015-10-18 01:00:00","hidden":"21"}]';

json = JSON.parse(data);

$.each(json, function(i, v) {
   var row = table.row.add([v.number, v.id, v.price, v.date, '<a>remove</a>']);
   table.cells( { row : row.index(), column : 4 }).nodes().to$().find('a')
      .attr('href', '#')
      .addClass('show-details')
      .css('cursor', 'pointer')
      .data('id', v.hidden)
      .data('v', v)   
      .on('click', function() {    
      var v = $(this).data('v');  
      table.row($(this).closest("tr").get(0)).remove().draw();
            console.dir(v);         
      })
   table.draw();
})

固定在这里:http://jsfiddle.net/2wujw71x/17/