九九综合私拍,一区成人视频

pagination插件下載地址：https://pan.baidu.com/s/1c3QQ7XQ

一、前言

  做的一個列表頁要將所有結(jié)果顯示出來，太多記錄不能一次性顯示，所以要進行分頁。一開始嘗試自己寫，但功能不完整（不會做太多頁碼的時候隱藏部分頁碼用省略號代替），于是找了這個插件來用。

二、使用方法

我們先來看看這款插件基本的使用方法：

1.先引入JQ和JS，引入CSS（樣式可以自行修改）

<script src="script/lib/jquery.min.js"></script>  
<script src="script/jquery.pagination.js"></script>  
<link rel="stylesheet" href="style/common.css">  
<link rel="stylesheet" href="style/pagination.css">

HTML代碼

<div class="M-box"></div>

3.JS代碼

<script>  
    $(function () {  
        $('.M-box').pagination({  
            pageCount:50,  
            jump:true,  
            coping:true,  
            homePage:'首頁',  
            endPage:'末頁',  
            prevContent:'上頁',  
            nextContent:'下頁'  
        });  
    })  
  
</script>

現(xiàn)在你可以看到這樣的效果：

image

一共有50頁，可以輸入數(shù)字并跳轉(zhuǎn)到那一頁，有首頁、末頁、上頁、下頁這些按鈕

對應(yīng)回我上面的代碼就會發(fā)現(xiàn)這些都是我設(shè)置的，怎么根據(jù)自己的需要來設(shè)置呢，就是這樣的代碼：

$('.M-box').pagination({
//option
//參數(shù):值,
//參數(shù):值
})

參數(shù)如下表：

options(參數(shù)配置)

參數(shù) 默認(rèn)值說明
pageCount 9 總頁數(shù)
totalData 0 數(shù)據(jù)總條數(shù)
current 1 當(dāng)前第幾頁
showData 0 每頁顯示的條數(shù)
prevCls 'prev' 上一頁class
nextCls 'next' 下一頁class
prevContent '<' 上一頁節(jié)點內(nèi)容
nextContent '>' 下一頁節(jié)點內(nèi)容
activeCls 'active' 當(dāng)前頁選中狀態(tài)class名
count 3 當(dāng)前選中頁前后頁數(shù)
coping false 是否開啟首頁和末頁，值為boolean
isHide false 總頁數(shù)為0或1時隱藏分頁控件
keepShowPN false 是否一直顯示上一頁下一頁
homePage '' 首頁節(jié)點內(nèi)容，默認(rèn)為空
endPage '' 尾頁節(jié)點內(nèi)容，默認(rèn)為空
jump false 是否開啟跳轉(zhuǎn)到指定頁數(shù)，值為boolean類型
jumpIptCls 'jump-ipt' 文本框內(nèi)容
jumpBtnCls 'jump-btn' 跳轉(zhuǎn)按鈕class
jumpBtn '跳轉(zhuǎn)' 跳轉(zhuǎn)按鈕文本內(nèi)容
callback function(){} 回調(diào)函數(shù)，參數(shù)"index"為當(dāng)前頁

下一步是怎么實現(xiàn)AJAX動態(tài)分頁？

上面那個分頁是寫死的，現(xiàn)在我們要用Ajax動態(tài)加載數(shù)據(jù)進來，所以可以先把原來的注釋掉，我們重新來寫<script></script>里面的內(nèi)容

待會需要用到的是總頁碼，去接口文檔里面找找有沒有：

哈哈找到了！總頁碼就是totalPages

如果沒有總頁碼也沒關(guān)系，看看有沒有當(dāng)前頁的數(shù)據(jù)量和總的數(shù)據(jù)量，我們就可以將總頁碼算出來:
···
//獲取總條數(shù)
var sumCount=data.totalElements;
//獲取返回的條數(shù)
var count=data.numberOfElement;
···

···
//總頁碼（向上取整）
var pageCount=Math.ceil(sumCount/count);
···

