iT邦幫忙

0

Jquery Pagination

https://ithelp.ithome.com.tw/upload/images/20180614/20109182KNigg00jFN.png
您好 目前想使用Jquery Pagination技術套用到我的網站中(如上圖中很長的新聞資訊去做到ㄧ頁幾篇訊息就自動換頁)
這個有辦法應用在這邊嗎??我希望他能簡單做到換頁就可以了!!剛剛自己嘗試很多遍還是不行ˊ_ˋ
資料取得:http://esimakin.github.io/twbs-pagination/
這邊補上程式碼片段
https://ithelp.ithome.com.tw/upload/images/20180614/20109182QW3Qe8TLiy.png
https://ithelp.ithome.com.tw/upload/images/20180614/20109182QOTeZl2yzo.png
抱歉 之前都是直接將jquery技術導入但不太懂jquery 還麻煩前輩指正 謝謝

資訊太少了,
妳的資料是怎麼取得的,又要怎麼畫分
是用ajax取得data ,想要把data做成分頁?
可以把妳的程式碼貼上來,或者錯誤的地方貼上來?
您好 謝謝您的回答 已經將知道的東西補上 抱歉!!
這邊應該就有教妳怎麼顯示分頁了

<body>
<div class="container">
<nav aria-label="Page navigation">
<ul class="pagination" id="pagination"></ul>
</nav>
</div>
<script type="text/javascript">
$(function () {
window.pagObj = $('#pagination').twbsPagination({
totalPages: 35,
visiblePages: 10,
onPageClick: function (event, page) {
console.info(page + ' (from options)');
}
}).on('page', function (event, page) {
console.info(page + ' (from event listening)');
});
});
</script>
</body>
0

謝謝前輩分享!!我先來研究看看

有無用後端語言都可以做到,所以你的資料來源是?

其實我不太懂什麼是資料來源 我之前都是將jquery檔案嵌入到網站作使用而已 然後慢慢去試js檔案數值到我要的結果QQ

0
freessaint
iT邦新手 5 級 ‧ 2018-06-14 16:11:04

看你後來補充的圖中程式碼片段,好像沒寫到資料妳怎麼取得的,直接就是html+css的情況

我先假設妳可以先用ajax 去取得妳的data好了。

ajax的方法:http://www.w3school.com.cn/jquery/jquery_ajax_get_post.asp

用ajax取得的資料,取得成功後可以在success處理,
我假設你取得的資料像是像是mycars 這樣。

先計算mycars的長度,然後妳一頁要顯示data的幾筆資料 visiblePages,
可以得到totalPages ,接著用jquery的text() 方法,去顯示在網頁上,
程式碼如下

<body>
<div class="container">
    <div id="show">

    </div>
    <nav aria-label="Page navigation">
        <ul class="pagination" id="pagination"></ul>
    </nav>
</div>
<script type="text/javascript">
$(function () {
    $.ajax({
        type:'GET',
        url:'URL',
        success:function( data ){
            //data = 假設妳的data 取得的資料如mycars 用mycars來舉例
            var mycars = new Array();
            mycars[1] = "a";
            mycars[2] = "b";
            mycars[3] = "c";
            mycars[4] = "d";
            mycars[5] = "e";
            mycars[6] = "f";
            mycars[7] = "g";
            mycars[8] = "h";
            mycars[9] = "i";
            mycars[10] = "j";

            mycars_length = mycars.length;        
            window.pagObj = $('#pagination').twbsPagination({
                // totalPages如果妳一頁最多顯示2筆資料,那總長度就是除2 所以有5個分頁
                totalPages: mycars_length/2,
                visiblePages: 2,
                onPageClick: function (event, page) {
                    console.info(page + ' (from options)');
                    // 所以第1頁顯示mycars的1,2  2頁->3,4  3頁->5,6
                    // text()顯示妳的資料
                    // 在text()當中可以適當穿插css
                    $('#show').text( "data1:"+ mycars[page*2-1]+"   data2:"+mycars[page*2]);
                }
            }).on('page', function (event, page) {
                console.info(page + ' (from event listening)');
            });

        }
    });        
});
</script>
</body>

https://ithelp.ithome.com.tw/upload/images/20180614/20102779w2xtEBRx4D.jpg

看更多先前的回應...收起先前的回應...

所以如果單純靠光靠將jquery嵌入 在加入html和css是不是無法達成此功能><?

你說達成此功能不太懂意思@@
還是說妳拿到的檔案是一個html檔案,這檔案就已經把所有的div都寫好了?

如果是像妳圖中那樣,以經寫了一堆div 你可以自己把div畫分成一個陣列,不要一次在HMTL當中顯示。
用分頁的方式顯示。

通常這種應該後端提供給你data格式。妳在調整佈局去跑出來的。
像是for迴圈去跑 data 這樣~

https://ithelp.ithome.com.tw/upload/images/20180614/201027797ZFEtDSK93.jpg

謝謝你的回答!!很仔細 我先來研究看看

0
froce
iT邦大師 1 級 ‧ 2018-06-14 20:38:16

http://jsbin.com/yujecuqije/edit?html,output

純前端JQ自幹法,不過不推薦使用就是了。XD

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
    <script src="https://code.jquery.com/jquery-3.1.0.js"></script>

</head>

<body>
    <div id="display">
        <div class="row">1</div>
        <div class="row">2</div>
        <div class="row">3</div>
        <div class="row">4</div>
        <div class="row">5</div>
        <div class="row">6</div>
        <div class="row">7</div>
        <div class="row">8</div>
    </div>
    <div id="pp_container"></div>
</body>

</html>

<style>
    .page_picker {
        display: inline-block;
        border: 1px solid black;
        padding: 3px;
        margin-left: 3px;
    }
</style>

<script>
    var per_page = 5;
    var rows = $('.row'),
        pages = Math.ceil(rows.length / per_page);

    var page_picker = '<div class="page_picker">{}</div>';

    for (i = 1; i <= pages; i++) {
        $('#pp_container').append(page_picker.replace("{}", i));
    }

    function pagination(page, elms) {
        if (page * per_page > elms.length) {
            _ = elms.slice((page - 1) * per_page)
        } else {
            _ = elms.slice((page - 1) * per_page, page * per_page)
        }

        elms.hide();
        _.show();
    }

    $('#pp_container').on('click', '.page_picker',function () {
        var current_page = $(this).text();
        pagination(current_page, rows)
    });

    pagination(1, rows);

</script>

先謝謝froce大大每次都來解決我的問題 雖然不推薦我也來研究看看!!

我要發表回答

立即登入回答