iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 21
0
Modern Web

ASP.NET MVC5架構說明與Q&A諮詢系統實作系列 第 21

[DAY 21] 網頁表格模板 - Data Tables 下篇

那就繼續昨天的主題 (。◕∀◕。)

  1. 首先,先到它的官網
    https://ithelp.ithome.com.tw/upload/images/20201002/20128969OGkL5CgQwE.png

  2. 我們就直接套用最陽春的樣式當示範(就是首頁的表格,但沒有前面的 + 的功能)
    https://ithelp.ithome.com.tw/upload/images/20201003/20128969Feph0B2eZx.png

    今天用之前的 Test 專案來做示範
    先將這兩個檔案下載下來,並將它們放在各自的資料夾裡(也可以自己創一個資料夾,看個人需求)
    https://ithelp.ithome.com.tw/upload/images/20201003/20128969v5SLIT6I80.png

  3. 打開 Test 專案 ➡ Views/Quer/Index

    • 為 Table 命名 id,這邊另 id="table"

    • 新增 thead 和 tbody,將表格分成兩個部分(一定要分才可以套用ㄡ!)
      https://ithelp.ithome.com.tw/upload/images/20201003/201289696D9zhpOC4G.png

      https://ithelp.ithome.com.tw/upload/images/20201003/20128969v5oZ53Kq6B.png

    • 把要套用的東西都叫出來
      這邊盡量更新到最新的 jQuery 3.5.1,還有套用 Data Tables 的 CSS 跟 JS
      第 66 行,後面加的 defer 延遲,給文件多次加載jquery
      (一開始沒加一直錯誤,卡在這裡好久 ( ̄▽ ̄)/
      https://ithelp.ithome.com.tw/upload/images/20201003/20128969NPtkFuyF0C.png

    • 最後就是套用在表格上,#table 就是剛剛 id 的命名
      https://ithelp.ithome.com.tw/upload/images/20201004/2012896913ymmbwrai.png

      到這邊執行的畫面會長這樣!
      但有沒有發現,每個欄位的箭頭不見了?三角形排序的箭頭??
      https://ithelp.ithome.com.tw/upload/images/20201004/20128969v6PtKpvbtq.png

      我們就在加這幾行,把箭頭加上去,真的大功告成囉 (´▽`ʃ♡ƪ)
      https://ithelp.ithome.com.tw/upload/images/20201004/20128969kDpSry2f2L.png

  4. 最最最 後放個對比圖,更改過後的表格是不是很不錯!
    套用成功後可以慢慢研究它的功能
    https://ithelp.ithome.com.tw/upload/images/20201004/201289696wb25idhci.png


上一篇
[DAY 20] 網頁表格模板 - Data Tables 上篇
下一篇
[DAY 22] Q&A諮詢系統 - 系統規劃、系統分析(上)
系列文
ASP.NET MVC5架構說明與Q&A諮詢系統實作30

尚未有邦友留言

立即登入留言