MDB5-Datatable資料型表單教學
訂單或是會員資料列表適合使用資料型表單，由其當內容大量時更適合。MDB5中的資料型表單，建議利用json帶入內容資料較方便，也可一次匯入。
官方網站寫法有兩種，一種是html，另一種是使用JavaScript，不過一但使用JavaScript方式寫入資料，html的屬性設定就沒有作用
(例如同樣是限制高度，在html寫入 data-mdb-max-height="520" 失效，但改在JavaScript裡面改寫入 maxHeight: "520px" 就可以)
【基本使用】
Html中寫入指定區塊，並命名ID
<div id="datatable"></div>
帶入json
| <script type="text/javascript"> const advancedData = { columns: [ { label: 'Name', field: 'name' }, { label: 'Position', field: 'position', sort: false }, { label: 'Office', field: 'office', sort: false }, { label: 'Age', field: 'age', sort: false }, { label: 'Start date', field: 'date' }, { label: 'Salary', field: 'salary', sort: false }, ], rows: [ { name: 'Tiger Nixon', position: 'System Architect', office: 'Edinburgh', age: 61, date: '2011/04/25', salary: '$320,800', }, { name: 'Paul Byrd', position: 'Chief Financial Officer (CFO)', office: 'New York', age: 64, date: '2010/06/09', salary: '$725,000', }, ], }; new mdb.Datatable(document.getElementById('datatable'), advancedData, {bordered: true, fullPagination: true, striped: true,fixedHeader: true,maxHeight: "60vh"} ) </script> |
解釋:
1.columns: 欄位，標題和該欄變數對應在此，'Office' 是欄位標題文; field: 'office'是對應數值; sort: false.決定是否要能排序，需要時改true
2. row: 每列數值，會有對應的名稱和內容
3.advancedData,：使用json的進階表單，可在json裡面加入連結或各種icon，如果想帶入csv的話可改用基礎表單 basicData
4.bordered: true,...樣式設定：使用產生器樣式加入這段，必須放在指定ID的括號裡面
maxHeight: "60vh" 如果增加最大高度限制， Y軸有卷軸
【JSON的使用】
如果需要JSON假資料可利用此網站產生 https://www.json-generator.com/
寫好範本並且帶入字串即可產生所需筆數
例如
[
'{{repeat(30)}}',
{
status: '<i class="fas fa-minus-circle text-danger"></i>',
ga: '新版V2',
company: '{{company()}}',
account: '{{company()}}',
backstage: '<a href="#" target="_blank" title="進入後台"><i class="fas fa-pen"></i> </a>',
date: ['{{date(new Date(2010, 0, 1), new Date(), "YYYY-MM-dd")}}','{{date(new Date(2012, 0, 1), new Date(), "YYYY-MM-dd")}}'],
loginTime: ' {{date(new Date(2017, 0, 1), new Date(),"YYYY-MM-dd hh:mm:ss")}}',
modifyTime: ' {{date(new Date(2017, 0, 1), new Date(), "YYYY-MM-dd hh:mm:ss")}}',
salary: '{{integer(3000,10000)}}',
totalList: '{{integer(100,1000)}}',
mi: '{{integer(300,1000)}}',
dealer: '一般客戶',
}
]
repeat代表筆數，可以決定要產生幾筆，其他內容可點Help觀看說明跟範例
內容可寫html，但無法增加連結
使用方式參考文件說明的API
