DataTables列表移动端适配定义隐藏列

Responsive.breakpoints = [
    { name: 'desktop',  width: Infinity },
    { name: 'tablet-l', width: 1024 },
    { name: 'tablet-p', width: 768 },
    { name: 'mobile-l', width: 480 },
    { name: 'mobile-p', width: 320 }
];

分别表示在什么屏幕下显示该列。
比如desktop表示在PC版大屏幕时才显示该列,否则隐藏。
tablet-l表示1024的大小才显示该列,否则隐藏。
以此类推。

所以修改的代码只需要修改列头th的class名即可,如下:

<thead>
    <tr>
        <th width="8%" class="mobile-l">姓名</th>
        <th width="10%" class="mobile-l">电话</th>
        <th width="10%" class="mobile-l">性别</th>
        <th width="10%" class="desktop">时间</th>
        <th width="8%" class="desktop">操作</th> 
    </tr>
</thead>

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注