datatableでCSVダウンロードボタンを検索要素の隣に配置する

完成系

See the Pen Untitled by 10K (@10JII_K) on CodePen.

おことわり

jQueryは必要最低限で利用します。

使用ライブラリ

• jQuery v3.7.1
• datatables v2.0.8
• datatables Buttons v3.0.2

説明

ボタンを作る

以下のCDNが必要になります。

linkとかで入れる

https://code.jquery.com/jquery-3.7.1.js
https://cdn.datatables.net/2.0.8/js/dataTables.js
https://cdn.datatables.net/buttons/3.0.2/js/dataTables.buttons.min.js
https://cdn.datatables.net/buttons/3.0.2/js/buttons.html5.min.js
https://cdn.datatables.net/buttons/3.0.2/js/buttons.print.min.js
https://cdn.datatables.net/buttons/3.0.2/js/buttons.colVis.min.js // <- これいらないかも

datatablesのインスタンス化

ついでに日本語対応もする

// テーブルの初期化
const table = new DataTable('#datatables', {
  language: {
    url: "https://cdn.datatables.net/plug-ins/2.0.7/i18n/ja.json"
  },
});

datatablesは、上下左右の角に検索ボックスやページネーションなどの機能を配置できますが、左上のスペースにボタンを配置するなら、以下のようになります。

コピーボタンを追加

const table = new DataTable('#datatables', {
  language: {
    url: "https://cdn.datatables.net/plug-ins/2.0.7/i18n/ja.json"
  },
  layout: {
    topStart: {
      buttons: [
        'csv'
      ]
    }
  }
});

ボタンをインスタンス化によって作るようにする

しかし上記のインスタンスプロパティを指定する方法では位置調整ができないです。
なので、datatablesの拡張機能 DataTable.Buttons を使用して、ボタンをインスタンス化する方法で調整します。

DataTable.Buttons

const buttons = new DataTable.Buttons(table, {
  buttons: [
    {
      extend: 'csv',
      text: 'CSVダウンロード',
    }
  ]
});

ボタンを配置する

DataTable.Buttons を使用してインスタンス化したボタンは、buttons().container() APIを使って、テーブルの付近（上下左右）以外にも配置できます。もちろん、上下左右の細かい配置も可能です。
ボタンのDOM要素を取得して、挿入したい場所に要素を挿入しましょう。ついでにボタンを横並びにするためのCSSを適応しましょう。

テーブルのCSSを変更し、検索ボックスの左にボタンを挿入する

table.buttons().container().css({
    'display':'inline-block',
    'margin-right':'8px'
  }).insertBefore('div.dt-search > label');

しかしこの設定をしてもボタンは表示されません。

init.dt イベントの完了後にボタンを挿入する

テーブルが完全に初期化され、データがロードされ、描画された後のタイミングでないと、テーブルにボタンを挿入することができません。（もともと <table>...</table> 要素しかないですしね）。
なので、全ての初期化、描画タイミングが終わったことを検知するイベント init.dt を使用して、ボタンを挿入したい位置に挿入しましょう。

init.dtで初期化検知する

table.on('init.dt', function() {
  table.buttons().container().css({
    'display':'inline-block',
    'margin-right':'8px'
  }).insertBefore('div.dt-search > label');
});

これによって、表題の要件を満たすことができました。