GridView + DataTables.js

閱讀時間約 2 分鐘
如果想要在GridView控制項上套用DataTables.js的話有以下幾種方式。

一、純顯示用的GridView

由於DataTables使用上需要套在完整的table格式中, 使用GridView會沒有<thead>的部分,將無法套用。
這時請在後端你的Gridview DataBound區塊加入以下程式碼:
If (e.Row.RowTye = DataControlRowType.Header) Then
e.Row.TableSection = TableRowSection.TableHeader
End If

二、有控制項的Gridview

有控制項的GridView則不適用「一」的方法,由於控制項有Postback的問題,在Postback後,DataTables並不會再重新initiate一次,這時不要更改後端code,直接用前端JS加入<thead>。判斷方式如下
$(document).ready( function() {
bindDataTable();
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(bindDataTable);
})
Function bindDataTable() {
if (document.getElementById(”<% YourGridViewID.ClientID %>”).rows.length > 1) { $(”#YourGridViewID”).prepend($(”<thead></thead>”).append($(”#YourGridViewID”).find(”tr:first”))).DataTable });
}
註:套用時記得要引用css & js喔。
留言0
查看全部
發表第一個留言支持創作者!
你可能也想看
Google News 追蹤
Thumbnail
本專欄將提供給您最新的市場資訊、產業研究、交易心法、精選公司介紹,以上內容並非個股分析,還請各位依據自身狀況作出交易決策。歡迎訂閱支持我,獲得相關內容,也祝您的投資之路順遂! 每年 $990 訂閱方案👉 https://reurl.cc/VNYVxZ 每月 $99 訂閱方案👉https://re
Thumbnail
JavaScript30 傳送門:https://javascript30.com/ 寫到挑戰六覺得心累ㄌ,向來不是一個可以長久堅持好習慣的人,30 個挑戰聽起來很少,但如果要日復一日堅持下去其實好長r 😮‍💨 挑戰六透過 input 來 filter 從 api 拿回來的資料結
Thumbnail
JavaScript30 傳送門:https://javascript30.com/ 挑戰5透過玩弄 flex-grow 屬性來操作網頁裡的卡片效果,看別人的成果:yhabib.github.io 本次學習心得: 製造過度效果延遲的方法:transition-delay V.S
Thumbnail
JavaScript30 傳送門:https://javascript30.com/ Console.table 第四個練習是透過一些 array method 來操作 array 資料。 整個練習最讓我 WOW 的,是 console.table,竟然有這麼酷的 console
Thumbnail
JavaScript30 傳送門:https://javascript30.com/ 透過 JS 控制 CSS 變數 今天的挑戰是要能透過滑動圖片上面的 <input type="range"> 來改變圖片的三個屬性。 以前在 CSS 裡面看到 var(--xxxx) 這種東西都很
Thumbnail
下面代碼為兩列的GridView class HomePage extends StatelessWidget { @override Widget build(BuildContext context) { return new GridView.count( cro
過去我嘗試學習 JS 蠻多次,常常無疾而終,因為窮所以都是看網路文章、線上課程為主,會遇到的問題有: 在職學習的惰性,只要開始加班我就忘記學習 :D 寫得太少又急著看完課程,看完後就忘光了 :DD 便宜的 Udemy 課程大都是英文,聽不懂的語言+聽不懂的邏輯,放空 :DDD 六角直播班帶給我最大的
State management 首先我們先來寫一些前台存 token 和刪除 token 的方法在 vuex sate management,檔案位置在 src/store/index.ts Login 所有頁面每隔一段時間自動刷新 token Logout
Thumbnail
這篇文章將要介紹具「迴圈」概念的 For Each Row in Datatable功能!這個功能主要使用於Excel,可針對指定變數中的行列執行重複操作,舉例來說,若是希望將每一列的C欄內容輸出,或是將每一行的某欄位刪除,就可以使用此一功能。
Thumbnail
解決方法其實就是載入中文字型: 1. 到jsPDF的repo可以看到有fontconverter資料夾,裡面有fontconverter.html,選擇ttf字型檔,這邊以微軟正黑體為例: 2. 上一步會生成msjh-normal.js,在程式中要import(這邊是React),接著設定這個字型
Thumbnail
本專欄將提供給您最新的市場資訊、產業研究、交易心法、精選公司介紹,以上內容並非個股分析,還請各位依據自身狀況作出交易決策。歡迎訂閱支持我,獲得相關內容,也祝您的投資之路順遂! 每年 $990 訂閱方案👉 https://reurl.cc/VNYVxZ 每月 $99 訂閱方案👉https://re
Thumbnail
JavaScript30 傳送門:https://javascript30.com/ 寫到挑戰六覺得心累ㄌ,向來不是一個可以長久堅持好習慣的人,30 個挑戰聽起來很少,但如果要日復一日堅持下去其實好長r 😮‍💨 挑戰六透過 input 來 filter 從 api 拿回來的資料結
Thumbnail
JavaScript30 傳送門:https://javascript30.com/ 挑戰5透過玩弄 flex-grow 屬性來操作網頁裡的卡片效果,看別人的成果:yhabib.github.io 本次學習心得: 製造過度效果延遲的方法:transition-delay V.S
Thumbnail
JavaScript30 傳送門:https://javascript30.com/ Console.table 第四個練習是透過一些 array method 來操作 array 資料。 整個練習最讓我 WOW 的,是 console.table,竟然有這麼酷的 console
Thumbnail
JavaScript30 傳送門:https://javascript30.com/ 透過 JS 控制 CSS 變數 今天的挑戰是要能透過滑動圖片上面的 <input type="range"> 來改變圖片的三個屬性。 以前在 CSS 裡面看到 var(--xxxx) 這種東西都很
Thumbnail
下面代碼為兩列的GridView class HomePage extends StatelessWidget { @override Widget build(BuildContext context) { return new GridView.count( cro
過去我嘗試學習 JS 蠻多次,常常無疾而終,因為窮所以都是看網路文章、線上課程為主,會遇到的問題有: 在職學習的惰性,只要開始加班我就忘記學習 :D 寫得太少又急著看完課程,看完後就忘光了 :DD 便宜的 Udemy 課程大都是英文,聽不懂的語言+聽不懂的邏輯,放空 :DDD 六角直播班帶給我最大的
State management 首先我們先來寫一些前台存 token 和刪除 token 的方法在 vuex sate management,檔案位置在 src/store/index.ts Login 所有頁面每隔一段時間自動刷新 token Logout
Thumbnail
這篇文章將要介紹具「迴圈」概念的 For Each Row in Datatable功能!這個功能主要使用於Excel,可針對指定變數中的行列執行重複操作,舉例來說,若是希望將每一列的C欄內容輸出,或是將每一行的某欄位刪除,就可以使用此一功能。
Thumbnail
解決方法其實就是載入中文字型: 1. 到jsPDF的repo可以看到有fontconverter資料夾,裡面有fontconverter.html,選擇ttf字型檔,這邊以微軟正黑體為例: 2. 上一步會生成msjh-normal.js,在程式中要import(這邊是React),接著設定這個字型