生成1個可切換的表格，而不是1個頁面上的3個表格

我創建了1個頁面，其中有3個由按鈕觸發的可切換表格，我使用數據表格作爲表格插件。生成1個可切換的表格，而不是1個頁面上的3個表格

現在，我成功地讓3個可切換的服務器端表由1個頁面上的按鈕觸發，從最終用戶視圖看，它看起來很棒並且功能完善，但是在控制檯中，頁面總是觸發3個相同的表格，而不是1個表格。

我並不擔心表格產生的小數據，但是當時間到了時，數據將堆疊多達1000多個數據，這將是生成超過1000個數據三次的荒謬事情。

這裏是我的網頁切片：

<div class="panel-body"> 
    <ul class="nav nav-tabs alert col-md-12" id="myTab"> 
     <hr class="style14"> 
     <h4 class="header text-center col-md-8" id="texthead">Asset List</h4> 
     <a class="btn btn-group btn-primary btn-sm changeTable" data-ajax="tableresponses.php" href="#table_asall" data-toggle="tab" onclick="changeText('All Assets Table')">All Assets</a> 
     <a class="btn btn-group btn-primary btn-sm changeTable" data-ajax="tableresponses1.php" href="#table_asborrow" data-toggle="tab" onclick="changeText('Used Assets Table')">Used Assets</a> 
     <a class="btn btn-group btn-primary btn-sm changeTable" data-ajax="tableresponses2.php" href="#table_asbroken" data-toggle="tab" onclick="changeText('Damaged Assets Table')">Damaged Assets</a> 
     <hr class="style14"> 
    </ul> 
    <div class="tab-content"> 
     <div id="table_asall" class="tab-pane fade active in" > 
     <div class="table-responsive wrap"> 
      <table class="display" width="100%" cellspacing="0" > 
       //*table code 
      </table> 
     </div> 
     </div> 
     <div id="table_asborrow" class="tab-pane fade"> 
     <div class="table-responsive"> 
      <table class="display" width="100%" cellspacing="0"> 
       //*table code 
      </table> 
     </div> 
     </div> 
     <div id="table_asbroken" class="tab-pane fade"> 
     <div class="table-responsive"> 
      <table class="display" width="100%" cellspacing="0" id=""> 
       //*table code* 
      </table> 
     </div> 
     </div> 
    </div> 
</div>

所以這裏是我的JS（生成3個表）

var _ajaxURL = ""; 

$('.changeTable').on('click', function() { 
    _ajaxURL = $(this).attr('data-ajax'); 

    $('table.display').DataTable({ 
     lengthChange: true, 
     info: false, 
     fixedHeader: true, 
     select: true, 
     "bAutoWidth": false, 
     "bProcessing": true, 
     "serverSide": true, 
     "destroy": true, 
     "sAjaxSource": _ajaxURL 
    }); 

    $.fn.dataTable.ext.errMode = function (settings, helpPage, message) { 
    console.log("Catch Error : Success"); 
    }; 

    function testUpdatedDatatable() { 
     $('table.display').DataTable().clear().rows.add(response.url).draw(); 
    } 
});

所以，如果你檢查$('table.display').DataTable({用於產生3代表的主要問題。

如何才能生成1表而不是3表？

來源

2017-08-14 Gusti Aldi

你可以有3個不同的php文件，每個文件包含一個表。然後使用你需要的基於巫婆表的包含功能

來源

2017-08-14 04:26:56 danivdwerf

已經使用與AJAX方法，該問題是1個按鈕總是產生3個表不是一 –

我解決了它，它只需要在目標表中使用全局變量，並根據按下哪個按鈕來使動態變化的值。

更新JS

var _ajaxURL = ""; //you can initialize this global variable with some default value. 

var table; 

function changeTable(val){ 
     table = "'#"+(val)+"'"; 
    } 

$('.changeTable').on('click', function() { 
    _ajaxURL = $(this).attr('data-ajax'); 

    $('table').DataTable({ 
     lengthChange: true, 
     info: false, 
     fixedHeader: true, 
     select: true, 
     "bAutoWidth": false, 
     "bProcessing": true, 
     "serverSide": true, 
     "destroy": true, 
     "sDefaultContent": "Edit",  
     "sAjaxSource": _ajaxURL 
    }); 

    $.fn.dataTable.ext.errMode = function (settings, helpPage, message) { 
    console.log("Catch Error : Success"); 
    }; 

    function testUpdatedDatatable() { 
     $('table.display').DataTable().clear().rows.add(response.url).draw(); 
    } 
});

並添加按鈕值喜歡這個

<a class="btn btn-group btn-primary btn-sm changeTable" data-ajax="tableresponses.php" href="#table_asall" data-toggle="tab" onclick="changeText('All Assets Table');changeTable('table_asall1');">All Assets</a>

來源

2017-08-16 01:30:15

生成1個可切換的表格，而不是1個頁面上的3個表格

回答

相關問題