先前的项目使用的是datatables 1.9,为了使用1.10版本的reload方法,所以想使用1.10,但发现更换了1.10的,表格就绘制不出来,老是提示未定义的错误,经过排查是因为这句话:
//设置按什么顺序定义表的控制元素在页面上出现
"sDom" : "<r>t<'float_left'i><'float_right_nexpage'p><'float_right_display'l>>",
上述的class是自定义的,主要是为了自己去布局,如下class:
.float_left {
float: left;
min-height: 20px !important;
padding-top: 10px;
}
.float_right_res {
min-height: 20px !important;
float: right;
padding-left: 15px;
padding-right: 15px;
padding-top: 10px;
}
.float_right_display {
min-height: 20px !important;
float: right;
padding-left: 15px;
padding-right: 15px;
padding-top: 10px;
}
.float_right_nexpage {
min-height: 20px !important;
float: right;
padding-left: 15px;
padding-right: 15px;
padding-top: 10px;
}
.float_left {
float: left;
min-height: 20px !important;
padding-top: 10px;
}
.float_right {
min-height: 20px !important;
float: right;
padding-left: 15px;
padding-right: 15px;
padding-top: 10px;
}
上述的写法在1.9的版本是可以正常显示的,一旦切换到1.10就报错了,改成如下的形式就好了:
"dom": 'T<"clear">lfrtip',
后面发现可以使用如下的方法,跟原来的变成"",也显示正常,这个实现,显示多少页和分页的信息在表格的右下角,如下图:
class的类如下:
.float_left {
float: left;
min-height: 20px !important;
padding-top: 10px;
}
.float_right_res {
min-height: 20px !important;
float: right;
padding-left: 15px;
padding-right: 15px;
padding-top: 10px;
}
.float_right_display {
min-height: 20px !important;
float: right;
padding-left: 15px;
padding-right: 15px;
padding-top: 10px;
}
.float_right_nexpage {
min-height: 20px !important;
float: right;
padding-left: 15px;
padding-right: 15px;
padding-top: 10px;
}
.float_left {
float: left;
min-height: 20px !important;
padding-top: 10px;
}
.float_right {
min-height: 20px !important;
float: right;
padding-left: 15px;
padding-right: 15px;
padding-top: 10px;
}
2.还有一个区别是:1.10和1.9的设置某些列显示与否方法进行了更改,原来的是有错的,需要更改为最新的,如下:
// 表示隐藏操作
dataTable.column($(this).attr('value')).visible(false);//1.10的版本
dataTable.fnSetColumnVis($(this).attr('value'), false);//1.9的版本
3.还有一个区别是1.9版本的:$('#sample_1').DataTable().fnDestroy();这样写会出错,可以使用destroy方法
记录一下这个错误,可能是1.10的样式变了,不能这样使用了吧,有大神可以交流一下。参考这个链接:http://download.csdn.net/detail/u011974797/9651436
3.每次点击查询,重新生成的表格,会报这样的错误:DataTables warning: table id=sample_1 - Cannot reinitialise DataTable
解决方法是增加一个属性:"retrieve": true,//保证只有一个table实例,(原文官方的解决方式有很多种:https://datatables.net/manual/tech-notes/3)
4.遇到第四个问题使用了固定列的插件,如果采用new的形式后台会发送两次请求,影响速度,所以使用属性的形式,如下:
"fixedColumns": {
"iLeftColumns" : 3,
"sHeightMatch" : "auto"
},
};
// qiulinhe:2016年10月31日16:51:42:设置前三列固定,冻结不随着滚动,这个会发两次,必须使用属性的形式
// new $.fn.dataTable.FixedColumns(wageNowTable, {
// "iLeftColumns" : 3,
// "sHeightMatch" : "auto"
// });