Question

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

//创建模态

中的数据表

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 FOR DATA TABLE

<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>元素。你必须先＃34;显示＆＃34;在调用表初始化之前，该元素（可能通过.show()函数）。在这种情况下，它位于Bootstrap模式（默认情况下隐藏在加载模式）中，它将无法初始化。 @ShriCoder的代码可以正常工作，但问题是，如果你第二次打开模态时会发出一个错误，那就是＆＃34; DataTable无法重新初始化＆＃34;。我建议你修改你的代码：

让您的modal最初在加载时可见，初始化您的<table>，然后隐藏您的模态。这将需要几毫秒，而您的用户通常不会注意到。
在模式触发的<table>事件期间初始化shown.bs.modal 一次。您可以使用插件的内部$.fn.dataTable.isDataTable()实用程序功能检查<table>是否已初始化，或检查<table>是否已有＆＃34; dataTable＆＃34 ; css class。

另外，请注意使用插件的单独.js和.css实用程序文件以实现BootStrap兼容性。它会优化您的<table>（用户的经验明确），以完全适合使用BootStrap的网页。

Answer 2

在代码下面调用你的createTableForModal（selectedLesson）函数：

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

它会起作用。如果它还没有工作仍然发布jsfiddle我会检查

Jquery DataTable不会在bootstrap模式中加载

2 个答案: