1

そのため、ページネーションを備えた dataTables プラグインの実装があります。テーブル内の任意の行をクリックすると、ブートストラップ モーダルが表示されるようにします。これまでのところ、最初のページの行をクリックするとモーダルが機能します。しかし、次のページに移動すると、どの行もクリックできません。

これは私がこれまでに持っているものです:

    $(document).ready(function() {
        $("tr").click(function(){
            $('#myModal').modal('show');
        });
    });

これは DataTables API 関数を使用して行うことができると感じていますが、経験不足が足を引っ張っています。これを行う最も簡単な方法は何ですか？

4

3 に答える 3

2

このページの fnGetData の例を見てください。

http://www.datatables.net/api

  // Row data
$(document).ready(function() {
  oTable = $('#example').dataTable();

  oTable.$('tr').click( function () {
    var data = oTable.fnGetData( this );
    // populate your modal with the data from data variable which is the data that the row contains
    //show your modal
  } );
} );

モーダルにデータを保存して閉じるときは、データテーブルをリロードするだけです...

あなたは本当にAPIドキュメントを見る必要があります.すべてがそこにあります..本当に

于 2013-02-27T16:55:58.923 に答える
0

誰も最終的な回答を実際に投稿していないので、同じ問題があったため、これをフォローアップしています。 

COS.coupon.table_columns_titles = new Array();
COS.coupon.table_columns_titles.push({"sTitle": "Code"});
COS.coupon.table_columns_titles.push({"sTitle": "Status"});
COS.coupon.table_columns_titles.push({"sTitle": "Date"});
COS.coupon.table_columns_titles.push({"sTitle": "","sClass": "hide"});

$j('#listcoupons').dataTable({
  "bProcessing":true,
  'bJQueryUI': true,
  'sPaginationType': 'full_numbers',
  'oLanguage': {'sSearch': 'Filter:', 'sEmptyTable': 'Processing...'},
  'aoColumns': COS.coupon.table_columns_titles,
  "sScrollX": "100%",
  "iDisplayLength": 10,
  "bAutoWidth": false
});

...

// So this is the on click. I'm referencing the tbody because it's there
// throughout all the pagination.
$j("table#listcoupons tbody").on("click", function(event) {

...

// This is how I'm refering the specific item I wanted.
// Then I do get the id from the hidden column.
  $j(event.target).closest('tr').children('td').eq(1).text()

クリックイベント全体はこんな感じです。

$j("table#listcoupons tbody").on("click", function(event) {
    if ($j(event.target).closest('tr').children('td').eq(1).text() == 'Used') {
      // do some stuff/show a dialog
    } else {
      // do some other stuff/show a different dialog
    }
  });
于 2013-11-26T21:25:19.040 に答える