我正在使用 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/
最佳答案
问题是每次您通过调用 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();
})
关于javascript - 为什么我只能删除数据表中的某些行? (jquery),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33641295/