1. 程式人生 > >jquery.dataTable.js 基礎配置使用

jquery.dataTable.js 基礎配置使用

$("#mainTable").dataTable({
            /* 
             * sErrMode 
             * 錯誤資訊顯示方式 
             * 分別為alert和throw,預設為alert 
             */
            "sErrMode": "throw",
            /* 
             * sDom 
             * 佈局方式,可以自定義,佈局項,也可以調換佈局順序 
             * 詳解: 
             * <> 表示一個閉合的div 例如:<> = <div></div> 
             * <"類名稱"> 表示一個class="類名稱"的閉合的div 例如: <"rad"> = <div class="rad"></div> 
             * l  每行顯示的記錄數 
             * f  搜尋框 
             * r  載入時的進度條 
             * t  表格,即實際的<table></table> 
             * p  分頁條 
             * i  資料資訊,  每頁顯示x條資料、第x條-第x條、供x條資料,預設是英文 
             */
            "sDom": '<lf>rt<lpi><"clear">',
            /* 
             * sServerMethod 
             * 資料獲取方式 
             * POST/GET,預設是GET 
             */
            "sServerMethod": "POST",
            /* 
             * bDeferRender 
             * 是否啟用延遲載入:當你使用AJAX資料來源時,可以提升速度。 
             * 預設為false 
             */
            "bDeferRender": true,
            /* 
             * sScrollXInner 
             * 表格寬度 
             */
            "sScrollXInner": "100%",
            /* 
             * bScrollCollapse 
             * 當顯示的資料不足以支撐表格的預設的高度時,依然顯示縱向的滾動條。(預設是false) 
             */
            "bScrollCollapse": false,
            /* 
             * bPaginate 
             * 是否開啟分頁,預設是true 
             */
            "bPaginate": true,
            /* 
             * bLengthChange 
             * 是否允許使用者,在下拉列表自定義選擇分頁大小(10, 25, 50 and 100),需要分頁支援 
             * 預設為true 
             */
            "bLengthChange": false,
            /* 
             * bFilter 
             * 是否啟用內建搜尋功能:可以跨列搜尋。 
             * 預設為true 
             */
            "bFilter": true,
            /* 
             * bSort 
             * 是否開啟列排序功能,如果想禁用某一列排序,可以在每列設定使用bSortable引數 
             */
            "bSort": true,
            /* 
             * bInfo 
             * 是否顯示錶格相關資訊:例如翻頁資訊等。 
             * 預設值:True  
             */
            "bInfo": true,
            /* 
             * bAutoWidth 
             * 是否啟用自動適應列寬 
             * 預設值:True 
             */
            "bAutoWidth": false,
            /* 
             * bStateSave 
             * 是否開啟cookies儲存當前狀態資訊 
             * 預設值:false 
             */
            "bStateSave": false,
            /* 
             * sPaginationType 
             * 分頁方式  
             * dataTable提供full_numbers和two_button,預設是two_button 
             * 這裡採用的是自定義分頁myPagination,詳細參見jquery.dataTable.custom.js 
             */
            "sPaginationType": "myPagination",
            /* 
             * bProcessing 
             * 是否顯示載入時進度條,預設為false 
             */
            "bProcessing": true,
            /* 
             * iDisplayLength 
             * 預設每頁顯示多少條記錄 
             */
            "iDisplayLength": 10,
            /* 
             * aLengthMenu 
             * 允許使用者選擇每頁顯示多少條記錄 
             */
            "aLengthMenu": [[50, 100, -1], ["50", "100", "所有"]],
            /* 
             * oLanguage 
             * 語言設定,dataTable預設為英文,可再此設定中文顯示 
             * 注意:_MENU_、_START_、_END_、_TOTAL_、_MAX_等通配 
             */
            "oLanguage": {
                "sLengthMenu": "每頁顯示 _MENU_ 條記錄",
                "sZeroRecords": "對不起,沒有匹配的資料",
                "sInfo": "第 _START_ - _END_ 條 / 共 _TOTAL_ 條資料",
                "sInfoEmpty": "沒有匹配的資料",
                "sInfoFiltered": "(資料表中共 _MAX_ 條記錄)",
                "sProcessing": "正在載入中...",
                "sSearch": "全文搜尋:",
                "oPaginate": {
                    "sFirst": "第一頁",
                    "sPrevious": " 上一頁 ",
                    "sNext": " 下一頁 ",
                    "sLast": " 最後一頁 "
                }
            },
            /* 
             * aoColumns 
             * 資料列 
             * mData  資料來源屬性 
             * sTitle 列頭 
             * bSortable 是否參與排序 
             * mRender 自定義顯示內容,可返回html、字串 
             */
            "aoColumns": [{
                "mData": 'id',
                "sTitle": "ID",
                "bSortable": true
            }, {
                "mData": 'name',
                "sTitle": "Name",
                "bSortable": true
            }, {
                "mData": 'age',
                "sTitle": "Age",
                "bSortable": true,
                "mRender": function (data, type, row) {
                    return data;
                }
            }, {
                "mData": 'work',
                "sTitle": "Work",
                "bSortable": true
            }],
            /* 
             * fnInitComplete 
             * 表格初始化完成後的回撥 
             */
            "fnInitComplete": function () {

            },
            /* 
             * fnDrawCallback 
             * 表格繪製完成後的回撥 
             */
            "fnDrawCallback": function () {

            },
            /* 
             * 資料來源url,ajax請求路徑 
             */
            "sAjaxSource": "xx/xx/xxx/xxx/xxx"
        });