1.1通过代码实例跟我学JQuery DataTables表格控件及应用实例（第2部分）
4、重新显示表格
当对DataTable进行属性修改后，需要重新显示更新后的表格，可以调用fnDraw函数。
$(document).ready(function(jqueryEvent){
var currentDataTable = $("#dataTableTagID").dataTable();
/**
对表格进行更新操作的代码
*/
c urrentDataTable.fnDraw();
}
);
5、多列排序
/* Define two custom functions (asc and desc) for string sorting */
jQuery.fn.dataTableExt.oSort['string-case-asc'] = function(x,y) {
return ((x < y) ? -1 : ((x > y) ?    1 : 0));
};
jQuery.fn.dataTableExt.oSort['string-case-desc'] = function(x,y) {
return ((x < y) ?    1 : ((x > y) ? -1 : 0));
};
$('#example').dataTable( {
"aaSorting": [ [0,'asc'], [1,'asc'] ],
"aoColumns": [
null,
null,
{ "sType": 'string-case' },
null,
null
]
} );
第3列采用自定义的排序函数实现排序。
"aoColumns": [ //这个属性下的设置会应用到所有列，按顺序没有是空
{"mData": 'nickname'}, //mData 表示发请求时候本列的列明，返回的数据中相同下标名字的数据会填充到这一列
{"mData": 'follower_count'},
{"mData": 'rank'},
{"mData": 'month_count'},
{"mData": 'equity'},
{"mData": 'month_ror'},
{"mData": 'now_orders'},
{"mData": 'profit_total'},
{"sDefaultContent": ''}, // sDefaultContent 如果这一列不需要填充数据用这个属性，值可以不写，起占位作用
{"sDefaultContent": '', "sClass": "action"},//sClass 表示给本列加class ],
1.1.1DataTables属性配置应用示例
1、DataTables的一些基础属性配置
$(document).ready(function(jqueryEvent){
$("#dataTableTagID").dataTable({
"bPaginate": true, //翻页功能（是显示分页跳转的各个按钮）"bLengthChange": true, //改变每页显示数据数量（每页大小的下拉框）
"bFilter": true, //过滤功能（是否启用客户端过滤器）
"bSort": true, //排序功能（是否启用各列具有按列排序的功能）
"bInfo": true,//页脚信息
"bAutoWidth": true//自动宽度
});
}
);
2、指定某列的排序规则
下面的代码示例实现从第0列开始，以第3列倒序排列。
$(document).ready(function(jqueryEvent){
$("#dataTableTagID").dataTable({
"bPaginate": true, //翻页功能
"bLengthChange": true, //改变每页显示数据数量
"bFilter": true, //过滤功能
"bSort": true, //排序功能
"bInfo": true, //页脚信息
"bAutoWidth": true, //自动宽度
"aaSorting": [
[ 3, "desc" ]
]
});
}
);
tabletotal函数上面的“aaSorting”也可以采用下面的“order”定义
$(document).ready(function() {
$('#example').dataTable( {
/
/跟数组下标一样，第一列从0开始，这里表格初始化时，第四列默认降序"order": [[ 3, "desc" ]]
} );
} );
3、多列排序
$(document).ready(function(jqueryEvent){
$("#dataTableTagID").dataTable({
"bPaginate": true, //翻页功能
"bLengthChange": true, //改变每页显示数据数量
"bFilter": true, //过滤功能
"bSort": true, //排序功能
"bInfo": true, //页脚信息
"bAutoWidth": true, //自动宽度
"aaSorting": [ [0,'asc'], [1,'asc'] ]
});
}
);
4、隐藏某些列——将原来数据中的第3列和第4列隐藏不显示
有些数据不希望显示在屏幕上，或者需要什么条件才会显示，你可以使用columns.visible 选项来实现。被隐藏的列依然是表格的一部分，通过column().visible()方法来显示。被隐藏的列既然是表格的一部分，那么用户也可以搜索和访问被隐藏的列的相关内容。$(document).ready(function(jqueryEvent){
$("#dataTableTagID").dataTable({
"aoColumnDefs": [
{ "bSearchable": false, "bVisible": false, "aTargets": [ 2 ] },
{ "bVisible": false, "aTargets": [ 3 ] }
]
});
}
);
上面的代码，也可以采用下面的实现形式：
$(document).ready(function() {
$('#example').dataTable( {
"columnDefs": [
{
"targets": [ 2 ],
"visible": false,
"searchable": false
},
{
"targets": [ 3 ],
"visible": false
}
]
} );
} );
aoColumnDefs和aoColums类似，但他可以给指定列附加属性："aoColumnDefs": [

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。