jQuery DataTables での行指定追加について

Question

前提・実現したいこと

複数のテーブルの情報をドラッグアンドドロップで移動させたい、との要望を受けました。

jQuery の DataTables を元々使用しており、検索とスクロールを行ってました。

要望のために jQuery Ui の Sortable の使用を勧められて組み込んだのですが、行を指定しての追加がわからず、四苦八苦しております…。

行を指定した追加ができれば嬉しいですが、そのほかの解決方法もございましたらご意見いただければ幸いです。

発生している問題・エラーメッセージ

jQuery Ui の Sortable での追加の際、DataTables に対し「row().add()」を使用すれば最下部に追加されることは確認できました。

ただ、「row().data()」で追加すると元あったtr情報に上書きされてしまうため、使用不可となりました...。

該当のソースコード

以下のソースは「table_b」から「table_a」への移動の際に使用するソースです。
何とかこの中で解決したいと思っております...。

  $("#table_a tbody").sortable({
    //別の要素が到着したとき
    receive : function( event, ui ) {
      var table_A = $('#table_a').DataTable();
      var table_B = $('#table_b').DataTable();

      //ドラッグデータのtr情報を取得
      var row = table_B.row( $(ui.item).closest('tr') );
      var data = row.data();

      //他テーブルで存在しない情報を追加
      data[x] = '<input type="text">';

      //元データ削除
      row.remove().draw();

      //行指定不可...
      table_A.row.add(data).draw();
    }
  });

試したこと

      //行指定不可...
      //table_A.row.add(data).draw();
      table_A.row(ui.item.index()).data(data).draw();  //指定の位置に入るが、元あったtr情報は削除される...

      //行指定不可...
      //table_A.row.add(data).draw();
      table_A.row(ui.item.index()).add(data).draw();  //row() に add() function がないエラーが発生する...

補足情報（FW/ツールのバージョンなど）

jQuery 3.3.1
jQuery Ui 1.12.1
jQuery DataTables 1.10.18

Answer 1

位置を指定してデータを差し込めそうなものですが、調べてみても方法が見つけられず。。。

妥協策として、一番下に追加したものを自力で移動させるのではどうでしょうか・・？

DataTablesの使い方とか、Soratbleの使い方とかが詳しく書いてなかったので、
分かる範囲の最低限の設定で、、、こんな感じにしてみました。

<table id="table_a">
<thead>
<tr><th>1列目</th><th>2列目</th></tr>
</thead>
<tbody>
<tr><td>A1</td><td>a1a1a1</td></tr>
<tr><td>A2</td><td>a2a2a2</td></tr>
<tr><td>A3</td><td>a3a3a3</td></tr>
</tbody>
</table>
<table id="table_b">
<thead>
<tr><th>1列目</th><th>2列目</th></tr>
</thead>
<tbody>
<tr><td>B1</td><td>b1b1b1</td></tr>
<tr><td>B2</td><td>b2b2b2</td></tr>
<tr><td>B3</td><td>b3b3b3</td></tr>
</tbody>
</table>

<script >
var dt_options = { lengthChange: false, ordering: false, paging: false};
var table_A = $('#table_a').DataTable(dt_options);
var table_B = $('#table_b').DataTable(dt_options);
$("#table_a tbody").sortable({
	//別の要素が到着したとき
	receive : function( event, ui ) {
		var row = table_B.row($(ui.item).closest('tr'));
		var data = row.data();
		row.remove().draw();
		table_A.row.add(data);
		
		//挿入場所
		var insert_idx = ui.item.index();
		//データの総数
		var data_cnt = table_A.rows().indexes().length;
		
		var insert_data = false; //移動させるデータの入れ物

		//下から順に、自分の下の行のデータを上書き
		for(i=data_cnt - 1; i>=insert_idx; i--){
			var now_data = table_A.row(i).data();
			if(insert_data){
				table_A.row(i+1).data(now_data);
			}else{
				//最初（一番下）は移動させたいデータ行なので入れ物に入れるだけ
				insert_data = now_data;
			}
		}
		//挿入位置に移動させる
		table_A.row(insert_idx).data(insert_data).draw();
	}
});
$("#table_b tbody").sortable({ connectWith : '#table_a tbody' });
</script>

回答に書いておいてなんですが、数千行あるテーブルだと、ブラウザが固まりそう。。。^^;

Comments

[arcrista_qg]

ご回答、ありがとうございます！
「一番下に追加したものを自力で移動させる」の考え方を元にカスタマイズをしまして、実装ができました！