2016-06-15 9 views
0

モーダルダイアログで表示するデータテーブルを取得できません。私は空のテーブルを得る。Jquery DataTableがブートストラップモーダルで読み込まれない

//あなたのcreateTablをコールデータテーブルの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モーダル

createTableForModal(selectedLesson); 

//show the modal 

$('#editLessonModal').modal(); 

CODE

<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> 
+1

コンソールエラー? –

+0

いいえ、コンソールエラーはありませんでした。 –

答えて

2

JQuery DataTable は、の画面に表示されない要素<table>を初期化できません。テーブルの初期化を呼び出す前に、まず要素を表示する必要があります(おそらく、.show()関数を介して)。この場合、ブートストラップモーダル(デフォルトではロード時に隠されています)の内部にあり、初期化に失敗します。 @ ShriCoderのコードは正常に動作しますが、問題は、「DataTableを再初期化できません」と言ったときにモーダルを2回開いたときにエラーが発生することです。

  1. は、負荷にあなたのmodalが最初に目に見える作り、あなたの<table>は、あなたのモーダルを隠す初期化:私はどちらか、あなたのコードを修正することをお勧め。それには数ミリ秒かかり、ユーザーは通常気付かないでしょう。

  2. モーダルで解雇shown.bs.modalイベント中にあなたの<table>後を初期化します。 <table>がプラグインの内部$.fn.dataTable.isDataTable()ユーティリティ関数を使用するか、<table>が既に "dataTable" cssクラスを持っているかどうかをチェックすることで、既に初期化されているかどうかを確認できます。サイドノートでは


、また、ブートストラップの互換性のためのプラグインの別の.js.cssユーティリティファイルを使用してください。それはあなたの<table>(ユーザーのexpirience-wise)を完全にBootStrapを使用するWebページに収まるように最適化します。

0

に行くデータテーブルを作成します下のコード内のeForModal(selectedLesson)関数:

機能します。まだ動作していない場合はjsfiddleをポストします

関連する問題