jQuery的分頁插件---pagination.js

時間 2019-12-08

標籤 jquery 分頁插件 pagination.js pagination 欄目 JQuery 简体版

原文原文鏈接

jquery的分頁插件pagination.js 下載連接爲：http://www.jq22.com/jquery-info5697javascript

原理：設置頁碼樣式，數據經過ajax上傳當前頁碼，進行相應處理後傳回加載顯示在頁面上。css

1.如何使用？html

pagination.js是一款較爲豐富的分頁插件，提供了一些簡單接口。使用時，前端

（1）首先引入所須要的頭文件（可在官網中直接下載）java

注意此時必定要先加載jquery文件。node

(2)而後在頁面中給出容器，設置相應的樣式；jquery

(3)根據API進行所需的細節調整；ajax

options(參數配置)express

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

api接口json

方法	參數	說明
getPageCount()	無	獲取總頁數
setPageCount(page)	page：頁數	設置總頁數
getCurrent()	無	獲取當前頁
filling()	無	填充數據，參數爲

2. 實例代碼：

前端樣式：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="Generator" content="EditPlus®">
    <meta name="Author" content="">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <script type="text/javascript" src="jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="jquery.pagination.js"></script>
    <title>nine box</title>
    <style  type="text/css">
        /*table {border-collapse:collapse; margin:50px;text-align:center;}*/
        table tr {border:none;}

        table.ninetab td{width:50px;height:50px;border:5px  inset blue;}
        table.ninetab td:hover{border:5px solid red;cursor: pointer;}

        #pagination{
            background: #e3e3e3;
            height: 40px;
            line-height: 40px;
            width: 990px;
            margin-top: 20px;
            text-align: right;
        }
        #pagination .active{
            color: #c41929;
            border: 1px solid transparent;
            background: #e3e3e3;
            font-size: 14px;
            padding: 3px 4px;
            margin-right: 10px;
        }
        #pagination a,#pagination span{
            border: 1px solid #cdcdcd;
            background: #fff;
            font-size: 14px;
            padding: 3px 4px;
            color: #000;
            margin-right: 10px;
        }
        #pagination a.jump-btn{
            margin-right: 20px;
            margin-left: 20px;
        }
        #pagination input{
            height: 18px;
            line-height:18px;
            width: 30px;
        }
        #pagetable{
            width:500px;
            height:300px;
            border:1px solid red;
        }

    </style>

</head>
<body>

<div id="pagination"></div>
<div id="pagetable"></div>
<script type="text/javascript">

        var callbackAjax = function(api){
            //獲取當前頁碼
            var current = api.getCurrent();
            var url = 'xxxxx/testpagebar/';//請求數據的地址
            $.post(url,{currentParam :current}, function(data){
          //得到後端數據，顯示到頁面上
              console.log(data);
          
            $('#pagetable').html(data.result);


        },'json');
    }


    //執行callbackAjax
    $('#pagination').pagination({
        pageCount:20,
        totalData:100,
        showData:5,
        jump:true,
        coping:true,
        count:2,
        homePage:'首頁',
        endPage:'末頁',
        prevContent:'<上一頁',
        nextContent:'下一頁>',
        jumpBtn:'肯定',
        callback:callbackAjax
    });

    })


</script>
</body>
</html>

nodejs後端：

var express = require('express');
var router = express.Router();
router.post('/',function(req,res,next){
   var  currentParam = req.body.currentParam;
    console.log(currentParam);
    res.send({"result":currentParam});
    res.end;
})


module.exports = router;

效果圖：

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。