Gentellela模板 - 多個數據表格在一個頁面中

Question

我正在使用gentellela模板，它具有數據表id到數據表。 現在即時通訊做模式彈出的表，並將其包含到一個頁面，它有一個按鈕來調用所有這些模式。

我的問題是當2個模態有表格id到數據表。另一個數據表看起來破碎了。我要的只是讓這些數據表格正常工作。

這是我的第一個模態。

   <div class="modal fade" id="USERSVIEW" tabindex="-1" role="dialog" aria-hidden="true"> 
       <div class="modal-dialog modal-lg" > 
        <div class="modal-content"> 
        <div class="modal-body"> 
        <div class="row"> 
         <div class="col-md-12 col-sm-12 col-xs-12"> 
         <div class="x_panel"> 
          <div class="x_title"> 
          <h2>View Users</h2> 
          <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span></button> 
          <div class="clearfix"></div> 
          </div> 

         <div class="x_content"> 
         <table id="datatable" class="table table-striped table-bordered dt-responsive nowrap dataTable" cellspacing="0" width="100%"> 
          <thead> 
           <tr> 
           <th style="text-align: center;"> Branch Code </th> 
           <th style="text-align: center;"> Branch Name </th> 
           <th style="text-align: center;"> Branch Address </th> 
           <th style="text-align: center;"> Branch Admin Name </th> 
           <th style="text-align: center;"> Status </th> 
           </tr> 
          </thead> 
          <tbody> 
          <?php include 'includes/dashboarduserfetch.php';?> 
          </tbody> 
         </table> 
          <div class="ln_solid"></div> 
           <button class="btn btn-danger" class="close" data-dismiss="modal">Cancel</button> 
          </div> 
         </div> 
         </div> 
        </div> 
        </div> 
        </div> 
       </div> 
       </div> 

這是我的第二個模式。

   <div class="modal fade" id="TASKSVIEW" tabindex="-1" role="dialog" aria-hidden="true"> 
       <div class="modal-dialog modal-lg" > 
        <div class="modal-content"> 
        <div class="modal-body"> 
        <div class="row"> 
         <div class="col-md-12 col-sm-12 col-xs-12"> 
         <div class="x_panel"> 
          <div class="x_title"> 
          <h2>View Tasks</h2> 
          <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span></button> 
          <div class="clearfix"></div> 
          </div> 

         <div class="x_content"> 
        <table id="datatable" class="table table-striped table-bordered dt-responsive nowrap dataTable" cellspacing="0" width="100%"> 
        <thead> 
         <tr> 
         <th style="text-align: center;"> Branch Code </th> 
         <th style="text-align: center;"> Task Code </th> 
         <th style="text-align: center;"> Task Name </th> 
         <th style="text-align: center;"> Task Description </th> 
         <th style="text-align: center;"> Expiry Date </th> 
         <th style="text-align: center;"> Status </th> 
         </tr> 
        </thead> 
        <tbody> 
        <?php include 'includes/dashboardtaskfetch.php';?> 
        </tbody> 
        </table> 
          <div class="ln_solid"></div> 
           <button class="btn btn-danger" class="close" data-dismiss="modal">Cancel</button> 
         </div> 
         </div> 
         </div> 
        </div> 
        </div> 
        </div> 
       </div> 
       </div> 

我想在其他頁面調用相同的模式，這是有這些按鈕來調用模態。

   <button class="btn btn-primary" data-toggle="modal" data-target="#USERSVIEW" style="width:90%; margin-left:5%; margin-top:-3%;">View Users Created</button> 

       <button class="btn btn-primary" data-toggle="modal" data-target="#TASKSVIEW" style="width:90%; margin-left:5%; margin-top:-3%;">View Tasks Created</button> 

Answer 1

Id屬性應該是unique的各部分，使得剛剛ID更改爲datatable1和datatable2

1：對於表1 ID應該是datatable1。

HTML：

<table id="datatable1" class="table table-striped table-bordered dt-responsive nowrap dataTable" cellspacing="0" width="100%"> 

腳本：

$('#datatable1').dataTable({ .... }); 

第二：對於表2編號應該是datatable2。

HTML：

<table id="datatable2" class="table table-striped table-bordered dt-responsive nowrap dataTable" cellspacing="0" width="100%"> 

腳本：

$('#datatable2').dataTable({ .... }); 

Answer 2

id屬性應該是在你的榜樣將在頁面

使用類，如果匹配的第一個ID唯一所有表具有相同的數據表選項

更改id="datatable"到class="datatable"或添加datatable類屬性

並調用

$('.datatable').dataTable(); 

如果您有不同的選項更改爲每個表只需更改ID爲每個。id="datatable1"，id="datatable1"

並調用像

$('#datatable1').dataTable({}); 
$('#datatable2').dataTable({});