引导对话框不会显示里面的数据表

Question

我想在引导对话框中显示我的数据表，但是当我想显示它不会加载插件$（'＃example'）.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

我相信你在做了错误的方式。您必须在之后初始化数据表加载内容并显示对话框。这可以在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 
     } 
    }) 
    }) 
});