需求描述：datetables 写入的列表中， 默认有固定的字段，点击展开之后，可以看见更多的字段， 展开中的字段有一部分是根据返回的长度来显示，比如 一个用户A 只有两个课程，那么展示两个课程字段， 用户B 有四个课程，那么现实四个课程。另一部分是展开之后肯定会显示的 固定的字段
1， class 样式定义：
HTML的按钮
点击之后 跳转处理的方法
var info = dt.page.info();
var cur_page = info.page;
dt.page(cur_page).draw('page'); // dt是全局定义的
网页进来就已经加载了 init 方法
样式定义.guding 是 一直显示状态的样式 .show_list 是 点击展开之后会一定有的字段
具体使用：'columns':[
{
"data": "is_add_master",
"width": "20%",
"sClass":"guding",
"title": "是否添加班主任",
"data_type": "varchar"
},
{
"data": "course_ctime",
"width": "20%",
"sClass":"show_list",
"title": "购买正式课时间",
"data_type": "varchar"
},
2，datetables 回调函数 ： drawCallback
每当页面中的所有的数据都加载完毕之后，调用这个方法。
那么我们就可以根据当前页面是 展开 / 收起 的状态来，给class 样式赋值
（1）， 首先获取 返回data的数据
var api = this.api();
var json = api.rows( {page:'current'}).data();
if (json.length > 0) {
var title = json[0]['title_array'];
当前 title 就是 返回列表的第一列的 title_array 字段的数据
我当前的需求， title_array 里放的是 当前列表当前页 ， 默认 15条数据中， 以最多课程的用户维度去放开课程的列
我获取到 有五个课程， 那么 我就循环赋值 展开 还是 隐藏的 样式
（2） 打入 隐藏还是 展开的样式
这个的课程初始化隐藏， 我的需求是，所有的用户的课程总共不超过五个，也就是 周一到周五的课程，所以我总共写死五个列，所以初始化首先全部隐藏，然后看当前页返回的 title_array 是多长
（3）头部自适应 this.fnAdjustColumnSizing(false);
展开 ， 收起， 会导致表头变动，那么就容易样式错乱，就写入这个就可以了，表头自适应
（4） 增加一个 跳转到 第几页的样式和功能
回调函数里面增加一下的代码：
$(".dataTables_paginate").append(" <div class='pagination' style='float:left;margin:0px;padding-top:0px;padding: 0px;'> <input style='border: 0px;font-size: 14px;color: #606266;font-family: Helvetica;background-color: #F0F2F5;outline: none !important;height:28px;line-height:28px;width:40px;' class='margin text-center' id='changePage' type='text'> 页 <a class='btn btn-info' style='margin-bottom:5px;width: 35px;height: 28px;line-height: 28px;text-align:center;padding:0px;' href='javascript:void(0);' id='dataTable-btn'>跳转</a></div>");
var oTable = $(tableId).dataTable();
$('#dataTable-btn').click(function(e) {
if($("#changePage").val() && $("#changePage").val() > 0) {
var redirectpage = $("#changePage").val() - 1;
} else {
var redirectpage = 0;
}
oTable.fnPageChange(redirectpage);
});
那么 样式结果
样式 我给了 固定的相对长度，写死了长度，不然每个td 的长度不一致，不太好看
thead th, table.dataTable thead td{
width: 60px !important;
height: 50% !important;
word-wrap: break-all !important;
word-break: normal !important;
overflow: hidden !important;
}
thead th{
width: 60px !important;
height: 50% !important;
word-wrap: break-all !important;
word-break: normal !important;
overflow: hidden !important;
}
