javascript - 带有切换按钮的多个服务器端数据表

Question

我的页面有 3 个使用数据表的表，问题是数据表不能处理超过 1 个表，我已经在搜索解决方案，我得到的是使用自定义 SSP 数据表:here

但是，我想问的是这个问题是否有更简单的方法？

-这是显示 3 个基于按钮的可切换服务器端表的页面片段

<div class="panel-body">
<div class ="row">
   <div class ="text-center alert col-md-12">
      <a class="btn btn-primary" href="#table_assall" data-toggle="tab">All Assets List</a>
      <a class="btn btn-primary" href="#table_asborrow" data-toggle="tab">Used Assets</a>
      <a class="btn btn-primary" href="#table_asbroken" data-toggle="tab">Damaged Assets</a>
   </div>
</div>
<div class="tab-content">
   <div id="table_assall" class="tab-pane fade active in">
      <div class="table-responsive">
         <table class="display" width="100%" cellspacing="0" id="">
            *thead source code*
         </table>
      </div>
   </div>
   <div id="table_asborrow" class="tab-pane fade">
      <div class="table-responsive">
         <table class="display" width="100%" cellspacing="0" id="">
            *thead source code*
         </table>
      </div>
   </div>
   <div id="table_asbroken" class="tab-pane fade">
      <div class="table-responsive">
         <table class="display" width="100%" cellspacing="0" id="">
            *thead source code*
         </table>
      </div>
   </div>
</div>

-这是触发显示表查询的JS文件

$( document ).ready(function(){
        $('table.display').DataTable({
            lengthChange: true,
            info: false,
            fixedHeader: true,
            select: true,
            "bAutoWidth": false,
            "bProcessing": true,
            "serverSide": true,         
            "ajax":{
                url :"tableresponses.php", // json datasource
                type: "post",  // type of method  , by default would be get
                    error: function(){  // error handling code
                    $("#astab_processing").css("display","none");
                    }
            }
        });   
});

那么是否可以根据按钮点击更改 ajax url？

Answer 1

要根据您的按钮 click 更改 url，我的建议是使用 global variable 并编写 click 事件 到您的按钮 并更改全局变量的值。

前

<div class ="text-center alert col-md-12">
      <a class="btn btn-primary changeTable" data-ajax="tableresponses.php" href="#table_assall" data-toggle="tab">All Assets List</a>
      <a class="btn btn-primary changeTable" data-ajax="tableresponses1.php" href="#table_asborrow" data-toggle="tab">Used Assets</a>
      <a class="btn btn-primary changeTable" data-ajax="tableresponses2.php" href="#table_asbroken" data-toggle="tab">Damaged Assets</a>
</div>

请注意，一个名为 changeTable 的额外类和一个额外的 html5 属性 data-ajax 已添加到您的按钮中。

现在声明一个全局变量并为您的按钮编写点击事件。

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

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

现在，dataTable 的 ajax 部分看起来像

"ajax":{
    url :_ajaxURL, // json datasource
    type: "post",  // type of method  , by default would be get
    error: function(){  // error handling code
        $("#astab_processing").css("display","none");
    }
}

如果您在这方面遇到任何问题，请告诉我。