none
如何製作出table加上分頁的效果 RRS feed

解答

    • 已標示為解答 karen235 2019年11月19日 上午 09:36
    2019年11月14日 下午 12:13
  • PC版的時候是上圖下文,手機版的時候是左圖右文-->呵呵,有grid-system的基本概念,但怎麼變成這個樣式,能否請再指導一下?

    grid就是靠col來設定在不同螢幕大小時的行為

    大螢幕時:圖占12,文12:這樣就會上圖下文
    小螢幕時:圖占4,文8:這樣就會左圖右文

    這樣算一個區塊,所以用一個div.row包起來
    所以整合一下就是這樣

    <div class="row">
    	<div class="col-lg-12 col-4">
    		<!--圖:大螢幕時佔12,小螢幕時第一Part,4-->
    		<img src="../images/topcat.jpg" class="img img-fluid" />
    	</div>
    	<div class="col-lg-12 col-8">
    		<!--文:大螢幕時佔12,小螢幕時第二Part,8-->
    		觀自在菩薩。行深般若波羅蜜多時。照見五蘊皆空。度一切苦厄。舍利子。色不異空。空不異色。色即是空。空即是色。受想行識。亦復如是。舍利子。是諸法空相。不生不滅。不垢不淨。不增不減。
    	</div>
    </div>

    這樣的單位,放入大螢幕時,放4個區塊在一個橫列裡面,小螢幕,每個單位就直接一個

    <div class="row">
    	<div class="col-lg-3 col-12"></div>
    	<div class="col-lg-3 col-12"></div>
    	<div class="col-lg-3 col-12"></div>
    	<div class="col-lg-3 col-12"></div>
    	<div class="col-lg-3 col-12"></div>
    	<div class="col-lg-3 col-12"></div>
    	<div class="col-lg-3 col-12"></div>
    	<div class="col-lg-3 col-12"></div>
    </div>

    所以以上兩個結合起來就會是

        <div class="container">
                <div class="row">
                    <div class="col-lg-3  col-12">
                        <div class="row">
                            <div class="col-lg-12 col-4">
                                <!--圖:大螢幕時佔12,小螢幕時第一Part,4-->
                                <img src="../images/topcat.jpg" class="img img-fluid" />
                            </div>
                            <div class="col-lg-12 col-8">
                                <!--文:大螢幕時佔12,小螢幕時第二Part,8-->
                                觀自在菩薩。行深般若波羅蜜多時。照見五蘊皆空。度一切苦厄。舍利子。色不異空。空不異色。色即是空。空即是色。受想行識。亦復如是。舍利子。是諸法空相。不生不滅。不垢不淨。不增不減。
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3  col-12">
                        <div class="row">
                            <div class="col-lg-12 col-4">
                                <!--圖:大螢幕時佔12,小螢幕時第一Part,4-->
                                <img src="../images/topcat.jpg" class="img img-fluid" />
                            </div>
                            <div class="col-lg-12 col-8">
                                <!--文:大螢幕時佔12,小螢幕時第二Part,8-->
                                觀自在菩薩。行深般若波羅蜜多時。照見五蘊皆空。度一切苦厄。舍利子。色不異空。空不異色。色即是空。空即是色。受想行識。亦復如是。舍利子。是諸法空相。不生不滅。不垢不淨。不增不減。
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3  col-12">
                        <div class="row">
                            <div class="col-lg-12 col-4">
                                <!--圖:大螢幕時佔12,小螢幕時第一Part,4-->
                                <img src="../images/topcat.jpg" class="img img-fluid" />
                            </div>
                            <div class="col-lg-12 col-8">
                                <!--文:大螢幕時佔12,小螢幕時第二Part,8-->
                                觀自在菩薩。行深般若波羅蜜多時。照見五蘊皆空。度一切苦厄。舍利子。色不異空。空不異色。色即是空。空即是色。受想行識。亦復如是。舍利子。是諸法空相。不生不滅。不垢不淨。不增不減。
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3  col-12">
                        <div class="row">
                            <div class="col-lg-12 col-4">
                                <!--圖:大螢幕時佔12,小螢幕時第一Part,4-->
                                <img src="../images/topcat.jpg" class="img img-fluid" />
                            </div>
                            <div class="col-lg-12 col-8">
                                <!--文:大螢幕時佔12,小螢幕時第二Part,8-->
                                觀自在菩薩。行深般若波羅蜜多時。照見五蘊皆空。度一切苦厄。舍利子。色不異空。空不異色。色即是空。空即是色。受想行識。亦復如是。舍利子。是諸法空相。不生不滅。不垢不淨。不增不減。
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3  col-12">
                        <div class="row">
                            <div class="col-lg-12 col-4">
                                <!--圖:大螢幕時佔12,小螢幕時第一Part,4-->
                                <img src="../images/topcat.jpg" class="img img-fluid" />
                            </div>
                            <div class="col-lg-12 col-8">
                                <!--文:大螢幕時佔12,小螢幕時第二Part,8-->
                                觀自在菩薩。行深般若波羅蜜多時。照見五蘊皆空。度一切苦厄。舍利子。色不異空。空不異色。色即是空。空即是色。受想行識。亦復如是。舍利子。是諸法空相。不生不滅。不垢不淨。不增不減。
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3  col-12">
                        <div class="row">
                            <div class="col-lg-12 col-4">
                                <!--圖:大螢幕時佔12,小螢幕時第一Part,4-->
                                <img src="../images/topcat.jpg" class="img img-fluid" />
                            </div>
                            <div class="col-lg-12 col-8">
                                <!--文:大螢幕時佔12,小螢幕時第二Part,8-->
                                觀自在菩薩。行深般若波羅蜜多時。照見五蘊皆空。度一切苦厄。舍利子。色不異空。空不異色。色即是空。空即是色。受想行識。亦復如是。舍利子。是諸法空相。不生不滅。不垢不淨。不增不減。
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3  col-12">
                        <div class="row">
                            <div class="col-lg-12 col-4">
                                <!--圖:大螢幕時佔12,小螢幕時第一Part,4-->
                                <img src="../images/topcat.jpg" class="img img-fluid" />
                            </div>
                            <div class="col-lg-12 col-8">
                                <!--文:大螢幕時佔12,小螢幕時第二Part,8-->
                                觀自在菩薩。行深般若波羅蜜多時。照見五蘊皆空。度一切苦厄。舍利子。色不異空。空不異色。色即是空。空即是色。受想行識。亦復如是。舍利子。是諸法空相。不生不滅。不垢不淨。不增不減。
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3  col-12">
                        <div class="row">
                            <div class="col-lg-12 col-4">
                                <!--圖:大螢幕時佔12,小螢幕時第一Part,4-->
                                <img src="../images/topcat.jpg" class="img img-fluid" />
                            </div>
                            <div class="col-lg-12 col-8">
                                <!--文:大螢幕時佔12,小螢幕時第二Part,8-->
                                觀自在菩薩。行深般若波羅蜜多時。照見五蘊皆空。度一切苦厄。舍利子。色不異空。空不異色。色即是空。空即是色。受想行識。亦復如是。舍利子。是諸法空相。不生不滅。不垢不淨。不增不減。
                            </div>
                        </div>
                    </div>
                </div>
        </div>
    以上是靜態的內容
    您先透過靜態的內容,了解Bootstrap的Grid如何處理

    您才能在迴圈中,去兜出這樣的內容

    至於迴圈怎麼兜出來,其實這沒什麼特別
    MVC就直接想辦法用迴圈弄
    WebForm就透過Repeter搭配DataSource
    都可以想辦法兜出來

    怎麼結合迴圈,這類基本的方式,您可能找一下書,把迴圈組出html內容的部分弄熟了,就會了

    分頁的展現一樣不一定要靠PagedListPager,會迴圈兜出html,自己就有辦法弄出來

    ^.^a



    topcat(姍舞之間的極度凝聚)
    http://www.dotblogs.com.tw/topcat
    世界上有兩樣東西分享給別人後,不但不會變少,還會變更多:
    一個是快樂,另一個是知識~ 分享...是知識累積的開始...



    2019年11月15日 上午 10:40
    版主

