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會員
1內容數
留言0
查看全部
你可能也想看
Google News 追蹤
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
美國總統大選只剩下三天， 我們觀察一整週民調與金融市場的變化（包含賭局）， 到本週五下午3:00前為止， 誰是美國總統幾乎大概可以猜到60-70%的機率， 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
Faker昨天真的太扯了，中國主播王多多點評的話更是精妙，分享給各位
王多多的點評
「Faker是我們的處境，他是LPL永遠繞不開的一個人和話題，所以我們特別渴望在決賽跟他相遇，去直面我們的處境。
我們曾經稱他為最高的山，最長的河，以為山海就是盡頭，可是Faker用他28歲的年齡...
JavaScript30 傳送門：https://javascript30.com/
寫到挑戰六覺得心累ㄌ，向來不是一個可以長久堅持好習慣的人，30 個挑戰聽起來很少，但如果要日復一日堅持下去其實好長r 😮💨
挑戰六透過 input 來 filter 從 api 拿回來的資料結
JavaScript30 傳送門：https://javascript30.com/
挑戰５透過玩弄 flex-grow 屬性來操作網頁裡的卡片效果，看別人的成果：yhabib.github.io
本次學習心得：
製造過度效果延遲的方法：transition-delay V.S
JavaScript30 傳送門：https://javascript30.com/
Console.table
第四個練習是透過一些 array method 來操作 array 資料。
整個練習最讓我 WOW 的，是 console.table，竟然有這麼酷的 console
JavaScript30 傳送門：https://javascript30.com/
透過 JS 控制 CSS 變數
今天的挑戰是要能透過滑動圖片上面的 <input type="range"> 來改變圖片的三個屬性。
以前在 CSS 裡面看到 var(--xxxx) 這種東西都很
下面代碼為兩列的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
這篇文章將要介紹具「迴圈」概念的 For Each Row in Datatable功能！這個功能主要使用於Excel，可針對指定變數中的行列執行重複操作，舉例來說，若是希望將每一列的C欄內容輸出，或是將每一行的某欄位刪除，就可以使用此一功能。
解決方法其實就是載入中文字型:
1. 到jsPDF的repo可以看到有fontconverter資料夾，裡面有fontconverter.html，選擇ttf字型檔，這邊以微軟正黑體為例:
2. 上一步會生成msjh-normal.js，在程式中要import(這邊是React)，接著設定這個字型
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
美國總統大選只剩下三天， 我們觀察一整週民調與金融市場的變化（包含賭局）， 到本週五下午3:00前為止， 誰是美國總統幾乎大概可以猜到60-70%的機率， 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
Faker昨天真的太扯了，中國主播王多多點評的話更是精妙，分享給各位
王多多的點評
「Faker是我們的處境，他是LPL永遠繞不開的一個人和話題，所以我們特別渴望在決賽跟他相遇，去直面我們的處境。
我們曾經稱他為最高的山，最長的河，以為山海就是盡頭，可是Faker用他28歲的年齡...
JavaScript30 傳送門：https://javascript30.com/
寫到挑戰六覺得心累ㄌ，向來不是一個可以長久堅持好習慣的人，30 個挑戰聽起來很少，但如果要日復一日堅持下去其實好長r 😮💨
挑戰六透過 input 來 filter 從 api 拿回來的資料結
JavaScript30 傳送門：https://javascript30.com/
挑戰５透過玩弄 flex-grow 屬性來操作網頁裡的卡片效果，看別人的成果：yhabib.github.io
本次學習心得：
製造過度效果延遲的方法：transition-delay V.S
JavaScript30 傳送門：https://javascript30.com/
Console.table
第四個練習是透過一些 array method 來操作 array 資料。
整個練習最讓我 WOW 的，是 console.table，竟然有這麼酷的 console
JavaScript30 傳送門：https://javascript30.com/
透過 JS 控制 CSS 變數
今天的挑戰是要能透過滑動圖片上面的 <input type="range"> 來改變圖片的三個屬性。
以前在 CSS 裡面看到 var(--xxxx) 這種東西都很
下面代碼為兩列的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
這篇文章將要介紹具「迴圈」概念的 For Each Row in Datatable功能！這個功能主要使用於Excel，可針對指定變數中的行列執行重複操作，舉例來說，若是希望將每一列的C欄內容輸出，或是將每一行的某欄位刪除，就可以使用此一功能。
解決方法其實就是載入中文字型:
1. 到jsPDF的repo可以看到有fontconverter資料夾，裡面有fontconverter.html，選擇ttf字型檔，這邊以微軟正黑體為例:
2. 上一步會生成msjh-normal.js，在程式中要import(這邊是React)，接著設定這個字型