jquery datatables: обновить ячейку таблицы после нажатия кнопки

у нас есть таблица на нашей странице с несколькими строками и настраиваемой кнопкой-переключателем в конце. таблица загружается через html на странице, а не через json.

теперь переключатель в конце отправляет сообщение службе и устанавливает состояние отслеживания этой записи в базе данных.

однако он также должен обновить другую ячейку в этой строке. однако я уверен, что не должен делать это через jquery вручную, а через таблицы данных?

$('#tblFollow').dataTable({
    sDom: "t",
    aoColumns: [
      null,
      null,
      null,
      { bSortable: false }
    ]
});

$('#tblFollow').on('click', 'a.follow', function(e){
    $(this).toggleClass('active');

    // updating column 'following' here... 
    // but this only changes visually, and not the inner datatables data used for sorting
    var followingCell = $(this).parents('td').prev();
    var txt = followingCell.text() == "1" ? "0" : "1";
    followingCell.text(txt);

    return false;
});

пример вручную: теперь у меня есть пример, где я изменяю поля вручную, но это только визуально , datatable по-прежнему использует свои внутренние данные для сортировки. Поэтому я ищу способ сделать это лучше


jquery sorting datatables
person Sander    schedule 30.11.2012    source источник

Ответы (1)


arrow_upward
15
arrow_downward

Вот возможное решение:

В дополнение к вашему коду вы должны обновить данные datatables следующим образом

var rowIndex = table.fnGetPosition( $(this).closest('tr')[0] );
var aData = table.fnGetData( rowIndex  );
aData[2] = txt; //third column

Здесь jsfiddle

Еще лучшим решением будет использование fnUpdate для одновременного обновления данных и отображения.

Здесь jsfiddle

// update column following here... 
var followingCell = $(this).parents('td').prev();
var txt = followingCell.text() == "1" ? "0" : "1";

var rowIndex = table.fnGetPosition( $(this).closest('tr')[0] );
table.fnUpdate( txt, rowIndex , 2);

Тоже вместо нас

var followingCell = $(this).parents('td').prev();
var txt = followingCell.text() == "1" ? "0" : "1";

использовать

var aData = table.fnGetData( rowIndex  );
aData[2] //use it to check if the value is 0 or 1
person Daniel    schedule 03.12.2012
comment
это работает как шарм. извините за оптимизацию, которую вы сделали в конце, чтобы проверить значение на aData вместо текста ячейки, было не нужно, но интересно. Я использовал его только в своем примере jsFiddle... мой собственный код уже знал текст из свойств данных на кнопке. но я не хотел слишком усложнять jsFiddle. еще интересно. Спасибо. - person Sander; 04.12.2012
comment
Обратите внимание, это решение работает только с устаревшими таблицами данных. В dataTables 1.10.7 я использую table.cell(targetCellSelector).data("new text").draw();. - person Bohdan Kuts; 07.05.2015