其实上篇说的也算是jQuery Datatables的初始化,但主要是对某些字段意义的理解。下面记录的是datatables常用的功能的初始化。
数据源
我经常使用的有两种,一种是JavaScript 中的数组,通过在初始化对象中传递一个名为 aaData 的数组,同样可以提供表格数据,前缀 aa 说明这是一个数组的数组,外层的数组表示表格的行,每一行同样是一个数组。
(字段的命名可以使用类型加字段名称也可以直接使用如aaData,也可以是data,aoColumns,也可以是columns)
如:
$(document).ready(function() { $(‘#demo‘).html( ‘<table class="table b-t b-light" id="datatables"> </table>‘ ); $(‘#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 = "<b>A</b>"; } return sReturn; } } ], paging: false, order:[ [1, "asc"] ], dom: ‘lrtp‘, columnDefs: [ {width: ‘30%‘, targets: 0}, ], } ); } );
aoColumns 参数用来定义表格的列,这是一个数组,其中的每一个对象用来定义一列。
对于每一个列对象:
sTitle 定义列的标题
sClass 定义列的样式
fnRender 函数用来渲染列,这个函数将会传递一个参数对象,这个参数对象的 iDataColumn 属性表示当前的列索引,aData 表示当前的行数组。函数返回的结果将被填充到单元格中。
如果data是从后台传过来的二维数组,则data可以赋值如下:
data: <%- JSON.stringify(aaData) %>, // 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": "<img src=‘/images/datatable_loading.gif‘> 努力加载数据中.", "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": ‘<"top"iflp<"clear">>rt<"bottom"iflp<"clear">>‘ } ); } ); //在表格首部和尾部均有iflp的信息,并且上下是同步的
自定义toolbar
$(document).ready(function() { $(‘#example‘).dataTable( { "dom": ‘<"toolbar">frtip‘ } ); $("div.toolbar").html("<button class=‘btn btn-primary add_server‘><span>添加物理机</span></button>"); $(".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(‘<a target="_blank" href=http://‘ + data.ip + ‘>‘ + data.ip + ‘</a>‘); } }, } ); } );
时间: 2024-10-11 02:10:54