time ucc call 支持 with mob XML cti pan

1:導入包：

URL：http://www.datatables.net/

分別導入css和js文件

Html代碼

1. <</span>style type="text/css" title="currentStyle">
2. @import "css/demo_page.css";
4. @import "css/demo_table.css";
6. @import "css/demo_table_jui.css";
7. </</span>style>
8. <</span>script type="text/javascript" language="javascript"
9. src="js/jquery.js"></</span>script>
11. <</span>script type="text/javascript" language="javascript"
12. src="js/jquery.dataTables.js"></</span>script>

加載

Html代碼

1. <</span>script type="text/javascript">
2. $(document).ready(function() {
3. $(‘#example‘).dataTable();
4. });
5. </</span>script>

表單

Html代碼

1. <</span>div class="col_2_3_right">
2. <</span>div class="index_viewport">
3. <</span>table id="example" cellpadding="0" cellspacing="0" border="0" width="100%">
4. <</span>thead>
5. <</span>tr>
6. <</span>th width="20%">First name</</span>th>
7. <</span>th width="20%">Last name</</span>th>
8. <</span>th width="35%">City</</span>th>
9. <</span>th width="25%">Date</</span>th>
10. </</span>tr>
11. </</span>thead>
12. </</span>table>
13. </</span>div>
14. </</span>div>

問題：有時提示找不到datatable方法

原因 window.onload必須等到頁面內包括圖片的所有元素加載完畢後才能執行。
$(document).ready()是DOM結構繪制完畢後就執行，不必等到加載完畢。

從後臺ajax得數據重建datatables（表單的id要與json的key一致）

Js代碼

1. $.ajax({
2. 　　type:‘get‘,//可選get
3. 　　url:‘${projectPath}/search‘,
4. 　　data:{"channelType":$(‘#channelType‘).val(),"channel":$(‘#channel‘).val(),"day":$(‘#day‘).val(),"startTime":$(‘#startTime‘).val(),"endTime":$(‘#endTime‘).val(),"database":$(‘#database‘).val()},
5. 　　dataType:‘text‘,//服務器返回的數據類型 可選XML ,Json jsonp script htmltext等
6. 　　success:function(msg){
7. var msgObj=JSON.parse(msg);
8. //重新構建table
9. $(‘#example‘).dataTable().fnClearTable(); //將數據清除
10. 　 $(‘#example‘).dataTable().fnAddData(packagingdatatabledata(msgObj),true); //數據必須是json對象或json對象數組
11. 　
12. 　　},
13. 　　error:function(){
14. 　　alert(‘error‘);
15. 　　}
16. })})

傳入的數據

Js代碼

1. //把服務器返回的數據轉成datatable須要的格式
2. function packagingdatatabledata(msgObj){
3. var editHtml="編輯";
4. //var editHtml="編輯";
5. var a=[];
6. var tableName=[‘day‘,‘data‘,‘indata‘,‘edit‘];
7. var banddata=storjson(msgObj[‘data‘]);
8. var bandindata=storjson(msgObj[‘indata‘]);
9. for(var key in banddata){
10. var tempObj=new Object();
11. tempObj.day=key;
12. tempObj.data=banddata[key];
13. tempObj.indata=bandindata[key];
14. tempObj.edit=editHtml;
15. a.push(JSON.parse(JSON.stringify(tempObj,tableName)));
16. }
17. return a;
18. }

傳入的是一個對象數組，每個對象代表一行，對象的屬性即是列

單擊時得到某行的值

須要引入 jquery.dataTables.nightly.js 在附件中有

Js代碼

1. $(document).ready(function() {
3. $(‘#example‘).dataTable();
4. $(‘#example tbody tr‘).live(‘click‘, function () {
5. var sTitle;
6. var nTds = $(‘td‘, this);
7. var sday = $(nTds[0]).text(); //得到第1列的值
8. var sout = $(nTds[1]).text();
9. var sin = $(nTds[2]).text();
11. } );
13. } );

2：詳細配置

Js代碼

1. var docrTable = $(‘#docrevisontable‘).dataTable({
2. "bProcessing" : true, //DataTables載入數據時，是否顯示‘進度’提示
3. "bServerSide" : true, //是否啟動服務器端數據導入
4. "bStateSave" : true, //是否打開客戶端狀態記錄功能,此功能在ajax刷新紀錄的時候不會將個性化設定回復為初始化狀態
5. "bJQueryUI" : true, //是否使用 jQury的UI theme
6. "sScrollY" : 450, //DataTables的高
7. "sScrollX" : 820, //DataTables的寬
8. "aLengthMenu" : [20, 40, 60], //更改顯示記錄數選項
9. "iDisplayLength" : 40, //默認顯示的記錄數
10. "bAutoWidth" : false, //是否自適應寬度
11. //"bScrollInfinite" : false, //是否啟動初始化滾動條
12. "bScrollCollapse" : true, //是否開啟DataTables的高度自適應，當數據條數不夠分頁數據條數的時候，插件高度是否隨數據條數而改變
13. "bPaginate" : true, //是否顯示（應用）分頁器
14. "bInfo" : true, //是否顯示頁腳信息，DataTables插件左下角顯示記錄數
15. "sPaginationType" : "full_numbers", //詳細分頁組，可以支持直接跳轉到某頁
16. "bSort" : true, //是否啟動各個字段的排序功能
17. "aaSorting" : [[1, "asc"]], //默認的排序方式，第2列，升序排列
18. "bFilter" : true, //是否啟動過濾、搜索功能
19. "aoColumns" : [{
20. "mDataProp" : "USERID",
21. "sDefaultContent" : "", //此列默認值為""，以防數據中沒有此值，DataTables加載數據的時候報錯
22. "bVisible" : false //此列不顯示
23. }, {
24. "mDataProp" : "USERNAME",
25. "sTitle" : "用戶名",
26. "sDefaultContent" : "",
27. "sClass" : "center"
28. }, {
29. "mDataProp" : "EMAIL",
30. "sTitle" : "電子郵箱",
31. "sDefaultContent" : "",
32. "sClass" : "center"
33. }, {
34. "mDataProp" : "MOBILE",
35. "sTitle" : "手機",
36. "sDefaultContent" : "",
37. "sClass" : "center"
38. }, {
39. "mDataProp" : "PHONE",
40. "sTitle" : "座機",
41. "sDefaultContent" : "",
42. "sClass" : "center"
43. }, {
44. "mDataProp" : "NAME",
45. "sTitle" : "姓名",
46. "sDefaultContent" : "",
47. "sClass" : "center"
48. }, {
49. "mDataProp" : "ISADMIN",
50. "sTitle" : "用戶權限",
51. "sDefaultContent" : "",
52. "sClass" : "center"
53. }],
54. "oLanguage": { //國際化配置
55. "sProcessing" : "正在獲取數據，請稍後...",
56. "sLengthMenu" : "顯示 _MENU_ 條",
57. "sZeroRecords" : "沒有您要搜索的內容",
58. "sInfo" : "從 _START_ 到 _END_ 條記錄 總記錄數為 _TOTAL_ 條",
59. "sInfoEmpty" : "記錄數為0",
60. "sInfoFiltered" : "(全部記錄數 _MAX_ 條)",
61. "sInfoPostFix" : "",
62. "sSearch" : "搜索",
63. "sUrl" : "",
64. "oPaginate": {
65. "sFirst" : "第一頁",
66. "sPrevious" : "上一頁",
67. "sNext" : "下一頁",
68. "sLast" : "最後一頁"
69. }
70. },
72. "fnRowCallback" : function(nRow, aData, iDisplayIndex) {
74. if (aData.ISADMIN == ‘1‘)
75. $(‘td:eq(5)‘, nRow).html(‘管理員‘);
76. if (aData.ISADMIN == ‘2‘)
77. $(‘td:eq(5)‘, nRow).html(‘資料下載‘);
78. if (aData.ISADMIN == ‘3‘)
79. $(‘td:eq(5)‘, nRow).html(‘一般用戶‘);
81. return nRow;
82. },
84. "sAjaxSource" : "../use/userList.do?now=" + new Date().getTime(),
85. //服務器端，數據回調處理
86. "fnServerData" : function(sSource, aDataSet, fnCallback) {
87. $.ajax({
88. "dataType" : ‘json‘,
89. "type" : "POST",
90. "url" : sSource,
91. "data" : aDataSet,
92. "success" : fnCallback
93. });
94. }
95. });
97. $("#docrevisontable tbody").click(function(event) { //當點擊表格內某一條記錄的時候，會將此記錄的cId和cName寫入到隱藏域中
98. $(docrTable.fnSettings().aoData).each(function() {
99. $(this.nTr).removeClass(‘row_selected‘);
100. });
101. $(event.target.parentNode).addClass(‘row_selected‘);
102. var aData = docrTable.fnGetData(event.target.parentNode);
104. $("#userId").val(aData.USERID);
105. $("#userN").val(aData.USERNAME);
106. });
108. $(‘#docrevisontable_filter‘).html(‘用戶管理列表‘);
109. $(‘#docrevisontable_filter‘).append(‘ ‘);
110. $(‘#docrevisontable_filter‘).append(‘ ‘);
111. $(‘#docrevisontable_filter‘).append(‘ ‘);
112. $(‘#docrevisontable_filter‘).append(‘‘);
113. }

設置隱藏列

Js代碼

1. var oTable = $(‘#example‘).dataTable();
2. oTable.fnSetColumnVis( 0, false);//隱藏列

得到當前頁面中的數據

var alldata=$(‘#example‘).dataTable().fnGetData();//得到頁面中所有對象

// Row data
$(document).ready(function() {
oTable = $(‘#example‘).dataTable();

oTable.$(‘tr‘).click( function () {
var data = oTable.fnGetData( this );
// ... do something with the array / object of data for the row
} );
} );


// Individual cell data
$(document).ready(function() {
oTable = $(‘#example‘).dataTable();

oTable.$(‘td‘).click( function () {
var sData = oTable.fnGetData( this );
alert( ‘The cell clicked on had the value of ‘+sData );
} );
} );

刷新表中的數據(最後一個參數是否重繪表格，false你瀏覽到第二頁不會刷跑到第一頁，但數據不會改變)

$(‘#example‘).dataTable().fnUpdate( ‘a‘ , 1 , 1 ,false); //coll
$(‘#example‘).dataTable().fnUpdate( [‘a‘,‘b‘] , 1 ); //row

得到當前瀏覽的datatables頁碼

Js代碼

1. var tableSetings=$(‘#example‘).dataTable().fnSettings()
2. var paging_length=tableSetings._iDisplayLength;//當前每頁顯示多少
3. var page_start=tableSetings._iDisplayStart;//當前頁開始
4. var page=Div(page_start,paging_length);
6. function Div(exp1, exp2) { //整除
7. var n1 = Math.round(exp1); //四舍五入
8. var n2 = Math.round(exp2); //四舍五入
10. var rslt = n1 / n2; //除
11. if (rslt >= 0) {
12. rslt = Math.floor(rslt); //返回小於等於原rslt的最大整數。
13. }
14. else {
15. rslt = Math.ceil(rslt); //返回大於等於原rslt的最小整數。
16. }
17. return rslt;
18. }

設置datatables跳轉到某頁

Js代碼

1. $(‘#example‘).dataTable().fnPageChange(page);

註意：由於後臺數據可能已經被其它人改變（記錄個數與現在前臺不一致），所以數據fnUpdate時須要判斷前後端數據的一致性，只刷 新前臺有的數據的狀態

dom:

http://datatables.net/release-datatables/examples/api/select_single_row.html 選擇一行 http://datatables.net/release-datatables/examples/api/select_row.html選擇多行 http://datatables.net/release-datatables/examples/api/editable.html 即時編輯行 http://datatables.net/release-datatables/examples/api/tabs_and_scrolling.html 多個tab http://datatables.net/release-datatables/examples/api/add_row.html添加一行（靜態） http://datatables.net/release-datatables/examples/api/multi_filter.html多列搜索 http://datatables.net/release-datatables/examples/api/multi_filter_select.html多列搜索（擴展） http://datatables.net/release-datatables/examples/api/highlight.html行列 高亮 http://datatables.net/release-datatables/examples/advanced_init/highlight.html 鼠標移上去亮 http://datatables.net/release-datatables/examples/api/row_details.html行詳細信息 http://datatables.net/release-datatables/examples/api/counter_column.html添加行數 http://datatables.net/release-datatables/examples/api/show_hide.html隱藏列 http://datatables.net/release-datatables/examples/api/api_in_init.html點中即為搜索條件 http://datatables.net/release-datatables/examples/advanced_init/events_live.html 給每一個行添加事件顯示行的信息 http://datatables.net/release-datatables/examples/advanced_init/events_pre_init.html鼠標事件 移到某一行顯示信息 http://datatables.net/release-datatables/examples/advanced_init/events_post_init.html 同上 http://datatables.net/release-datatables/examples/advanced_init/dom_multiple_elements.html 用sdom屬性控制插件位置 http://datatables.net/release-datatables/examples/advanced_init/dom_toolbar.htmlsdom應用 http://datatables.net/release-datatables/examples/advanced_init/length_menu.html更改按多少數據顯示 http://datatables.net/release-datatables/examples/advanced_init/complex_header.html表頭組 http://datatables.net/release-datatables/examples/advanced_init/row_grouping.html按組顯示行 http://datatables.net/release-datatables/examples/advanced_init/row_callback.html列回調函數 http://datatables.net/release-datatables/examples/advanced_init/footer_callback.html總計（footer回調） http://datatables.net/release-datatables/examples/advanced_init/sorting_control.html自定義排序 http://datatables.net/release-datatables/examples/advanced_init/language_file.html國際化

jquery datatables 的常見參數配置