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

シェアする

  • このエントリーをはてなブックマークに追加

datatables_thumb.jpg

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

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

program
JavaScriptで表を作るならjQueryのDataTablesがとにかく便利です。これを使うようになってからまともに、th,tr,tdなどを使って表を作ら...

 

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

javascript
HTMLで2つのテーブルを作ったとします。JavaScriptで1つのテーブルの行をドラッグ&ドロップできるようにします。この際に、1つのテーブルで行の場所をド...

 

 

スポンサードリンク

DataTablesのドラッグ&ドロップの問題点

 

この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というライブラリで解決できるかと思ったのですが、無理でした。

program
JQueryのDataTablesで、RowReorderというライブラリを使ってみました。DataTablesについては以下にまとめています。http://u...

 

そこで、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-logo
LaravelでJavaScriptからポストした際に出たエラーの整理です。Failedtoloadresource:theserverrespondedwit...

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

http://(localhost)/sorted_tb_sites

 

 

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

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

 

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

JSFiddle

 

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です