現(xiàn)在就可以開始做動態(tài)分頁了

先寫一段JQ的Ajax，你懂的~把總頁數(shù)輸出一下看看有沒有成功

···
<script>
$(function () {$ .ajax({
url:'', //這里寫你的接口地址
type:'POST',
dataType: 'JSON',
data:{
},
success:function(data){ //看能否成功返回數(shù)據(jù)，要根據(jù)接口文檔來修改名稱哦
//總頁碼
console.log(data.totalPages);

            }
        })

        
    })

</script>

···

在控制臺可以看到有輸出數(shù)據(jù)的話就可以進行下一步了，將你第一次寫好的pagnation方法放到success里面，只不過pageCount的值原本是寫死的50，現(xiàn)在是用Ajax來動態(tài)獲取到的總頁碼

···
<script>
$(function () {$ .ajax({
url:'',
type:'POST',
dataType: 'JSON',
data:{
},
success:function(data){
//返回條數(shù)
console.log(data.numberOfElements);
//總條數(shù)
console.log(data.totalElements);
//總頁碼
console.log(data.totalPages);

                $('.M-box').pagination({
                    pageCount:data.totalPages,   //總頁碼
                    coping:true,                 //是否開啟首頁和末頁
                    homePage:'首頁',
                    endPage:'末頁',
                    prevContent:'上頁',
                    nextContent:'下頁',
                    current:1,                    //當(dāng)前頁碼
                    callback:function (api) {     //這是一個回調(diào)函數(shù)

                    }
                });
            }
        })
    })

</script>

···
callback:function(api){

}

這是一個回調(diào)函數(shù)，即點擊分頁的數(shù)字按鈕時所執(zhí)行的操作，回調(diào)函數(shù)中有一個參數(shù)叫api

api接口

方法參數(shù) 說明

getPageCount() 無獲取總頁數(shù)

setPageCount(page) page：頁數(shù) 設(shè)置總頁數(shù)

getCurrent() 無獲取當(dāng)前頁

filling() 無填充數(shù)據(jù)，參數(shù)為頁數(shù)

看不懂也沒關(guān)系，待會看例子就懂了。

首先我們要清楚原理，這個函數(shù)就是用來放點擊分頁數(shù)字按鈕以后要做什么的。因為沒有這個函數(shù)的時候，我們只獲取了第一頁的數(shù)據(jù)，那現(xiàn)在當(dāng)我點其他頁的時候，就是要再次用Ajax去請求數(shù)據(jù)，點哪個數(shù)字就去獲取哪一頁的數(shù)據(jù)。那么我們就在callback:function(api){}這個函數(shù)里面這樣寫

    callback:function (api) {
                            $.ajax({
                                url:'',
                                type:'POST',
                                data:{
                                    currentPage:api.getCurrent()-1    //這個方法就是用來獲取點擊了哪一頁的，因為我  //的接口文檔中頁數(shù)是從0開始的，所以減1，當(dāng)我點擊第一頁的時候去獲取第0頁的數(shù)據(jù)
                                },
                                success:function (data) {
                                    console.log(data);             //返回那一頁的數(shù)據(jù)
                                }
                            })
                        }

現(xiàn)在你打開頁面去點擊一下頁碼，應(yīng)該可以在控制臺看到那一頁的數(shù)據(jù)了

至此，我們就會使用分頁插件來動態(tài)獲取數(shù)據(jù)了，剩下的就是將拿回來的數(shù)據(jù)放到頁面上，相信大家都懂的~寫在success里面即可

