Jquery DataTable 不会在引导模式中加载答案

【问题标题】：Jquery DataTable won't load in bootstrap modalJquery DataTable 不会在引导模式中加载
【发布时间】：2016-06-15 06:06:20
【问题描述】：

我无法在模式对话框中显示数据表。我得到一张空桌子。

//创建进入模态的数据表

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>

【问题讨论】：

任何控制台错误？？
不，没有任何控制台错误。

标签： jquery twitter-bootstrap datatables bootstrap-modal

【解决方案1】：

JQuery 数据表无法初始化屏幕上不可见的<table> 元素。在调用表初始化之前，您必须首先“显示”元素（可能通过.show() 函数）。在这种情况下，它位于 Bootstrap Modal 中（默认情况下在加载时隐藏），它将无法初始化。 @ShriCoder 的代码可以正常工作，但问题是如果您第二次打开模式时说“无法重新初始化数据表”，它会引发错误。我建议您修改您的代码：

使您的modal 在加载时最初可见，初始化您的<table>，然后隐藏您的模式。这需要几毫秒，而您的用户通常不会注意到。
在模式触发的shown.bs.modal 事件期间初始化您的<table> 一次。您可以通过使用插件内部的$.fn.dataTable.isDataTable() 实用程序函数或检查您的<table> 是否已经有一个“dataTable”css 类来检查<table> 是否已经初始化。

另外，请使用插件单独的.js 和.css 实用程序文件以实现BootStrap 兼容性。它优化了您的<table>（用户体验方面）以完美适应使用 BootStrap 的网页。

【讨论】：

【解决方案2】：

在下面的代码中调用你的 createTableForModal(selectedLesson) 函数：

$('#code').on('shown.bs.modal', function (e) {
  //Call your Function here 
});

它会起作用的。如果它不工作仍然发布 jsfiddle 我会检查

【讨论】：