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

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

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

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

$('#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 все еще использует свои внутренние данные для сортировки. Поэтому я ищу способ сделать это лучше

1 ответов


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

в дополнение к вашему коду вы должны обновить данные 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