MDB5-Datatable資料型表單教學

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

文章關鍵字:MDB Bootstrap 網頁技術

更多文章: