twitter-bootstrap-3 - 引导对话框不会在里面显示数据表

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();
});

视图表

<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
        }
     })
  })
});