以下是完整的實例：

    <script type="text/javascript">
        $(document).ready(function() {
            var url = "/getAllInformationHandler";
            $.ajax({
                url: url,
                type: 'POST',
                dataType: 'JSON',
                success: function(data) {
                    var arr1=['盜','搶','丟','其他'];
                    var arr2=['蘋果','三星','華為','小米','魅族','LG','索尼','OPPO','美圖','努比亞','360','中興','HTC','錘子','一加','酷派','黑莓','金立','諾基亞','其他'];
 
                    for(var i=0;i<data.content.length;i++){
                        function fn1() {
                            if(data.content[i].photo!=""&&data.content[i].photo!=null){
                                return `${data.content[i].photo}`;
                            }else{
                                return 'images/defPic.jpg';
                            }
                        }
                        function fn2(){
                            if(data.content[i].phoneVersion!=""&&data.content[i].phoneVersion!=null){
                                return  `${data.content[i].phoneVersion}`;
                            }else{
                                return '其他';
                            }
                        }
                        $('.tbody').append(`
                        <tr>
                            <td>
                                <div class="image"><a href="details.html?id=${data.content[i].id}"><img src="${fn1()}"></a></div>
                            </td>
                            <td>${arr1[data.content[i].nature]}</td>
                            <td>${data.content[i].repostNumber}</td>
                            <td class="phoneBrand"><span title="iPone">${arr2[data.content[i].phoneBrand]}</span></td>
                            <td>${fn2()}</td>
                            <td>${data.content[i].imei}</td>
                            <td>${data.content[i].characteristic}</td>
                            <td>${data.content[i].userName}</td>
                            <td>${data.content[i].phone}</td>
                            <td>${data.content[i].wechat}</td>
                            <td><a href="details.html?id=${data.content[i].id}">詳情</a>
                            </td>
                         </tr>
                        `);
                    }
                    $('.M-box').pagination({
                        pageCount:data.totalPages,
                        coping:true,
                        homePage:'首頁',
                        endPage:'末頁',
                        prevContent:'上頁',
                        nextContent:'下頁',
                        current:1,
                        callback:function (api) {
                            $.ajax({
                                url:url,
                                type:'POST',
                                data:{
                                    currentPage:api.getCurrent()-1
                                },
                                success:function (data) {
                                    function fn1() {
                                        if(data.content[i].photo!=""&&data.content[i].photo!=null){
                                            return `${data.content[i].photo}`;
                                        }else{
                                            return 'images/defPic.jpg';
                                        }
                                    }
                                    function fn2(){
                                        if(data.content[i].phoneVersion!=""&&data.content[i].phoneVersion!=null){
                                            return  `${data.content[i].phoneVersion}`;
                                        }else{
                                            return '其他';
                                        }
                                    }
                                    //console.log(data);
                                    $('.tbody').html(``);
                                    var arr1=['盜','搶','丟','其他'];
                                    var arr2=['蘋果','三星','華為','小米','魅族','LG','索尼','OPPO','美圖','努比亞','360','中興','HTC','錘子','一加','酷派','黑莓','金立','諾基亞','其他'];
                                    for(var i=0;i<data.content.length;i++){
                                        $('.tbody').append(`
                                        <tr>
                                            <td>
                                                <div class="image"><a href="details.html?id=${data.content[i].id}"><img src="${fn1()}"></a></div>
                                            </td>
                                            <td>${arr1[data.content[i].nature]}</td>
                                            <td>${data.content[i].repostNumber}</td>
                                            <td class="phoneBrand"><span title="iPone">${arr2[data.content[i].phoneBrand]}</span></td>
                                            <td>${fn2()}</td>
                                            <td>${data.content[i].imei}</td>
                                            <td>${data.content[i].characteristic}</td>
                                            <td>${data.content[i].userName}</td>
                                            <td>${data.content[i].phone}</td>
                                            <td>${data.content[i].wechat}</td>
                                            <td><a href="details.html?id=${data.content[i].id}">詳情</a>
                                            </td>
                                         </tr>
                                        `);
                                    }
                                },
                                error:function () {
                                    alert("沒有找到對應(yīng)結(jié)果！");
                                }
                            })
                        }
                    });
 
                },
                error:function () {
                    alert("沒有找到對應(yīng)結(jié)果！");
                }
            });
        });
 
    </script>

最終的效果是這樣：