0

簡単な解決策があるといいのですが、興味深い問題があります。jQuery Datatables プラグイン (datatables.net) を使用しており、ページングを完全な数字に設定しています。私の行には、クリックするとjQuery機能を実行する削除ボタンがあります。この関数は、単に外部ソースを呼び出してデータベース内の削除を処理し、.remove() を使用して UI から行を削除します。

ページングを使用するまで、これは問題なく機能します。10 を超えるレコードがあり、クリックして次のページに移動すると、機能しなくなります。ここにいくつかのコードがあります：

jQuery('.deleterecord').click(function(){
    var conf = confirm('Continue delete?');
        if(conf)
            jQuery(this).parents('tr').fadeOut(function(){
            jQuery(this).remove();
            jQuery.jGrowl("Record has been removed!");
        });

    return false;
 });

だから私は行にリンクを持っています:

<a class="deleterecord">Delete</a>

これにより、クリック関数が呼び出されます。したがって、テーブルのページングで次のページをクリックした場合、この機能を再び機能させる唯一の方法は、ページを記憶するために Cookie を有効にしてページを更新することです。

私が望むアイデアはありますか??? :(

4

1 に答える 1

0

Datatables には、行を削除する組み込み関数fnDeleteRow (documentation-link) があります。これにより、ページネーションの正しい状態が処理され、さらに重要なことに、プラグイン自体内の実際のデータが処理されます。

お見せするために、jsBin で小さな例を作成しました。

例の 1 つのマークアップを使用したため、少し乱雑に見える場合があります。

したがって、基本的には、クリック ハンドラーを行にバインドし、イベントを td に委任します。ボタンで同じことを行うことができます。.centerハンドラーの を に変更して.deleterecord、デフォルト イベントを防止します。

唯一の違いは、deleteRow 関数に必要な行の実際の ID を取得するためthisに呼び出すときに使用される変数です。ボタンではなく - 要素を渡すには、fnGetPositionおそらく代わりに次のようなものを使用する必要があります。$(this).parent()[0]td

これは、ハンドラーのコードと、完全を期すための datatables-plugin の init-call です。

  $('#example tbody tr').on('click', '.center', function () {
    var aPos = oTable.fnGetPosition(this);
    oTable.fnDeleteRow(aPos[0]);
  });

  // Init DataTables
  oTable = $('#example').dataTable({
    "sPaginationType": "full_numbers"
  });

サーバーが肯定的な結果を返した場合、ハンドラー内で ajax を開始する必要があります。データベースを呼び出して正しい行を削除し、コールバックでこのコード スニペットを実行します。

于 2013-02-19T00:39:26.583 に答える