title: Jquery DataTable won't load in bootstrap modal
body: <p>I cannot get a datatable to display in a modal dialog. I get an empty table.</p>
  
  <p>//create the datatable that goes in the modal</p>
  
  <pre><code>createTableForModal(selectedLesson);
  
  //show the modal
  
  $('#editLessonModal').modal();
  </code></pre>
  
  <p><strong>CODE FOR createTableForModal</strong></p>
  
  <pre><code>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,
                  } );
              } );
  }
  </code></pre>
  
  <p><strong>HTML FOR DATA TABLE</strong></p>
  
  <pre><code>&lt;table id="uploadVideosTable" class="table table-striped table-bordered table-hover table-responsive"&gt;
      &lt;thead&gt;
           &lt;tr&gt;
              &lt;th&gt;Name&lt;/th&gt;
                 &lt;th&gt;Position&lt;/th&gt;
                 &lt;th&gt;Office&lt;/th&gt;
                 &lt;th&gt;Extn.&lt;/th&gt;
                 &lt;th&gt;Start Date&lt;/th&gt;
                &lt;th&gt;Salary&lt;/th&gt;
               &lt;/tr&gt;
      &lt;/thead&gt;
  &lt;/table&gt;
  </code></pre>