在 1 页上生成 1 个可切换表而不是 3 个表

Posted 2023-05-09

【中文标题】在 1 页上生成 1 个可切换表而不是 3 个表

【英文标题】：generate 1 switchable table instead 3 table on 1 pages

【发布时间】：2018-01-21 20:59:32

【问题描述】：

我创建了 1 个页面，其中包含 3 个由按钮触发的可切换表，我使用数据表作为表插件。

现在我成功地制作了 3 个由 1 个页面上的按钮触发的可切换服务器端表，从最终用户的角度来看，它看起来很棒且功能齐全，但是在控制台中时，页面总是触发 3 个相同的表而不是 1 个表。

我不担心table生成的小数据，但是到时候数据会堆积到1000+数据，3次生成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"  cellspacing="0" >
                //*table code
            </table>
         </div>
      </div>
      <div id="table_asborrow" class="tab-pane fade">
         <div class="table-responsive">
            <table class="display"  cellspacing="0">
               //*table code
            </table>
         </div>
      </div>
      <div id="table_asbroken" class="tab-pane fade">
         <div class="table-responsive">
            <table class="display"  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 个表？

【参考方案1】：

您可以有 3 个不同的 php 文件，每个文件包含一个表。然后根据你需要的女巫表使用包含函数

【讨论】：

已经在使用该方法和ajax，问题是1个按钮总是生成3个表而不是一个

【参考方案2】：

我解决了，它只需要目标表中的全局变量，并根据按下的按钮动态改变值。

更新的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>