8

ページにテーブルがあり、最後にいくつかの行とカスタムのトグルボタンがあります。テーブルは、json経由ではなく、ページ内のhtml経由で読み込まれます。

これで、最後のトグルボタンがサービスにポストし、データベース内のそのレコードのフォロー状態を設定します。

ただし、その行の別のセルも更新する必要があります。ただし、これを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;
});

手動の例： フィールドを手動で変更する例がありますが、これは視覚的なものであり、データテーブルは引き続き内部データを使用して並べ替えます。だから私はそれをより良くする方法を探しています

4

1 に答える 1

15

考えられる解決策は次のとおりです。

コードに加えて、次のようにデータテーブルデータを更新する必要があります

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
于 2012-12-03T12:00:36.327 に答える