datatableを使用時に、2ページ目以降にpopoverが機能しない件の対応方法をご紹介します。
元々は、以下の内容でDataTableを呼び出していたとします。
|
1 2 3 4 5 |
$('.list').DataTable({ "PaginationType": "bootstrap", dom: '<"tbl-head clearfix">,<"tbl-top clearfix"lfr>,t,<"tbl-footer clearfix"<"tbl-info pull-left"i><"tbl-pagin pull-right"p>>', "order":[[4,"desc"]] }); |
この場合、1ページ目ではpopupは動作しますが、2ページ目以降ではpopoverが動作しません。
対応方法は以下のように「drawCallback」を使用すること。
|
1 2 3 |
drawCallback: function() { $('[data-toggle="popover"]').popover(); } |
参考情報：https://stackoverflow.com/questions/36371215/popover-on-hover-not-working-on-second-page-of-datatable
先述したい内容に、drawCallbackを組み込みます。
|
1 2 3 4 5 6 7 8 |
$('.list').DataTable({ "PaginationType": "bootstrap", dom: '<"tbl-head clearfix">,<"tbl-top clearfix"lfr>,t,<"tbl-footer clearfix"<"tbl-info pull-left"i><"tbl-pagin pull-right"p>>', "order":[[4,"desc"]], drawCallback: function() { $('[data-toggle="popover"]').popover(); } }); |
毎回drawCallbackの内容が呼び出されるので、2ページ目以降でもpopupが機能することになります。
