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

Question

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

创建进入模态的数据表

createTableForModal(selectedLesson);
//show the modal
$('#editLessonModal').modal();

用于创建表为模态的代码

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()函数)。在这种情况下，它位于引导模式中(默认情况下在加载时隐藏)，它将无法初始化。@ShriCoder 的代码可以正常工作，但问题是，如果您第二次打开模态，它会抛出错误，说"DataTable 无法重新初始化"。我建议你修改你的代码，要么：

1. 使您的modal在加载时最初可见，初始化您的<table>然后隐藏您的模态。这将需要几毫秒，您的用户通常不会注意到。

2. 在模态触发的shown.bs.modal事件中初始化一次<table>。您可以使用插件的内部$.fn.dataTable.isDataTable()实用程序函数检查<table>是否已初始化，或者检查您的<table>是否已经具有"dataTable"css 类。

---

在旁注中，还请使用插件的单独.js和.css实用程序文件，以实现 BootStrap 兼容性。它优化了您的<table>(用户的过期时间)，以完美地适合使用 BootStrap 的网页。

Answer 2

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

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

它会工作。 如果它不起作用仍然在 JSFIDDLE 之后我会检查