引導對話框不會在里面顯示dataTable

Question

我想在引導對話框中顯示我的數據表，但是當我想顯示它時，不會加載插件$（'＃example'）。DataTable（）; 我試圖檢查url或更改鏈接css和js，但是它不起作用，我該如何解決？ 我也嘗試了event.DefaultPrevent（），但是什么也沒有發生

語氣

$(function(event) {
    URL_GET_VIEW_SEARCH_PRODUCT = BASE_URL + 'sale/sales/getViewSearch';
    $('#btn-search').click(function (e) {
            e.preventDefault();
            BootstrapDialog.show({
            message: function(dialog) {
                var $message = $('<div></div>');
                var pageToLoad = dialog.getData('pageToLoad');
                $message.load(pageToLoad);

                return $message;
            },
            data: {
                'pageToLoad': URL_GET_VIEW_SEARCH_PRODUCT
            }
        });
    });

    $('#example').DataTable();
});

view_table

<table id="example" class="table table-bordered table-striped" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Extn.</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>
</table>

main_html

<link rel="stylesheet" href="<?= base_url('assets/css/dataTables.bootstrap.css'); ?>">
<link rel="stylesheet" href="<?= base_url('assets/css/bootstrap-dialog.min.css');?>">
//body html
<script src="<?=base_url('assets/js/jquery.dataTables.min.js');?>"></script>
<script src="<?=base_url('assets/js/dataTables.bootstrap.min.js');?>"></script>
<script src="<?=base_url('assets/js/bootstrap-dialog.min.js');?>"></script>

Answer 1

我相信您的做法是錯誤的。 加載內容並顯示對話框后 ，必須初始化dataTable。 這可以在onshown事件回調中完成：

$(function(event) {
  URL_GET_VIEW_SEARCH_PRODUCT = BASE_URL + 'sale/sales/getViewSearch';
  $('#btn-search').click(function (e) {
     BootstrapDialog.show({
        message: function(dialog) {
           var $message = $('<div></div>');
           var pageToLoad = dialog.getData('pageToLoad');
           $message.load(pageToLoad);
           return $message;
        },
        data: {
           pageToLoad: URL_GET_VIEW_SEARCH_PRODUCT
        },
        onshown: function(dialog){
           $('#example').DataTable(); //<--here
        }
     })
  })
});