jquery datatables 的常見參數配置

時間 2019-11-30

標籤 jquery datatables 常見參數配置欄目 JQuery 简体版

原文原文鏈接

1:導入包：javascript

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

分別導入css和js文件html

    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>  

加載java

    Html代碼   
    
  
<</span>script type="text/javascript">  
        $(document).ready(function() {  
            $('#example').dataTable();  
        });  
    </</span>script>  

表單jquery

    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方法ajax

緣由

window.onload必須等到頁面內包括圖片的全部元素加載完畢後才能執行。
$(document).ready()是DOM結構繪製完畢後就執行，沒必要等到加載完畢。

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

    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;  
         }  

傳入的是一個對象數組，每一個對象表明一行，對象的屬性便是列api

單擊時獲得某行的值數組

需要引入 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');  
                     });  
                     $(event.target.parentNode).addClass('row_selected');  
                     var aData = docrTable.fnGetData(event.target.parentNode);  
                       
                     $("#userId").val(aData.USERID);  
                     $("#userN").val(aData.USERNAME);  
                 });  
                   
                 $('#docrevisontable_filter').html('用戶管理列表');  
                 $('#docrevisontable_filter').append('   ');  
                 $('#docrevisontable_filter').append('   ');  
                 $('#docrevisontable_filter').append('   ');  
                 $('#docrevisontable_filter').append('');  
         }  

設置隱藏列

    Js代碼   
    
  
 var oTable = $('#example').dataTable();  
 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代碼   
    
  
 var tableSetings=$('#example').dataTable().fnSettings()  
 var paging_length=tableSetings._iDisplayLength;//當前每頁顯示多少  
 var page_start=tableSetings._iDisplayStart;//當前頁開始  
 var page=Div(page_start,paging_length);  
   
 function Div(exp1, exp2) {  //整除  
     var n1 = Math.round(exp1); //四捨五入     
     var n2 = Math.round(exp2); //四捨五入    
   
     var rslt = n1 / n2; //除    
     if (rslt >= 0) {  
         rslt = Math.floor(rslt); //返回小於等於原rslt的最大整數。     
     }  
     else {  
         rslt = Math.ceil(rslt); //返回大於等於原rslt的最小整數。     
     }  
     return rslt;  
 }  

設置datatables跳轉到某頁

    Js代碼   
    
 $('#example').dataTable().fnPageChange(page);

注意：因爲後臺數據可能已經被其它人改變（記錄個數與如今前臺不一致），因此數據fnUpdate時需要判斷先後端數據的一致性，只刷新前臺有的數據的狀態

dom:

http://datatables.net/release-datatables/examples/advanced_init/language_file.html國際化

最後註明：本文轉自http://blog.csdn.net/lisky119/article/details/25884197

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。