所有回覆

  • 您是寫WebForm,還是MVC,還是SPA,還是...

    MVC的話,參考這一篇

    https://kevintsengtw.blogspot.com/2014/10/aspnet-mvc-pagedlistmvc-github.html

    ---

    建議您詢問的時候,也同時告訴大家,你是寫什麼方式,用什麼版本

    ^.^a


    topcat(姍舞之間的極度凝聚)
    http://www.dotblogs.com.tw/topcat
    世界上有兩樣東西分享給別人後,不但不會變少,還會變更多:
    一個是快樂,另一個是知識~ 分享...是知識累積的開始...


    2019年11月14日 上午 06:49
    版主
  • 謝謝喵大的回覆,您提供的範例,是有固定的欄位,但是我想知道如何在table中分多欄呈現圖案並搭配分頁,是否有比較類似的範例? 我是用web form / mvc5 ,謝謝
    2019年11月14日 上午 09:45
    • 已標示為解答 karen235 2019年11月19日 上午 09:36
    2019年11月14日 下午 12:13
  • 1.WebForm與MVC是很不一樣的開發方式
    做法也可以有所差異
    您確定是這兩種的混搭嗎?還是其中一種?

    2.『怎麼做分頁』這樣的議題
    可以從資料庫查詢如何做分頁?
    ASP.NET WebForm如何做分頁?
    ASP.NET MVC如何做分頁?
    到分頁的呈現,如何套在Bootstrap可以響應式的呈現?

    以上的問題,每個都可以寫成一篇文章來介紹

    那麼,您的問題到底聚焦在哪個議題上?
    (每個都問,回覆起來就很長很長了)

    3.觀察他的呈現,PC版的時候是上圖下文
    手機版的時候是左圖右文
    其實這些都是Bootstrap的Grid設定可以弄出來
    如何設定col-的class是關鍵
    不知道這部分您知道多少

    至於分頁,如果是呈現上
    您可以查關鍵字『Pagination Bootstrap』可以得到你要的

    ^.^a


    topcat(姍舞之間的極度凝聚)
    http://www.dotblogs.com.tw/topcat
    世界上有兩樣東西分享給別人後,不但不會變少,還會變更多:
    一個是快樂,另一個是知識~ 分享...是知識累積的開始...

    2019年11月15日 上午 01:37
    版主
  • 補充一下:

    好奇這網頁的table+分頁的效果是怎麼作出來的?

    響應式的排版,不適合用table的方式排版
    您提到Bootstrap,排版上,應該使用Bootstrap的『Grid』來進行

    請參考:

    https://bootstrap.hexschool.com/docs/4.2/layout/grid/

    ^.^a


    topcat(姍舞之間的極度凝聚)
    http://www.dotblogs.com.tw/topcat
    世界上有兩樣東西分享給別人後,不但不會變少,還會變更多:
    一個是快樂,另一個是知識~ 分享...是知識累積的開始...


    2019年11月15日 上午 05:51
    版主
  • 謝謝喵大的指正,這個樣式應該是用gird作出來的,table作不出RWD的效果。

    WEB FORM或是MVC5 都可以,不是混合使用,還是希望能以MVC5為主。

    PC版的時候是上圖下文,手機版的時候是左圖右文-->呵呵,有grid-system的基本概念,但怎麼變成這個樣式,能否請再指導一下?

    this大大提供了一個範例,但因為是靜態網頁,不知如何能搭配mvc5動態產生資料?


    2019年11月15日 上午 09:14
  • PC版的時候是上圖下文,手機版的時候是左圖右文-->呵呵,有grid-system的基本概念,但怎麼變成這個樣式,能否請再指導一下?

    grid就是靠col來設定在不同螢幕大小時的行為

    大螢幕時:圖占12,文12:這樣就會上圖下文
    小螢幕時:圖占4,文8:這樣就會左圖右文

    這樣算一個區塊,所以用一個div.row包起來
    所以整合一下就是這樣

    <div class="row">
    	<div class="col-lg-12 col-4">
    		<!--圖:大螢幕時佔12,小螢幕時第一Part,4-->
    		<img src="../images/topcat.jpg" class="img img-fluid" />
    	</div>
    	<div class="col-lg-12 col-8">
    		<!--文:大螢幕時佔12,小螢幕時第二Part,8-->
    		觀自在菩薩。行深般若波羅蜜多時。照見五蘊皆空。度一切苦厄。舍利子。色不異空。空不異色。色即是空。空即是色。受想行識。亦復如是。舍利子。是諸法空相。不生不滅。不垢不淨。不增不減。
    	</div>
    </div>

    這樣的單位,放入大螢幕時,放4個區塊在一個橫列裡面,小螢幕,每個單位就直接一個

    <div class="row">
    	<div class="col-lg-3 col-12"></div>
    	<div class="col-lg-3 col-12"></div>
    	<div class="col-lg-3 col-12"></div>
    	<div class="col-lg-3 col-12"></div>
    	<div class="col-lg-3 col-12"></div>
    	<div class="col-lg-3 col-12"></div>
    	<div class="col-lg-3 col-12"></div>
    	<div class="col-lg-3 col-12"></div>
    </div>

    所以以上兩個結合起來就會是

        <div class="container">
                <div class="row">
                    <div class="col-lg-3  col-12">
                        <div class="row">
                            <div class="col-lg-12 col-4">
                                <!--圖:大螢幕時佔12,小螢幕時第一Part,4-->
                                <img src="../images/topcat.jpg" class="img img-fluid" />
                            </div>
                            <div class="col-lg-12 col-8">
                                <!--文:大螢幕時佔12,小螢幕時第二Part,8-->
                                觀自在菩薩。行深般若波羅蜜多時。照見五蘊皆空。度一切苦厄。舍利子。色不異空。空不異色。色即是空。空即是色。受想行識。亦復如是。舍利子。是諸法空相。不生不滅。不垢不淨。不增不減。
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3  col-12">
                        <div class="row">
                            <div class="col-lg-12 col-4">
                                <!--圖:大螢幕時佔12,小螢幕時第一Part,4-->
                                <img src="../images/topcat.jpg" class="img img-fluid" />
                            </div>
                            <div class="col-lg-12 col-8">
                                <!--文:大螢幕時佔12,小螢幕時第二Part,8-->
                                觀自在菩薩。行深般若波羅蜜多時。照見五蘊皆空。度一切苦厄。舍利子。色不異空。空不異色。色即是空。空即是色。受想行識。亦復如是。舍利子。是諸法空相。不生不滅。不垢不淨。不增不減。
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3  col-12">
                        <div class="row">
                            <div class="col-lg-12 col-4">
                                <!--圖:大螢幕時佔12,小螢幕時第一Part,4-->
                                <img src="../images/topcat.jpg" class="img img-fluid" />
                            </div>
                            <div class="col-lg-12 col-8">
                                <!--文:大螢幕時佔12,小螢幕時第二Part,8-->
                                觀自在菩薩。行深般若波羅蜜多時。照見五蘊皆空。度一切苦厄。舍利子。色不異空。空不異色。色即是空。空即是色。受想行識。亦復如是。舍利子。是諸法空相。不生不滅。不垢不淨。不增不減。
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3  col-12">
                        <div class="row">
                            <div class="col-lg-12 col-4">
                                <!--圖:大螢幕時佔12,小螢幕時第一Part,4-->
                                <img src="../images/topcat.jpg" class="img img-fluid" />
                            </div>
                            <div class="col-lg-12 col-8">
                                <!--文:大螢幕時佔12,小螢幕時第二Part,8-->
                                觀自在菩薩。行深般若波羅蜜多時。照見五蘊皆空。度一切苦厄。舍利子。色不異空。空不異色。色即是空。空即是色。受想行識。亦復如是。舍利子。是諸法空相。不生不滅。不垢不淨。不增不減。
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3  col-12">
                        <div class="row">
                            <div class="col-lg-12 col-4">
                                <!--圖:大螢幕時佔12,小螢幕時第一Part,4-->
                                <img src="../images/topcat.jpg" class="img img-fluid" />
                            </div>
                            <div class="col-lg-12 col-8">
                                <!--文:大螢幕時佔12,小螢幕時第二Part,8-->
                                觀自在菩薩。行深般若波羅蜜多時。照見五蘊皆空。度一切苦厄。舍利子。色不異空。空不異色。色即是空。空即是色。受想行識。亦復如是。舍利子。是諸法空相。不生不滅。不垢不淨。不增不減。
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3  col-12">
                        <div class="row">
                            <div class="col-lg-12 col-4">
                                <!--圖:大螢幕時佔12,小螢幕時第一Part,4-->
                                <img src="../images/topcat.jpg" class="img img-fluid" />
                            </div>
                            <div class="col-lg-12 col-8">
                                <!--文:大螢幕時佔12,小螢幕時第二Part,8-->
                                觀自在菩薩。行深般若波羅蜜多時。照見五蘊皆空。度一切苦厄。舍利子。色不異空。空不異色。色即是空。空即是色。受想行識。亦復如是。舍利子。是諸法空相。不生不滅。不垢不淨。不增不減。
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3  col-12">
                        <div class="row">
                            <div class="col-lg-12 col-4">
                                <!--圖:大螢幕時佔12,小螢幕時第一Part,4-->
                                <img src="../images/topcat.jpg" class="img img-fluid" />
                            </div>
                            <div class="col-lg-12 col-8">
                                <!--文:大螢幕時佔12,小螢幕時第二Part,8-->
                                觀自在菩薩。行深般若波羅蜜多時。照見五蘊皆空。度一切苦厄。舍利子。色不異空。空不異色。色即是空。空即是色。受想行識。亦復如是。舍利子。是諸法空相。不生不滅。不垢不淨。不增不減。
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3  col-12">
                        <div class="row">
                            <div class="col-lg-12 col-4">
                                <!--圖:大螢幕時佔12,小螢幕時第一Part,4-->
                                <img src="../images/topcat.jpg" class="img img-fluid" />
                            </div>
                            <div class="col-lg-12 col-8">
                                <!--文:大螢幕時佔12,小螢幕時第二Part,8-->
                                觀自在菩薩。行深般若波羅蜜多時。照見五蘊皆空。度一切苦厄。舍利子。色不異空。空不異色。色即是空。空即是色。受想行識。亦復如是。舍利子。是諸法空相。不生不滅。不垢不淨。不增不減。
                            </div>
                        </div>
                    </div>
                </div>
        </div>
    以上是靜態的內容
    您先透過靜態的內容,了解Bootstrap的Grid如何處理

    您才能在迴圈中,去兜出這樣的內容

    至於迴圈怎麼兜出來,其實這沒什麼特別
    MVC就直接想辦法用迴圈弄
    WebForm就透過Repeter搭配DataSource
    都可以想辦法兜出來

    怎麼結合迴圈,這類基本的方式,您可能找一下書,把迴圈組出html內容的部分弄熟了,就會了

    分頁的展現一樣不一定要靠PagedListPager,會迴圈兜出html,自己就有辦法弄出來

    ^.^a



    topcat(姍舞之間的極度凝聚)
    http://www.dotblogs.com.tw/topcat
    世界上有兩樣東西分享給別人後,不但不會變少,還會變更多:
    一個是快樂,另一個是知識~ 分享...是知識累積的開始...



    2019年11月15日 上午 10:40
    版主
  • 經過喵大的詳細解說,grid部份已能看懂,套到MVC應該沒有什麼問題。

    WebForm就透過Repeter搭配DataSource 本身就有分頁。若是寫在MVC, 除了PagedListPager,請問還有其他用法嗎?要用什麼關鍵字找到較多資源? (抱歉,我找不到><)

    2019年11月19日 上午 07:11
  • WebForm用Repeter搭配DataSource,Paging的部分還是要自己來唷~
    用ListView+DataSource就可以搭配DataPager應該就可以

    但,其實這種方式有個問題是,他一次都是取回大量資料,然後只顯示一頁,其實也不是個好方式就是了

    ---

    比較好的是,自己從SQL撈資料出來的時候,就只撈取一頁的資料(假設一頁5筆,那就最多撈5筆資料)

    這個能不能搭配套件,這部分小喵我自己是沒測試過
    您可能搜尋一下關鍵詞『asp.net mvc paging』或者其他有經驗的大大協助

    ^_^


    topcat(姍舞之間的極度凝聚)
    http://www.dotblogs.com.tw/topcat
    世界上有兩樣東西分享給別人後,不但不會變少,還會變更多:
    一個是快樂,另一個是知識~ 分享...是知識累積的開始...

    2019年11月19日 上午 07:40
    版主
  • 好的,非常謝謝您耐心的回覆!!
    2019年11月19日 上午 09:35