使用下拉菜单显示特定的数据表答案

【问题标题】：Using a dropdown to show a particular datatable使用下拉菜单显示特定的数据表
【发布时间】：2017-10-22 01:57:39
【问题描述】：

我有一个带有完美工作数据表的页面，我刚刚创建了第二个表来显示来自另一个数据库表的数据，但它们不需要同时显示在同一页面上。我的任务是创建一个下拉列表，显示诸如“表 1”和“表 2”之类的值，这样当您访问该页面时，它默认显示表 1，但是如果您从下拉列表中选择表 2，那么它只会显示表2。

这两个数据表的格式非常相似，它们只是从数据库中的不同表中提取。目前我在代码中都有它们，所以它只显示一个在另一个之上。这是我的表格的代码，包括 HTML、php 和 JS：

<div class="dashboardTable" style="width:965px; overflow:auto;">
<table id="mytable" style="border: 1px solid #468BBD; border-collapse: collapse; width: 100%;  margin:0 auto; ">
<thead>
<tr style="border: 1px solid #468BBD;">
    <th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">Service Preformed</th>
    <th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">Work Order Number</th>
    <th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">Date</th>
    <th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">Utility</th>
    <th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">Service Name</th>
    <th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">Address</th>
    <th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">Serial No.</th>
    <th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">lowSideMIUNumArriv</th>
    </tr>
    </thead>
<tbody>

<?php
  while($row = mysqli_fetch_array($result1)){
?>

<tr>
    <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['workOrderType2'];?>&nbsp;</td>
    <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['workOrderNum'];?>&nbsp;</td>
    <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['date'];?>&nbsp;</td>
    <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['utility'];?>&nbsp;</td>
    <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['serviceName'];?>&nbsp;</td>
    <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['address'];?>&nbsp;</td>
    <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><?php echo '<a href="/dashboard-display?id='.$row['serialNumber'].'">'.$row['serialNumber'].'</a>'; ?>   </td>
    <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['lowSideMIUNumArriv'];?>&nbsp;</td>
    </tr>
    <?}?>
   </tbody>
  </table>
</div>


<script type="text/javascript"   src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js">
</script>
<script type="text/javascript">
(function($) {
$(document).ready(function(){
$('#mytable').DataTable();
   $('.dataTable').wrap('<div class="dataTables_scroll" />');
});
}(jQuery));
</script>

<div class="dashboardTableSurvey" style="width:965px; overflow:auto;">
<table id="mytableSurvey" style="border: 1px solid #468BBD; border-collapse:  collapse; width: 100%;  margin:0 auto; ">
<thead>
<tr style="border: 1px solid #468BBD;">
    <th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">Service Preformed</th>
    <th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">Work Order Number</th>
    <th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">Date</th>
    <th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">Utility</th>
    <th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">Service Name</th>
    <th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">Address</th>
    <th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">Serial No.</th>
    </tr>
  </thead>
 <tbody>
<?php
while($row = mysqli_fetch_array($result2)){
?>

<tr>
    <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['workOrderType2'];?>&nbsp;</td>
    <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['workOrderNum'];?>&nbsp;</td>
    <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['date'];?>&nbsp;</td>
    <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['utility'];?>&nbsp;</td>
    <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['serviceName'];?>&nbsp;</td>
    <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['address'];?>&nbsp;</td>
    <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><?php echo '<a href="/dashboard-display?id='.$row['serialNumber'].'">'.$row['serialNumber'].'</a>'; ?>   </td>
   </tr>
  <?}?>
 </tbody>
 </table>
</div>


<script type="text/javascript"  src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js">
</script>
<script type="text/javascript">
(function($) {
 $(document).ready(function(){
 $('#mytableSurvey').DataTable();
   $('.dataTable').wrap('<div class="dataTables_scroll" />');
 });
}(jQuery));
</script>

同样，这些表格的格式或代码没有太大变化，但是有没有办法使用下拉菜单来选择要显示哪些表格？

*****更新*****

新代码，不太好用：

<select name='tables' id='select-tables'>
  <option value="mytable">Survey Test Table</option>
  <option value="mytableSurvey">Survey Only</option>
</select>

<script>
(function($) {
   $('#select-tables').on('change', function(){
   var table = $(this).find('option:selected');
   $('#' + table).show();
   $('table').not('#' + table).hide();
});
}(jQuery));
</script>

我的表格 ID 是 mytable 和 mytableSurvey，我在表格的 css 中设置了 display:none，但是因为我使用的是数据表，所以它仍然显示数据表本身的页码和搜索选项。下拉菜单没有显示然而，每个选择。

【问题讨论】：

您必须在下拉更改事件时加载数据表。但是在从一个数据表加载到另一个数据表之前，您必须销毁以前的数据表。例如table.destroy();。这里，table 是您声明创建数据表的变量。

标签： javascript php jquery html datatable

