jQuery DataTablesでUI Sortableのドラッグ&ドロップした後でcell.index()を更新する方法

プログラミング

DataTablesは、表を扱うのにとても便利なjQueryのライブラリです。

DataTablesについては以下にまとめました。

日本語対応jQuery DataTablesのfixedColumnsを使って、Excelのウィンドウ枠風(Freeze Panes)の表を作る
JavaScriptで表を作るならjQueryのDataTablesがとにかく便利です。 これを使うようになっ...

DataTablesとjQuery UI Sortableを使うと簡単に表を作成して、行のドラッグ&ドロップが出来るようになります。

JavaScriptで1つのテーブルの行をドラッグ&ドロップで変更したとき、同時に別のテーブルの行も変更する
HTMLで2つのテーブルを作ったとします。 JavaScriptで1つのテーブルの行をドラッグ&ドロップできる...

今回、

jQuery DataTablesでUI Sortableのドラッグ&ドロップした後でcell.index()を更新する方法をまとめました。

スポンサーリンク
スポンサーリンク

DataTablesのjQuery UI Sortableによるドラッグ&ドロップの問題点

jQuery UI Sortableを使った行のドラッグ&ドロップについて課題が2点あります。

課題 1.

ドラッグ&ドロップはJavaScriptで行っているために、ブラウザをリロードすると元に戻ってしまう。

当たり前ですが、並び順を保存しないと意味がありません。

解決するには、UI Sortableでドラッグ&ドロップ後に、サーバー側のデータベースにも結果を反映する必要があります。

課題 2.

ドラッグ&ドロップはjQuery UI Sortableで行っているために、DataTablesのcell.index()までは更新されていない。

そのため、キーボードの矢印キーイベントでフォーカス行を動かそうとすると、正しく行がフォーカスされない。

例えば、4行目を2行目にドラッグ&ドロップします。

前                 →            後
1行目            →            1行目
2行目            →            4行目
3行目            →            2行目
4行目            →            3行目
5行目            →            5行目

ドラッグ&ドロップ後で、1行目を選択してキーボードの↓キーを押すと、4行目ではなくて2行目がフォーカスされます。

これはキーイベントがDataTablesのcell.index()を使っているためです。

この課題を解決するには、cell.index()を更新する必要があります。

当初は、DataTablesのRowReorderというライブラリで解決できるかと思ったのですが、無理でした。

DataTablesのRowReorderを使ってみた
JQueryのDataTablesで、RowReorderというライブラリを使ってみました。 Data...

そこで、Reorderは使わずに、これらの課題を解決したいと思います。

DataTablesでドラッグ&ドロップした後の処理改善

以下の2点を改善します。

  • DataTablesでドラッグ&ドロップ後で並び順を保存する
  • DataTablesでドラッグ&ドロップ後でcell.index()を更新する

各行のユニークキーと1行目から順に1から始まるソートキーを紐づけます。

各行はソートキーでソートします。

当然、データベースにもこの値を持つし、PHP側ではこの値でソートして表示します。

前  unique_key sort_key      →            後  unique_key sort_key
1行目      101      1            →              1行目      101      1
2行目      102      2            →              4行目      104      2
3行目      103      3            →              2行目      102      3
4行目      104      4            →              3行目      103      4
5行目      105      5            →              5行目      105      5

HTMLのソースサンプル

ユニークキーを3列目に入れておきます。

JavaScriptのソースサンプル

stop: function()以降が改善コードです。

この改善コードがなくても、見た目はドラッグ&ドロップできますが、サーバー側に更新された情報が反映されないために意味がありません。

ドラッグ&ドロップした後でユニークキーの入ったセルの配列を用意してサーバー側を呼び出します。

呼び出す際には、クロスサイトリクエストフォージャリトークンを付けます。

LaravelでJavaScriptからPostするにはCSRFトークンが必要
LaravelでJavaScriptからポストした際に出たエラーの整理です。 Failed to load res...

改善コードの場合、以下のURLが呼び出されるので、その関数の中で配列からユニークキー値を引き出します。

http://(localhost)/sorted_tb_sites

また、ドラッグ&ドロップ後のcell.index()の更新には、以下のメソッドを使用します。

ichiran_table.row(newPosition).data(ichiran_table_insertedRow).draw(false);

選択した行に値を入れるところは以下のサンプルを参考にしました。

JSFiddle

プログラミングの無料レッスン体験

約8,000名の受講生と80社以上の導入実績のあるプログラミングやWebデザインのオンラインマンツーマンレッスンCodecamp

<Codecampの特徴>

1 現役エンジニアによる指導

2オンラインでのマンツーマン形式の講義

3大手企業にも導入されている実践的なカリキュラム

↓無料体験レッスン実施中です。

プログラミングのオンラインスクールCodeCamp