mysql中初始化datatable_前端常用功能记录(三)—datatables表格初始化

其实上篇说的也算是jQuery Datatables的初始化，但主要是对某些字段意义的理解。下面记录的是datatables常用的功能的初始化。

数据源

我经常使用的有两种，一种是JavaScript 中的数组，通过在初始化对象中传递一个名为 aaData 的数组，同样可以提供表格数据，前缀 aa 说明这是一个数组的数组，外层的数组表示表格的行，每一行同样是一个数组。

(字段的命名可以使用类型加字段名称也可以直接使用如aaData，也可以是data，aoColumns，也可以是columns)

如：

$(document).ready(function() {

$('#demo').html( '

');

$('#example').dataTable( {

data: [

["Trident", "Internet Explorer 4.0", "Win 95+", 4, "X"],

["Trident", "Internet Explorer 5.0", "Win 95+", 5, "C"],

["Trident", "Internet Explorer 6.0", "Win 98+", 6, "A"],

["Trident", "Internet Explorer 7.0", "Win XP SP2+", 7, "A"],

["Gecko", "Firefox 1.5", "Win 98+ / OSX.2+", 1.8, "A"],

["Gecko", "Firefox 2", "Win 98+ / OSX.2+", 1.8, "A"],

["Gecko", "Firefox 3", "Win 2k+ / OSX.3+", 1.9, "A"],

["Webkit", "Safari 1.2", "OSX.3", 125.5, "A"],

["Webkit", "Safari 3.0", "OSX.4+", 522.1, "A"]

],

columns: [

{"sTitle": "Engine"},

{"sTitle": "Browser"},

{"sTitle": "Platform"},

{"sTitle": "Version", "sClass": "center"},

{"sTitle": "Grade","sClass": "center","fnRender": function(obj) {var sReturn =obj.aData[ obj.iDataColumn ];if ( sReturn == "A") {

sReturn= "A";

}returnsReturn;

}

}

],

paging:false,

order:[

[1, "asc"]

],

dom:'lrtp',

columnDefs: [

{width:'30%', targets: 0},

],

} );

} );

aoColumns 参数用来定义表格的列，这是一个数组，其中的每一个对象用来定义一列。

对于每一个列对象：

sTitle 定义列的标题

sClass 定义列的样式

fnRender 函数用来渲染列，这个函数将会传递一个参数对象，这个参数对象的 iDataColumn 属性表示当前的列索引，aData 表示当前的行数组。函数返回的结果将被填充到单元格中。

如果data是从后台传过来的二维数组，则data可以赋值如下：

data: , //aaData是后台传过来的

第二种方式是从HTML表(而不是一个Ajax或JavaScript数据源)读取数据表的内容，默认情况下它会读取表中的信息转换为内部数据表的数组。每个阵列元素表示一列。

传入的数据格式如下(如从数据库中读取返回的数据格式)：

[{"name": "...","position": "...","office": "...","age": "...","start_date": "...","salary": "..."},

{"name": "...","position": "...","office": "...","age": "...","start_date": "...","salary": "..."},

]

表格初始化的格式如下：

$(document).ready(function() {

$('#example').DataTable({"columns": [

{"data": "name", },

{"data": "position",},

{"data": "office", },

{"data": "age", },

{"data": "start_date", },

{"data": "salary" ,"visible": false,}

],"order": [

[3, "desc"]

],"sPaginationType": "full_numbers",

});

} );

使用columnDefs隐藏列

$(document).ready(function() {

$('#example').dataTable( {"columnDefs": [

{"targets": [ 2],"visible": false,"searchable": false //不可通过第三列字段内容作为关键字来搜索

},

{"targets": [ 3],"visible": false}

]

} );

} );

垂直和水平滚动

//垂直滚动

$(document).ready(function() {

$('#example').dataTable( {"scrollY": "200px","scrollCollapse": true,"paging": false} );

} );//水平滚动

$(document).ready(function() {

$('#example').dataTable( {"scrollX": true,

} );

} );

数字表达

$(document).ready(function() { //$433.060,00

$('#example').dataTable( {"language": {"decimal": ",","thousands": "."}

} );

} );

语言选择

$(document).ready(function() {

$('#example').dataTable( {"language": {"sProcessing": " 努力加载数据中.","sLengthMenu": "每页显示 _MENU_ 条记录","sZeroRecords": "抱歉， 没有找到","sInfo": "从 _START_ 到 _END_ /共 _TOTAL_ 条数据","sInfoEmpty": "没有数据","sInfoFiltered": "(从 _MAX_ 条数据中检索)","sZeroRecords": "没有检索到数据","sSearch": "模糊查询: ","oPaginate": {"sFirst": "首页","sPrevious": "前一页","sNext": "后一页","sLast": "尾页"}

},

} );

} );

分页长度选择

$(document).ready(function() {

$('#example').dataTable( {"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]]

} );

} );

多个表控制元件

$(document).ready(function() {

$('#example').dataTable( {"dom": '>rt>'} );

} );//在表格首部和尾部均有iflp的信息，并且上下是同步的

自定义toolbar

$(document).ready(function() {

$('#example').dataTable( {"dom": 'frtip'} );

$("div.toolbar").html("添加物理机");

$(".add_server").click(function(){

location.href="/server/import"})

} );

列渲染Column rendering

操纵一单元格的内容，这种技术可用于添加链接，基于内容的规则，需要指定颜色或任何其他形式的文本操作非常有用。

$(document).ready(function() {

$('#example').dataTable( {"columnDefs": [

{"render": function( data, type, row ) {return data +' ('+ row[3]+')';

},"targets": 0},

{"visible": false, "targets": [ 3] }

]

} );

} );

设置表的默认属性--Setting defaults

$.extend( $.fn.dataTable.defaults, {"searching": false,"ordering": false} );

DOM / jQuery events

$(document).ready(function() {

$('#example').dataTable();

$('#example tbody').on('click', 'tr', function() {var name = $('td', this).eq(0).text();

alert('You clicked on '+name+'\'s row');

} );

} );

行回调

$(document).ready(function() {

$('#example').dataTable( {"createdRow": function( row, data, index ) {if ( data[5].replace(/[\$,]/g, '') * 1 > 150000) {

$('td', row).eq(5).addClass('highlight');

}

},"rowCallback": function(row, data) {//ip列添加链接

if(data.ip) {

$('td:eq(3)', row).html('' + data.ip + '');

}

},

} );

} );