标签： jquery

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>

转载：bird_tp@CSDN

实现效果如下:

在 drawCallback 函数里重画表格，引入以下代码即可

var api = this.api();
var rows = api.rows({ page: 'current' }).nodes();

var idx = 0;    // 第一列进行合并
var last = null;
var tr = null;
var ltd = null;

api.column(idx, { page: 'current' }).data().each(function (group, i) {
    tr = $(rows[i]);
    var td = $("td:eq(" + idx + ")", tr);
    if (last !== group) {
        td.attr("rowspan", 1);
        td.text(group);
        ltd = td;
        last = group;
        td.css("vertical-align", "middle");
    } else {
        ltd.attr("rowspan", parseInt(ltd.attr("rowspan")) + 1);
        td.remove();
    }
});