根据屏幕宽度显示或隐藏 DataTables 列答案

【问题标题】：Show or hide DataTables column according to the screen width根据屏幕宽度显示或隐藏 DataTables 列
【发布时间】：2015-10-26 07:48:54
【问题描述】：

我正在使用数据表来显示信息

https://datatables.net/

而我创建数据表的代码是这样的：

<table class="table table-striped table-hover" id="datatable_<?= $key; ?>" cellspacing="0" width="100%">
   <thead>
      <tr>
         <th>Title</th>
         <th>Thumbnail</th>
         <th>Teacher</th>
         <th>Pose</th>
         <th>Style</th>
         <th>Level</th>
         <th>Create Date</th>
         <th></th>
      </tr>
   </thead>
   <tbody>
      <?php
         foreach ($playlist as $item) {
             if ($item['type'] == $key) {
                 echo "<tr>";
                 echo "<td><a href='" . site_url("video/view/" . $item['id']) . "' target='_blank'>" . $item[set_lang('title')] . "</a></td>";
                 echo "<td><img src='" . (isset($item['image_url']) ? site_url("thumbnail/" . $item['image_url']) : $item['thumbnail']) . "' height='60'></td>";
                 echo "<td>" . set_lang($item ['name']) . "</td>";
                 echo "<td>" . print_array($item['pose']) . "</td>";
                 echo "<td>" . print_array($item ['style']) . "</td>";
                 echo "<td>" . $this->level_list[$item ['level']] . "</td>";
                 echo "<td>" . date("Y-m-d", strtotime($item['create_date'])) . "</td>";
                 echo "<td><label class='block option option-primary'><input type='checkbox' name='videos[]' value='" . $item['id'] . "'><span class='checkbox'></span></label></td>";
                 echo "</tr>";
             }
         }
         ?>
   </tbody>
</table>

jquery：

    var myTable = $('#datatable_0, #datatable_1').dataTable({
        order: [[5, "desc"]],
        iDisplayLength: 5,
        aLengthMenu: [
            [5, 10, 25, 50, -1],
            [5, 10, 25, 50, "All"]
        ],
        sDom: '<"dt-panelmenu clearfix"lfr>t<"dt-panelfooter clearfix"ip>',
        oTableTools: {
            sSwfPath: "<?= site_url("vendor/plugins/datatables/extensions/TableTools/swf/copy_csv_xls_pdf.swf"); ?>"
        }
    });

共有 8 列。

我想实现：如果屏幕宽度

注意订单列也应该更改为最后一列。

非常感谢。

【问题讨论】：

标签： jquery html css layout datatable

【解决方案1】：

然后将类添加到您想要在 th

<th class="hideClass">Level</th>

给td添加类

echo "<td class="hideClass">" . $this->level_list[$item ['level']] . "</td>";

在你的css文件中添加这个

@media (max-width: 700px) {.hideClass{display:none;}}

这会起作用

【讨论】：

【解决方案2】：

你的意思是这样的吗？

仅通过 CSS 进行媒体查询：

@media (max-width: 700px) {
    table th, table td{
       display:none;
    }
    table th:first-child, table th:last-child, 
    table td:first-child, table td:last-child{
        display:table-cell;
    }
}

通过 jQuery

function fittabletoscreen(){
    if(jQuery(window).width()<700){
      //hide all th,td and show only first and last
      jQuery('table th, table td').hide();
      jQuery('table th:first-child, table th:last-child, table td:first-child, table td:last-child').show();

      //Optional to hide and show
      //jQuery('table th, table td').css('display','none');
      //jQuery('table th:first-child, table th:last-child, table td:first-child, table td:last-child').css('display','table-cell');
   }
}

并在调整窗口大小时调用此函数；

fittabletoscreen();  //initial call
jQuery(window).resize(function(){  //change in landscape and portrait view
   fittabletoscreen(); 
}

【讨论】：