點這裡進入ABP進階教程目錄 

解讀參數

• l - length changing input control (左上，每頁顯示記錄數)

• f - filtering input (右上，過濾條件)

• t - The table (中央，數據表格)

• r - processing display element (中央，過場動畫) 

• i - Table information summary (左下，表格信息)

• p - pagination control (右下，分頁)

• 

佈局配置

打開展示層(即JD.CRS.Web.Mvc)的\wwwroot\view-resources\Views\Course\Index.js //用以存放Course查詢相關腳本

配置插件參數．

左上，每頁顯示記錄數

aLengthMenu

設置每頁顯示記錄數的下拉框，第一項為預設值．

aLengthMenu: [[10, 25, 50, -1], [10, 25, 50, "全部"]], //每頁顯示記錄數

左下，表格信息

sInfo

設置表格信息顯示內容及格式

註: 格式為"_大寫英文_"的是內置參數．

例如: 

_PAGE_ //當前頁數

_PAGES_ //總頁數

"sInfo": "顯示第 _START_ 至 _END_ 項記錄，共 _TOTAL_ 項", //當有數據時顯示當前記錄範圍
"sInfo": "第 _PAGE_ 頁/共 _PAGES_ 頁", //當有數據時顯示當前頁
"sInfoEmpty": "顯示第 0 至 0 項記錄 / 共 0 項", //當無數據時顯示
"sInfoFiltered": "(從 _MAX_ 條記錄過濾)", //過濾時顯示

右下，分頁

pagingType

設置分佈類型，5種可選．

pagingType: "full_numbers", //分頁類型
//可選參數
numbers // 只顯示數字 
simple // 只顯示上頁/下頁 
simple_numbers // 顯示上頁/下頁/數字
full // 顯示首頁/末頁/上頁/下頁
full_numbers // 顯示首頁/末頁/上頁/下頁/數字

佈局參數

dom

排列佈局六大元素(lfrtip)，順序可任意調換．

dom: 'lfrtip', //簡單佈局
dom: "<'row'<'col-sm-6'l><'col-sm-6'f>>" + "<'row'<'col-sm-12'tr>>" + "<'row'<'col-sm-6'i><'col-sm-6'p>>", //定製佈局 

滾動設置

lfscrollY

預設設置高度按內容自動調整．
可手動修改設置為固定高度．

scrollY: 470, //固定高度，內容過多時顯示滾動條

預覽效果

佈局調整效果如下．