Диалог начальной загрузки не будет отображать dataTable внутри

Question

Я хочу показать свой datatable в диалоге начальной загрузки, но когда я хочу показать его, не загружать плагин $('#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
        }
     })
  })
});