JQuery DataTable не загружается в bootstrap modal

Question

Я не могу получить datatable для отображения в модальном диалоговом окне. Я получаю пустой стол.

// создаем DataTable, который идет в модальных

createTableForModal(selectedLesson); 

//show the modal 

$('#editLessonModal').modal(); 

КОД ДЛЯ createTableForModal

function createTableForModal() 
{ 
    //this is just example code, but it doesn't work 
var dataSet = [ 
     [ "Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$320,800" ], 
     [ "Garrett Winters", "Accountant", "Tokyo", "8422", "2011/07/25", "$170,750" ]]; 

      $(document).ready(function() { 
       $('#uploadVideosTable').DataTable({ 
        data: dataSet, 
        columns: [ 
         { title: "Name" }, 
         { title: "Position" }, 
         { title: "Office" }, 
         { title: "Extn." }, 
         { title: "Start date" }, 
         { title: "Salary" } 
        ],retrieve: true, 
       }); 
      }); 
} 

HTML для ТАБЛИЦА ДАННЫХ

<table id="uploadVideosTable" class="table table-striped table-bordered table-hover table-responsive"> 
    <thead> 
     <tr> 
      <th>Name</th> 
       <th>Position</th> 
       <th>Office</th> 
       <th>Extn.</th> 
       <th>Start Date</th> 
       <th>Salary</th> 
      </tr> 
    </thead> 
</table> 

Answer 1

JQuery DataTable не может инициализировать <table> элементы, которые не видны на экране. Вы должны сначала «показать» элемент (возможно, через функцию .show()), перед вызовом инициализации таблицы. В этом случае, если он находится в модуле Bootstrap Modal (который по умолчанию скрыт при загрузке), он не будет инициализирован. Код @ShriCoder будет работать очень хорошо, но проблема в том, что это вызовет ошибку, если вы откроете второй модный момент, сказав что-то вроде «DataTable нельзя повторно инициализировать». Я хотел бы предложить вам пересмотреть свой код, либо:

1. Сделайте modal изначально видимым при загрузке, инициализировать ваш <table> затем скрыть ваш покадрово. Это займет несколько миллисекунд, и ваши пользователи обычно не замечают.

2. Инициализировать ваш <table>раз во время shown.bs.modal события, запущенного с помощью модального. Вы можете проверить, уже ли инициализирован <table>, либо используя внутреннюю функцию утилиты $.fn.dataTable.isDataTable() плагина, либо проверяя, есть ли у вашего <table> класс «dataTable» css.

---

На стороне записки, пожалуйста, также используют отдельные .js и .css файлы утилит подключаемого модуля для совместимости Bootstrap. Он оптимизирует ваш <table> (пользовательский опыт), идеально подходящий на веб-страницах, которые используют BootStrap.

Answer 2

Позвоните своему createTabl Функция eForModal (selectedLesson) внутри кода ниже:

будет работать. если он не работает, все еще опубликуйте jsfiddle, я проверю