Я использую скрипт 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/
Проблема в том, что каждый раз, когда вы удаляете строку с помощью вызова row.remove()
, она удаляет строку с помощью index. Из-за этого, если вы удалите строки случайным образом, индекс испортится. (Проверьте здесь, что я имею в виду: 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/
Эта статья взята из Интернета, укажите источник при перепечатке.
Если есть какие-либо нарушения, пожалуйста, свяжитесь с[email protected] Удалить.
я говорю два предложения