2011-07-29 9 views
5

VBのDataGridのように、jQueryのデータ型で最初の列に行番号の列を自動的に作成します。jqueryデータ型に行番号の列を追加する

それは次のようになります。

enter image description here

誰もがこれを行う方法を知っていますか?

+0

どのようにデータテーブルをロードしていますか?いくつかのコードを表示 – naveen

+0

あなたが必要とするのは、(jsonまたは配列のいずれかの)結果を数え、それを繰り返してシーケンス番号を生成し、それを他の結果データと一緒に構築することです。 – toopay

答えて

10

aoColumnsに空の列を定義するだけです。

fnRowCallback関数では、好きなように列を編集するだけです。このコールバックは、新しい行が作成されるたびに実行されます。

Basiclyあなたの最初の列は、行番号を持っている場合、あなただけのfnRowCallbackでこれを行うことができます:ちょうどレンダリング関数を記述

var index = iDisplayIndex +1; 
$('td:eq(0)',nRow).html(index); 
return nRow; 
+0

thx、私はそれを試して、それは成功だった:D 今、どのように最初のcoloumnをソートできないのですか? – Xinez

+1

ああ、それは方法が成功したようだが、私はdatablesのページ番号を変更すると、行番号は1から、最後のページまでそれを連続番号にする方法は? – Xinez

+0

ああ、だからあなたは使いたい:iDisplayIndexFull :) – Pehmolelu

16

{ 
    "data": "id", 
    render: function (data, type, row, meta) { 
     return meta.row + meta.settings._iDisplayStart + 1; 
    } 
} 
+0

それは素敵です&きれいな(; –

+0

これは最高のソリューションのように聞こえましたしかし、私が列を並べ替えるとすぐに、数字が混乱してしまいます –

1

私がコメントしたよう、両方@Pehmoleluと@大王の答えは私のためにうまくいきませんでした。私は、DataTablesのIndex Columnの助言を受けなければなりませんでした。https://datatables.net/examples/api/counter_columns.html

私の場合、私のWebアプリケーションサーバーのAPI呼び出しによって列の設定さえも下がっていることに注意してください。 )、このカウンター列の前に3つのシステム列があるため、列インデックスは3ですが、ニーズに合わせて調整する必要があります。あなたのソリューションは、私のような複雑なものではない場合

t.on('order.dt search.dt', function() { 
    t.column(3, {search:'applied', order:'applied'}).nodes().each(function (cell, i) { 
     cell.innerHTML = i+1; 
    }); 
}).draw(); 

また、また、上記のリンクは、あなたが(あなたがあなたのニーズに列インデックスを調整する必要があり、再び)unsortable +検索不可能な方法でその列を追加する方法を示しています。

var t = $('#example').DataTable({ 
    "columnDefs": [{ 
     "searchable": false, 
     "orderable": false, 
     "targets": 3 
    }], 
    "order": [[4, 'asc']] 
}); 

独自のコードの代わりに活用したいプラグインもあります。

関連する問題