Question

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

现在我成功地通过1页上的按钮触发了3个可切换的服务器端表，从最终用户视图看起来很棒并且功能齐全但是在控制台中，页面总是触发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个表？

Answer 1

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

Answer 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>

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

2 个答案: