###前提・実現したいこと
Datatablesを用いて、検索やページング、などができるようになりました。
ただし、UIをもう少し見やすいものにしたいと思っています。
現状のサイトは、下記のような感じです。
現状のサイト
本当はGmailのサイトみたいに同じ列に色々な機能を並べたいです。
Gmailのメニュー
諸々サイトを見て、上に表示したり、下に表示したり、という部分はなんとなく理解できたのですが、既存のボタン(Datatablesが用意していないボタン)を同じrowに並べて綺麗に見せたいと考えております。また、独自のclassなどもつけたいです。
なお、検索については、
.dataTables_filter{ display:none; }
で、一度消して、
$(document).ready(function() { var dataTable = $('#example').dataTable(); $("#searchbox").keyup(function() { dataTable.fnFilter(this.value); }); });
で、好きなところに表示することができました。それ以外の要素(lやp)も好きなところに配置したいのですが、どのようにすればよいでしょうか。
###試したこと
$('#example').DataTable({ //dom: '<"row"<"col-md-4"l><"col-md-4"f><"col-md-4"p>>Bt', //"sDom": '<"top"fpl>rt<"bottom"p><"clear">', dom: 'frtilp', stateSave: true, order: [[1, 'desc']], });
こんな感じでdomなどの設定をしましたが、既存のButton(今回の場合は、一括削除ボタンなど)と並べるようなやり方がうまくできませんでした。
###補足情報(言語/FW/ツール等のバージョンなど)
Bootstrap4
datatables(CDN利用)
Rails5
webpacker
あなたの回答
tips
プレビュー