iT邦幫忙

0

asp.net web form 表格資料進行分頁呈現

  • 分享至 

  • xImage

(頁面設計是使用MasterPage & ContentPage進行頁面設計排版)
不同於其他表格直接抓取資料庫呈現
我的資料是呼叫web service取得JSON格式化資料
https://ithelp.ithome.com.tw/upload/images/20220318/201475234haWx0o0Ws.png
利用迴圈一筆一筆印入表格中
https://ithelp.ithome.com.tw/upload/images/20220324/20147523HfVpg0OFk9.jpg
https://ithelp.ithome.com.tw/upload/images/20220318/20147523qhqoETw62Y.png
因為是要做櫃台看板輪播畫面(輪播3日資料),已用3個ContentPage進行3日資料輪播
JavaScript頁面輪播寫在前端(3日資料輪播類似跳頁面的概念)
現在希望單日資料筆數若超過5條希望能分頁輪播顯示
想請問有什麼好做法能使筆數超過的表格資料分頁呈現?

BeEvil_Y iT邦新手 4 級 ‧ 2022-03-23 21:30:10 檢舉
你就先在Asp.net計算,
如果超過5條,2倍顯示時間。
如果超過10條,3倍顯示時間。以此類推…


然後你每5個<tr><td></td></tr>都用<div>包起來。
都給他們一個ID像這樣 <div id="page1"></div>,裡面都塞5行<tr>。

最後就是這樣
<div id="page1" style="display:block;"><5個TR></div>//顯示1到5
<div id="page2" style="display:none;><5個TR></div>
<div id="page3" style="display:none;><5個TR></div>

再去利用JavaScript讓他去控制頁面

利用JavaScript抓ID的方式塞CSS
要顯示的改block
不顯示的給他none

JS抽取CSS樣式寫法 (X要用單引號包起來)
document.getElementById(x).style.display = 'none'; 隱藏
document.getElementById(x).style.display = 'block';顯示

JS計時
https://www.fooish.com/javascript/timer.html


這是最簡單的寫法了
不用寫到像Photo SlideShow輪播器那麼麻煩。

像JS計時那網址的教學的話。
var timeoutID = setTimeout(Page2change, 5000);

function Page2change () {
document.getElementById('page1').style.display = 'none';
document.getElementById('page2').style.display = 'block'; //顯示6~10
document.getElementById('page3').style.display = 'none';
}

var timeoutID2 = setTimeout(Page3change, 5000);

function Page3change () {
document.getElementById('page1').style.display = 'none';
document.getElementById('page2').style.display = 'none';
document.getElementById('page3').style.display = 'block''; //顯示11~15
}
這個是連JS初學者都會的寫法。
連路過的都看的懂我在打什麼。


如果你不知道asp.net要怎麼寫到可以拆分<div>的話。
這是非常簡單的

你就先去計筆數,
在forEach迴圈外宣告一個計數器
每跑一個forEach就給他+1
跑到1,6跟11的時候給他塞<div>進去
跑到5,10跟15的時候給他塞</div>進去

那DIV的ID要怎麼塞1,2,3?
這個你不會在ASP.NET裡面先把單日筆數除以5?
除下去就知道你要塞幾個<DIV>了很簡單。

也不難。
amanda212 iT邦新手 5 級 ‧ 2022-03-24 10:29:17 檢舉
我的<tr><td></td></tr>是寫在後端,用InnerHtml將資料去前端印出,
"每5個<tr><td></td></tr>都用<div>包起來,都給他們一個ID像這樣 <div id="page1"></div>,裡面都塞5行<tr>。"
此方法恐怕不可行吧
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友回答

立即登入回答