为什么我只能删除数据表中的一些行？ （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();
})

它在某些情况下有效，但在某些情况下 - 它并不适用。我无法一个接一个地删除所有行。总有一个人离开了。这里发生了什么？

你可以在我的小提琴中看到这种行为：http://jsfiddle.net/2wujw71x/15/

Answer 1

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

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

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/