【解决方案1】：

    //In your css:

    table {
       display: none;
    }

        <div class="dashboardTable" style="width:965px; overflow:auto;">
    <select name='tables' id='select-tables'>
      <option value="table1">First Table</option>
      <option value="teble2">Second Table</option>
    </select>
        <table id="table1" style="border: 1px solid #468BBD; border-collapse: collapse; width: 100%;  margin:0 auto; ">
        <thead>
        <tr style="border: 1px solid #468BBD;">
            <th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">Service Preformed</th>
            <th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">Work Order Number</th>
            <th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">Date</th>
            <th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">Utility</th>
            <th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">Service Name</th>
            <th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">Address</th>
            <th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">Serial No.</th>
            <th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">lowSideMIUNumArriv</th>
            </tr>
            </thead>
        <tbody>

        <?php
          while($row = mysqli_fetch_array($result1)){
        ?>

        <tr>
            <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['workOrderType2'];?>&nbsp;</td>
            <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['workOrderNum'];?>&nbsp;</td>
            <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['date'];?>&nbsp;</td>
            <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['utility'];?>&nbsp;</td>
            <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['serviceName'];?>&nbsp;</td>
            <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['address'];?>&nbsp;</td>
            <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><?php echo '<a href="/dashboard-display?id='.$row['serialNumber'].'">'.$row['serialNumber'].'</a>'; ?>   </td>
            <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['lowSideMIUNumArriv'];?>&nbsp;</td>
            </tr>
            <?}?>
           </tbody>
          </table>
<table id="table2" style="border: 1px solid #468BBD; border-collapse: collapse; width: 100%;  margin:0 auto; ">
        <thead>
        <tr style="border: 1px solid #468BBD;">
            <th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">Service Preformed</th>
            <th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">Work Order Number</th>
            <th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">Date</th>
            <th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">Utility</th>
            <th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">Service Name</th>
            <th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">Address</th>
            <th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">Serial No.</th>
            <th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">lowSideMIUNumArriv</th>
            </tr>
            </thead>
        <tbody>

        <?php
          while($row = mysqli_fetch_array($result1)){
        ?>

        <tr>
            <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['workOrderType2'];?>&nbsp;</td>
            <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['workOrderNum'];?>&nbsp;</td>
            <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['date'];?>&nbsp;</td>
            <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['utility'];?>&nbsp;</td>
            <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['serviceName'];?>&nbsp;</td>
            <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['address'];?>&nbsp;</td>
            <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><?php echo '<a href="/dashboard-display?id='.$row['serialNumber'].'">'.$row['serialNumber'].'</a>'; ?>   </td>
            <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['lowSideMIUNumArriv'];?>&nbsp;</td>
            </tr>
            <?}?>
           </tbody>
          </table>
        </div>


        <script type="text/javascript"   src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js">
    <script>
    $('#select-tables').on('change', function(){
       var table = $(this).find('option:selected');
       $('#' + table).show();
       $('table').not('#' + table).hide();
    });
    </script>

不是那么优雅，但快速的解决方案。如果您想一次加载所有表。最好的性能是通过 ajax 获得它们：

在您的前端/查看页面中：

$("#select-tables").change(function(){
  $.get("yourcodetogettables.php?table=" + $(this).find("option:selected").val(), function(data, status){
    //RETRIEVE YOUR HTML BY THAT YOURCODETOGETTABLES
    $(table).remove();
    $('body').append(data);
  });
});

在 PHP 代码中：呼应这种结构：

    <div class="dashboardTable" style="width:965px; overflow:auto;">
<select name='tables' id='select-tables'>
  <option value="table1">First Table</option>
  <option value="teble2">Second Table</option>
</select>
    <table id="table1" style="border: 1px solid #468BBD; border-collapse: collapse; width: 100%;  margin:0 auto; ">
    <thead>
    <tr style="border: 1px solid #468BBD;">
        <th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">Service Preformed</th>
        <th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">Work Order Number</th>
        <th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">Date</th>
        <th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">Utility</th>
        <th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">Service Name</th>
        <th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">Address</th>
        <th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">Serial No.</th>
        <th style="padding-left: 10px; padding-right:10px; border: 1px solid #468BBD;">lowSideMIUNumArriv</th>
        </tr>
        </thead>
    <tbody>

    <?php
      while($row = mysqli_fetch_array($result1)){
    ?>

    <tr>
        <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['workOrderType2'];?>&nbsp;</td>
        <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['workOrderNum'];?>&nbsp;</td>
        <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['date'];?>&nbsp;</td>
        <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['utility'];?>&nbsp;</td>
        <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['serviceName'];?>&nbsp;</td>
        <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['address'];?>&nbsp;</td>
        <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><?php echo '<a href="/dashboard-display?id='.$row['serialNumber'].'">'.$row['serialNumber'].'</a>'; ?>   </td>
        <td style="border-collapse: collapse; padding-left: 10px; padding-right:10px;"><? echo $row['lowSideMIUNumArriv'];?>&nbsp;</td>
        </tr>
        <?}?>
       </tbody>
      </table>
        </div>

【讨论】：

谢谢，我现在就试试这个！对于第一个解决方案，我是否只需在数据表的 JS 代码下添加 onChange JS？由于我现有的代码创建了实际的数据表，而新的 JS 代码只会说它需要加载选定的数据表？
在第一个代码中，您将使用 css 隐藏所有表格并通过 js onchange 下拉显示它们，第二个您将带来用户想要的表格并附加（放置代码）在你的身体标签内，在此之前删除前端中的所有表格。
第一个关注可扩展性和性能，但考虑到您已经制作的内容，它更容易实现。第二个将导致更多的工作，但它更具可扩展性。
我明白了，谢谢。我已经尝试过了，我用较新的更改更新了我的代码，但是下拉列表没有显示每个表，所以我的选择在下拉列表中只是静态的。我正在使用 wordpress，所以我不得不稍微重新格式化 JS 代码，但你介意看看我的编辑，看看那里是否有明显的问题吗？
抱歉，我在工作，没有看到您的评论。您可以通过以下方式使您的下拉列表负责： - 使用 JS 检测前端中的所有表并填充下拉列表； - 用从数据库或数组中获取的 php 填充它们；