jquery datatables 引數配置及其資料更新
阿新 • • 發佈：2019-02-13
1:匯入包：
分別匯入css和js檔案
Html程式碼
- <</span>style type="text/css" title="currentStyle">
- @import "css/demo_page.css";
- @import "css/demo_table.css";
- @import "css/demo_table_jui.css";
- </</span>style>
- <</span>script type="text/javascript" language="javascript"
-
src="js/jquery.js"></</span>script>
- <</span>script type="text/javascript" language="javascript"
- src="js/jquery.dataTables.js"></</span>script>
載入
Html程式碼
- <</span>script type="text/javascript">
- $(document).ready(function() {
- $('#example').dataTable();
-
});
- </</span>script>
表單
Html程式碼
- <</span>div class="col_2_3_right">
- <</span>div class="index_viewport">
- <</span>table id="example" cellpadding="0" cellspacing="0" border="0" width="100%">
-
<</span>thead>
- <</span>tr>
- <</span>th width="20%">First name</</span>th>
- <</span>th width="20%">Last name</</span>th>
- <</span>th width="35%">City</</span>th>
- <</span>th width="25%">Date</</span>th>
- </</span>tr>
- </</span>thead>
- </</span>table>
- </</span>div>
- </</span>div>
問題：有時提示找不到datatable方法
原因 window.onload必須等到頁面內包括圖片的所有元素載入完畢後才能執行。$(document).ready()是DOM結構繪製完畢後就執行，不必等到載入完畢。
從後臺ajax得資料重建datatables（表單的id要與json的key一致）
Js程式碼
- $.ajax({
- type:'get',//可選get
- url:'${projectPath}/search',
- data:{"channelType":$('#channelType').val(),"channel":$('#channel').val(),"day":$('#day').val(),"startTime":$('#startTime').val(),"endTime":$('#endTime').val(),"database":$('#database').val()},
- dataType:'text',//伺服器返回的資料型別 可選XML ,Json jsonp script htmltext等
- success:function(msg){
- var msgObj=JSON.parse(msg);
- //重新構建table
- $('#example').dataTable().fnClearTable(); //將資料清除
- $('#example').dataTable().fnAddData(packagingdatatabledata(msgObj),true); //資料必須是json物件或json物件陣列
- },
- error:function(){
- alert('error');
- }
- })})
傳入的資料
Js程式碼
- //把伺服器返回的資料轉成datatable須要的格式
- function packagingdatatabledata(msgObj){
- var editHtml="編輯";
- //var editHtml="編輯";
- var a=[];
- var tableName=['day','data','indata','edit'];
- var banddata=storjson(msgObj['data']);
- var bandindata=storjson(msgObj['indata']);
- for(var key in banddata){
- var tempObj=new Object();
- tempObj.day=key;
- tempObj.data=banddata[key];
- tempObj.indata=bandindata[key];
- tempObj.edit=editHtml;
- a.push(JSON.parse(JSON.stringify(tempObj,tableName)));
- }
- return a;
- }
傳入的是一個物件陣列，每個物件代表一行，物件的屬性即是列
單擊時得到某行的值
須要引入 jquery.dataTables.nightly.js 在附件中有
Js程式碼
- $(document).ready(function() {
- $('#example').dataTable();
- $('#example tbody tr').live('click', function () {
- var sTitle;
- var nTds = $('td', this);
- var sday = $(nTds[0]).text(); //得到第1列的值
- var sout = $(nTds[1]).text();
- var sin = $(nTds[2]).text();
- } );
- } );
2：詳細配置
Js程式碼
- var docrTable = $('#docrevisontable').dataTable({
- "bProcessing" : true, //DataTables載入資料時，是否顯示‘進度’提示
- "bServerSide" : true, //是否啟動伺服器端資料匯入
- "bStateSave" : true, //是否開啟客戶端狀態記錄功能,此功能在ajax重新整理紀錄的時候不會將個性化設定回覆為初始化狀態
- "bJQueryUI" : true, //是否使用 jQury的UI theme
- "sScrollY" : 450, //DataTables的高
- "sScrollX" : 820, //DataTables的寬
- "aLengthMenu" : [20, 40, 60], //更改顯示記錄數選項
- "iDisplayLength" : 40, //預設顯示的記錄數
- "bAutoWidth" : false, //是否自適應寬度
- //"bScrollInfinite" : false, //是否啟動初始化滾動條
- "bScrollCollapse" : true, //是否開啟DataTables的高度自適應，當資料條數不夠分頁資料條數的時候，外掛高度是否隨資料條數而改變
- "bPaginate" : true, //是否顯示（應用）分頁器
- "bInfo" : true, //是否顯示頁尾資訊，DataTables外掛左下角顯示記錄數
- "sPaginationType" : "full_numbers", //詳細分頁組，可以支援直接跳轉到某頁
- "bSort" : true, //是否啟動各個欄位的排序功能
- "aaSorting" : [[1, "asc"]], //預設的排序方式，第2列，升序排列
- "bFilter" : true, //是否啟動過濾、搜尋功能
- "aoColumns" : [{
- "mDataProp" : "USERID",
- "sDefaultContent" : "", //此列預設值為""，以防資料中沒有此值，DataTables載入資料的時候報錯
- "bVisible" : false //此列不顯示
- }, {
- "mDataProp" : "USERNAME",
- "sTitle" : "使用者名稱",
- "sDefaultContent" : "",
- "sClass" : "center"
- }, {
- "mDataProp" : "EMAIL",
- "sTitle" : "電子郵箱",
- "sDefaultContent" : "",
- "sClass" : "center"
- }, {
- "mDataProp" : "MOBILE",
- "sTitle" : "手機",
- "sDefaultContent" : "",
- "sClass" : "center"
- }, {
- "mDataProp" : "PHONE",
- "sTitle" : "座機",
- "sDefaultContent" : "",
- "sClass" : "center"
- }, {
- "mDataProp" : "NAME",
- "sTitle" : "姓名",
- "sDefaultContent" : "",
- "sClass" : "center"
- }, {
- "mDataProp" : "ISADMIN",
- "sTitle" : "使用者許可權",
- "sDefaultContent" : "",
- "sClass" : "center"
- }],
- "oLanguage": { //國際化配置
- "sProcessing" : "正在獲取資料，請稍後...",
- "sLengthMenu" : "顯示 _MENU_ 條",
- "sZeroRecords" : "沒有您要搜尋的內容",
- "sInfo" : "從 _START_ 到 _END_ 條記錄 總記錄數為 _TOTAL_ 條",
- "sInfoEmpty" : "記錄數為0",
- "sInfoFiltered" : "(全部記錄數 _MAX_ 條)",
- "sInfoPostFix" : "",
- "sSearch" : "搜尋",
- "sUrl" : "",
- "oPaginate": {
- "sFirst" : "第一頁",
- "sPrevious" : "上一頁",
- "sNext" : "下一頁",
- "sLast" : "最後一頁"
- }
- },
- "fnRowCallback" : function(nRow, aData, iDisplayIndex) {
- if (aData.ISADMIN == '1')
- $('td:eq(5)', nRow).html('管理員');
- if (aData.ISADMIN == '2')
- $('td:eq(5)', nRow).html('資料下載');
- if (aData.ISADMIN == '3')
- $('td:eq(5)', nRow).html('一般使用者');
- return nRow;
- },
- "sAjaxSource" : "../use/userList.do?now=" + new Date().getTime(),
- //伺服器端，資料回撥處理
- "fnServerData" : function(sSource, aDataSet, fnCallback) {
- $.ajax({
- "dataType" : 'json',
- "type" : "POST",
- "url" : sSource,
- "data" : aDataSet,
- "success" : fnCallback
- });
- }
- });
- $("#docrevisontable tbody").click(function(event) { //當點選表格內某一條記錄的時候，會將此記錄的cId和cName寫入到隱藏域中
- $(docrTable.fnSettings().aoData).each(function() {
- $(this.nTr).removeClass('row_selected');