前端經常使用功能記錄(三)—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>'); } }, } ); } );

 http://www.cnblogs.com/zhoujie/p/js4.html