Question

我想在引导程序对话框中显示我的数据表，但是当我想要显示它时不会加载插件$（＆＃39; #example＆＃39;）。DataTable（）;我试图检查网址或更改我的链接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

I believe you are doing it the wrong way. You must initialize the dataTable after the content is loaded and the dialog is shown. This can be done in the onshown event callback :

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

bootstrap对话框不会显示dataTable

1 个答案: