jQuery DataTable将不会以引导模式加载 [英] Jquery DataTable won't load in bootstrap modal

问题描述

我无法获得要在模式对话框中显示的数据表.我有一张空桌子.

I cannot get a datatable to display in a modal dialog. I get an empty table.

//创建以模态形式出现的数据表

//create the datatable that goes in the modal

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>

推荐答案

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

The JQuery DataTable cannot initialize <table> elements that are not visible on the screen. You must first "show" the element (maybe via the .show() function), before invoking the table initialization. In this case that it is inside a Bootstrap Modal (which is hidden on load by default), it will fail to initialize. @ShriCoder 's code will work just fine, but the problem is it will throw an error if you open the modal second time around saying something of "DataTable cannot be reinitialized". I would suggest you to revise your code, either:

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

1. Make your modal initially visible on load, initialize your <table> then hide your modal. It will take some milliseconds, and your Users wouldn't normally notice.

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

Initialize your <table> once during a shown.bs.modal event fired by the modal. You may check if the <table> is already initialized by either using the plugin's internal $.fn.dataTable.isDataTable() utility function, or checking if your <table> has already a "dataTable" css class.

---

在旁注中，也请使用插件的单独的.js和.css实用程序文件来实现BootStrap兼容性.它优化了<table>(用户的经验)，使其完全适合使用BootStrap的网页.

---

On the side note, please also use the plug-in's separate .js and .css utility files for BootStrap compatibility. It optimizes your <table> (user's expirience-wise) to fit perfectly on webpages that use BootStrap.

这篇关于jQuery DataTable将不会以引导模式加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！