Rails(turbolink) x JQuery x DataTableでバックボタンを押すとボタンが重複する時の対策

2021/5/3 2021/5/3 書き溜め

Turbolinkって便利だよね。
でも、Jquery等で提供されるライブラリ機能によっては相性が悪い時も多々あり
悩まされるケースに直面する人もいることだろう。

Jqueryが提供しているDataTableを使用していると
ブラウザの戻るボタンで、ページング要素がリセットされず複製されてしまう問題がある。

Trubolinkが原因ではあるが、対応方法を書き溜めておく。

解決策

turbolinks:before-cacheで
すでにDatatableが存在していれば、削除する処理を追加する。

<script>
  var dataTable = $('#appTable').DataTable();
  document.addEventListener("turbolinks:before-cache", function() {
    if (dataTable !== null) {
     dataTable.destroy();
     dataTable = null;
    }   
  }); 
</script>

var dataTable = $('#appTable').DataTable();

document.addEventListener("turbolinks:before-cache", function() {

if (dataTable !== null) {

dataTable.destroy();

dataTable = null;

}

});

</script>

これだけ、
DataTableの初期化はその後に追加すればok

<script>
  var dataTable = $('#appTable').DataTable();
  document.addEventListener("turbolinks:before-cache", function() {
    if (dataTable !== null) {
     dataTable.destroy();
     dataTable = null;
    }   
  });

  $(document).on('turbolinks:load', function () {
    $('#appTable').DataTable({
      "pageLength": 25, 
      "retrieve": true,  
    }); 
  }); 
</script>

var dataTable = $('#appTable').DataTable();

document.addEventListener("turbolinks:before-cache", function() {

if (dataTable !== null) {

dataTable.destroy();

dataTable = null;

}

});

$(document).on('turbolinks:load', function () {

$('#appTable').DataTable({

"pageLength": 25,

"retrieve": true,

});

</script>

ちなみに

リンクでは$(document).ready(function ()となっているけど
railsのturbolinkでは動作しないので $(document).on('turbolinks:load', function () {とかにすること。

Turbolinkいいやつだけど、
たまにドツボにはまる。

じゃあね〜〜。