爲什麼我只能刪除我的數據表中的一些行？ （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元素，然後使用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/