Datatables用のシリアル番号を追加(1.10 新実装)

クズども · 掲載地 2017/11/14 13:52:30

JQueryのDatatablesプラグインはテーブル作成に非常に優れています。

テーブルにシリアル番号を追加するのは簡単だと思っていましたが、Datatablesの公式実装を読んでみると、コードが単純ではなく、テストでいくつかの問題が見つかり、使いやすさが感じられませんでした。インターネットで良い解決策が見つからなかったので、コードをたどって自分で方法を見つけました。

シリアル番号の実装(便利な非公式実装)
列データは関数になり得るので、パラメータ内のデータを見てください。実際、有用なデータが見つかり、作業を始めました。

コードは以下の通りです:

ログインが見えます。

ポイントは次の文です
meta.settings._iDisplayStart + meta.row + 1;
分析の結果、以下のことが分かっています:
meta.settings._iDisplayStart 各レコードの開始索引が表示されました;
meta.row+1は現在のページの行インデックスで、1は行番号です。
この2つの合計が当時の行番号となります。

この方法は公式に提供されているわけでも推奨もしていませんが、表示されたデータをデータとして扱う方が直感的でコストも安いと思います。

クヴェルチュ · 掲載地 2017/11/14 14:44:37

クズども · 掲載地 2018/03/08 14:25:32

名前	種類	形容
ドロー	整数JS	リクエスト数はカウンターされ、サーバーに送信されるたびにそのまま返されます。
開始	整数JS	例えば、最初のデータ片の開始位置は0を表します
長さ	整数JS	ページあたりに表示されるアイテム数。
検索[値]	stringJS	各列のグローバル検索条件(検索可能をtrueに設定する必要があります)
検索[正則表現]	booleanJS	もし真なら、グローバル探索の値が正規表現として処理されていることを意味し、偽ならそうではありません。
秩序[列]	整数JS	iは列に対応する配列インデックスで、0から始まります。サブパラメータはどの列をソートすべきかを示します
秩序[監督]	stringJS	列は上で決定され、この列のソート方法は降格です
柱[データ]	stringJS	columnsbindingは、columns.dataによって定義されます
柱[名前]	stringJS	columns.name
柱[検索可能]	booleanJS	タグ付きの列がtrueに検索できるかどうかは「はい」を意味し、そうでなければできません。これはcolumns.searchableによって制御されます
柱[注文可能]	booleanJS	タグ付きの列がtrueに並べられるかどうかは「はい」を意味し、そうでなければ「いいえ」となります。これはcolumns.orderablによって制御されます
柱[検索][値]	stringJS	特定の列の検索条件
柱[検索][正則表現]	booleanJS	特定の列の検索条件が正則表現とみなされるかどうか

[Jquery] Datatables用のシリアル番号を追加(1.10 新実装)

関連記事

閲覧したセクション