1. 程式人生 > >jquery.dataTable.js 基礎配置記錄

jquery.dataTable.js 基礎配置記錄

mda pty 類名 pro def 詳細 cookie 進度 gin

$("#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" });

jquery.dataTable.js 基礎配置記錄