Question

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

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

<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列。

我想实现：如果屏幕宽度＆lt; 700px，然后只显示第1列和最后一列。

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

非常感谢。

Answer 1

然后将类添加到要在＆lt; 700px时隐藏的所需行将课程添加到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;}}

这将起作用

Answer 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(); 
}

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

2 个答案: