如何获取当前page的数据条数这个问题的确用了我很大时间,其实很简单就是在页数改变的那个下拉菜单在原来的事件的基础上再加一些时间,这个方法和那个droptable的方法一样
$(
'#example tbody'
).on(
'click'
,
'tr'
,
function
() {
var
name = $(
'td'
,
this
).eq(0).text();
alert(
'你点击了 '
+name+
'这行'
);
} );
给下拉的那个绑定change事件
$(
'#example_length select'
).on(
'change'
,
function
() {
page_length=$(
'#example_length select'
)
.val();
} );
$(document).ready(
function
() {
var
eventFired =
function
(type) {
var
n = $(
'#demo_info'
)[0];
n.innerHTML +=
'<div>'
+ type +
' 事件- '
+
new
Date().getTime() +
'</div>'
;
n.scrollTop = n.scrollHeight;
}
$(
'#example'
).on(
'order.dt'
,
function
() {
eventFired(
'排序'
);
}).on(
'search.dt'
,
function
() {
eventFired(
'搜索'
);
}).on(
'page.dt'
,
function
() {
eventFired(
'翻页'
);
}).dataTable();
});
列渲染这个事件也很好用,给你想改变样式的那一列改变样式,加一些动作都可以,
通过
columns.render
方法把年龄的值拼接到姓名列
$(document).ready(
function
() {
$(
'#example'
).dataTable({
"columnDefs"
: [{
"render"
:
function
(data, type, row) {
return
data +
' ('
+ row[3] +
')'
;
},
"targets"
: 0
},
{
"visible"
:
false
,
"targets"
: [3]
}]
});
});
在多个页面使用Datatables,你可能将dom设置为公共的值,让所有的表格都有相同的布局,这个时候你可以使用 $.fn.dataTable.defaults
当设置此对象后,所有Datatables在初始化的时候都会使用这个参数设置
$.extend( $.fn.dataTable.defaults, {
"searching": false,
"ordering": false
} );
$(document).ready(function() {
$('#example').dataTable();
} );
创建行回掉
$(document).ready(function() {
$('#example').dataTable( {
"createdRow": function ( row, data, index ) {
if ( data[5].replace(/[\$,]/g, '') * 1 > 4000 ) {
$('td', row).eq(5).css('font-weight',"bold").css("color","red");
}
}
} );
} );
注意columns.createdCell
选项也可以实现同样的效果