jquery+bootstrap分頁工具條插件

插件實例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0">-->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="shortcut icon" href="../../docs-assets/ico/favicon.png">

    <title>Grid Template for Bootstrap</title>
    <!-- 最新 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap.min.css">

    <!-- 可選的Bootstrap主題文件（一般不用引入） -->
    <link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap-theme.min.css">

    <!-- jQuery文件。務必在bootstrap.min.js 之前引入 -->
    <script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
    <script>
        //定義全局變量
        var page_size = 0;//總頁數
        var current_page_num = 1;//當前頁碼
        var page_num = 0; //分頁工具條最多可以顯示的頁數
        var temp_current_page_method = null;
        var page_ination_ul = "<ul class='pagination' id='ination_page_ul'></ul>";
        var _front_page = "<li class='' id='front_page'><a href='javascript:void(0)' οnclick='${_front_page}' id='front_Page_a'>上一頁</a></li>";
        var _next_page = "<li class='' id='next_page'><a href='javascript:void(0)' id='next_Page_a' οnclick='${_next_page}'>下一頁</a></li>";
        var temp_page = "<li class='' id='${temp_page_li}'><a href='javascript:void(0)' οnclick=${temp_page_method} id='${temp_page_a}'>${_page}</a></li>"
        //初始化
        function pageination_init(container,size,pagenum,current_page_method){
            page_size = size;
            page_num = pagenum;
            temp_current_page_method = current_page_method;
            //如果總頁數小於1則不顯示分頁工具條
            if(size<=1){
                return;
            }
            var temp_page_size = 0;
            if(page_size<=page_num){
                temp_page_size = page_size;
            }else{
                temp_page_size = page_num;
            }
            $("#"+container).html(page_ination_ul);
            add_page_ination_li(1,temp_page_size,1);
        }

        //跳轉到某一頁
        function jump_to(){

        }

        function add_page_ination_li(start,end,page_num){
            //初始化上一頁和下一頁
            var front_page_html = _front_page;
            var next_page_html = _next_page;
            front_page_html = front_page_html.replace("${_front_page}","get_front_page()");
            next_page_html = next_page_html.replace("${_next_page}","get_next_page()");
            $("#ination_page_ul").append(front_page_html);//先append上一頁
            for(var i=start;i<=end;i++){
                var temp_page_html = temp_page;
                temp_page_html = temp_page_html.replace("${_page}",i);
                temp_page_html = temp_page_html.replace("${temp_page_li}","page_li_"+i);
                temp_page_html = temp_page_html.replace("${temp_page_a}","page_a_"+i);
                temp_page_html = temp_page_html.replace("${temp_page_method}","get_current_page('"+i+"')");
                $("#ination_page_ul").append(temp_page_html);
            }
            $("#ination_page_ul").append(next_page_html);
            get_current_page(page_num);

        }

        function get_current_page(page_num){
            /*if(current_page_num == page_num){
             return;
             }*/

            current_page_num = page_num;
            $("li[id^=page_li_]").removeClass("disabled");
            $("#page_li_"+page_num).addClass("disabled");
            if(page_num==1){
                $("#front_page").addClass("disabled");
            }else{
                $("#front_page").removeClass("disabled");
            }
            if(page_num==page_size){
                $("#next_page").addClass("disabled");
            }else{
                $("#next_page").removeClass("disabled");
            }
            //觸發獲取數據事件
            temp_current_page_method(page_num);
        }

        function get_front_page(){
            if(current_page_num<=1){
                return;
            }
            current_page_num = Number($.trim(current_page_num));
            current_page_num = current_page_num-1;

            if($("#page_li_"+current_page_num).html()!=undefined&&$("#page_li_"+current_page_num).html()!=null){
                get_current_page(current_page_num);
                return;
            }
            var _blog = current_page_num-page_num+1;
            var temp_num = 0
            if(_blog<1){
                temp_num = 1 ;
            }else{
                temp_num = _blog;
            }
            $("#ination_page_ul").html("");
            add_page_ination_li(temp_num,current_page_num,current_page_num);
        }

        function get_next_page(){
            if(current_page_num>=page_size){
                return;
            }
            current_page_num = Number($.trim(current_page_num));
            current_page_num = current_page_num+1;
            if($("#page_li_"+current_page_num).html()!=undefined&&$("#page_li_"+current_page_num).html()!=null){
                get_current_page(current_page_num);
                return;
            }

            var _blog = current_page_num+page_num-1;
            var temp_num = 0
            if(_blog>page_size){
                temp_num =  page_size;
            }else{
                temp_num = _blog;
            }
            $("#ination_page_ul").html("");
            add_page_ination_li(current_page_num,temp_num,current_page_num);
        }

        /*test_current_page_method爲獲取後臺第num頁數據並顯示到頁面上的方法*/
        function test_current_page_method(num){
            //alert(num)
            $("#testdiv1").html("<p>這是第<h3 style='color:red'>"+num+"</h3>頁的數據</p>");
        }
        /*你要做的就是將插件激活*/
        $(document).ready(function(){
            pageination_init("testdiv2",23,5,test_current_page_method);
        });
    </script>
</head>
<body>
     <div style=''>
      <div id="testdiv1"></div>
      <div id='testdiv2'></div>
     </div>
</body>
</html>

一.適合環境

jquery+bootstrp構建的html頁面

二.代碼片段

//定義全局變量
var page_size = 0;//總頁數
var current_page_num = 1;//當前頁碼
var page_num = 0; //分頁工具條最多可以顯示的頁數
var temp_current_page_method = null;
var page_ination_ul = "<ul class='pagination' id='ination_page_ul'></ul>";
var _front_page = "<li class='' id='front_page'><a href='javascript:void(0)' οnclick='${_front_page}' id='front_Page_a'>上一頁</a></li>";
var _next_page = "<li class='' id='next_page'><a href='javascript:void(0)' id='next_Page_a' οnclick='${_next_page}'>下一頁</a></li>";
var temp_page = "<li class='' id='${temp_page_li}'><a href='javascript:void(0)' οnclick=${temp_page_method} id='${temp_page_a}'>${_page}</a></li>"
//初始化
function pageination_init(container,size,pagenum,current_page_method){
    page_size = size;
    page_num = pagenum;
    temp_current_page_method = current_page_method;
    //如果總頁數小於1則不顯示分頁工具條
    if(size<=1){
       return;
    }
    var temp_page_size = 0;
    if(page_size<=page_num){
        temp_page_size = page_size;
    }else{
        temp_page_size = page_num;
    }
    $("#"+container).html(page_ination_ul);
    add_page_ination_li(1,temp_page_size,1);
}

function add_page_ination_li(start,end,page_num){
    //初始化上一頁和下一頁
    var front_page_html = _front_page;
    var next_page_html = _next_page;
    front_page_html = front_page_html.replace("${_front_page}","get_front_page()");
    next_page_html = next_page_html.replace("${_next_page}","get_next_page()");
    $("#ination_page_ul").append(front_page_html);//先append上一頁
    for(var i=start;i<=end;i++){
        var temp_page_html = temp_page;
        temp_page_html = temp_page_html.replace("${_page}",i);
        temp_page_html = temp_page_html.replace("${temp_page_li}","page_li_"+i);
        temp_page_html = temp_page_html.replace("${temp_page_a}","page_a_"+i);
        temp_page_html = temp_page_html.replace("${temp_page_method}","get_current_page('"+i+"')");
        $("#ination_page_ul").append(temp_page_html);
    }
    $("#ination_page_ul").append(next_page_html);
    get_current_page(page_num);

}

function get_current_page(page_num){
    current_page_num = page_num;
    $("li[id^=page_li_]").removeClass("disabled");
    $("#page_li_"+page_num).addClass("disabled");
    if(page_num==1){
       $("#front_page").addClass("disabled");
    }else{
        $("#front_page").removeClass("disabled");
    }
    if(page_num==page_size){
        $("#next_page").addClass("disabled");
    }else{
        $("#next_page").removeClass("disabled");
    }
    //觸發獲取數據事件
    temp_current_page_method(page_num);
}

function get_front_page(){
   if(current_page_num<=1){
        return;
   }
   current_page_num = Number($.trim(current_page_num));
   current_page_num = current_page_num-1;

   if($("#page_li_"+current_page_num).html()!=undefined&&$("#page_li_"+current_page_num).html()!=null){
       get_current_page(current_page_num);
       return;
   }
   var _blog = current_page_num-page_num+1;
   var temp_num = 0
   if(_blog<1){
       temp_num = 1 ;
   }else{
       temp_num = _blog;
   }
   $("#ination_page_ul").html("");
   add_page_ination_li(temp_num,current_page_num,current_page_num);
}

function get_next_page(){
    if(current_page_num>=page_size){
        return;
    }
    current_page_num = Number($.trim(current_page_num));
    current_page_num = current_page_num+1;
    if($("#page_li_"+current_page_num).html()!=undefined&&$("#page_li_"+current_page_num).html()!=null){
        get_current_page(current_page_num);
        return;
    }
    var _blog = current_page_num+page_num-1;
    var temp_num = 0
    if(_blog>page_size){
        temp_num =  page_size;
    }else{
        temp_num = _blog;
    }
    $("#ination_page_ul").html("");
    add_page_ination_li(current_page_num,temp_num,current_page_num);
}

//測試
function test_pageination(){
    pageination_init("test_pageination",23,5,test_current_page_method);
}

function test_current_page_method(num){
    //alert(num)
}

三.使用方法:

1,創建一個js文件，將上面的代碼複製進去，然後在頁面引入（前提是必須引入jquery和bootstrp）

2，自己再寫一個js文件，用來取後臺數據，首先需要一個方法獲取要展示的數據的總條數，然後調用初始化方法

pageination_init(container,size,pagenum,current_page_method);

參數說明：container是包裹分頁工具條的div的id（注意不要加#），size是需要展示的數據的總數目，pageunm是分頁工具條最多顯示的頁數（比喻說你要顯示頁號不大於5，顯示的效果就是1,2,3,4,5.第六葉開始隱藏了），current_page_method是你根據指定的頁號獲取後臺數據的方法名字

四.剛寫完沒好好測試，如果使用過程有什麼問題可以小紙條...

------------------------------------------------------------------------------如果你看到這裏，恭喜你，現在有一個比較完美的更新提供給你---------------------------------------------------------------------

這一次，我將分頁寫成一個jquery插件的方式，這樣你可以在同一個頁面設置多個分頁工具條

(function ($) {
            var pageination = function(options){
                var config={}
                config.container = options.container==undefined?this.defaults.container:options.container
                config.current_page_num = options.current_page_num==undefined?this.defaults.current_page_num:options.current_page_num
                config.page_size = options.page_size==undefined?this.defaults.page_size:options.page_size
                config.allow_size = options.allow_size==undefined?this.defaults.allow_size:options.allow_size
                config.return_method = options.return_method==undefined?this.defaults.return_method:options.return_method
                var opts=config
                render_pageination()
                function render_pageination(){
                    if(opts.page_size<1){
                        return;
                    }
                    var a=Math.floor(opts.allow_size/2),
                            o=opts.current_page_num,
                            b=o - a,
                            c=o + a,
                            d=o>a?c:opts.allow_size,
                            e=o>a?b: 1,
                            f=d>opts.page_size?opts.page_size: d,
                            g=e+opts.allow_size>opts.page_size?opts.page_size-opts.allow_size+1: e,
                            h=opts.allow_size%2==0?f:f+1
                    var start = g<1?1:g
                    var end = h
                    //拼接html
                    var ht = "<ul class='pagination'><li ><a href='#' name='to_front'>«</a></li><li ><a href='#' name='1'>第1頁</a></li>"
                    for(var i=start;i<end;i++){
                        if(i==opts.current_page_num){
                            ht +="<li class='active'><a href='#' name="+i+">"+i+"</a></li>"
                        }else{
                            ht +="<li><a href='#' name="+i+">"+i+"</a></li>"
                        }
                    }

                    ht +="<li><a href='#' name='"+opts.page_size+"'>第"+opts.page_size+"頁</a></li><li><a href='#' name='to_next'>»</a></li></ul>"
                    var _container = opts.container.split("&")
                    for(var i=0;i<_container.length;i++){
                        $("#"+_container[i]).html(ht)
                        $("#"+_container[i]).children("ul").children("li").children("a").bind("click",clickmethod)
                    }
                    $("#homepage_pagination").children("ul").addClass("pagination-sm")
                }

                function clickmethod(event){
                    //上一頁
                    if(event.target.name=='to_front'){
                        opts.current_page_num=opts.current_page_num-1<1?1:opts.current_page_num-1
                        opts.return_method(opts.current_page_num)
                        render_pageination()
                        return;
                    }

                    //下一頁
                    if(event.target.name=='to_next'){
                        opts.current_page_num=opts.current_page_num+1>opts.page_size?opts.page_size:opts.current_page_num+1
                        opts.return_method(opts.current_page_num)
                        render_pageination()
                        return;
                    }
                    opts.current_page_num = parseInt(event.target.name)
                    opts.return_method(opts.current_page_num)
                    render_pageination()
                }
            };
            pageination.prototype = {
                defaults :{
                    'container':"body",
                    'current_page_num':1,
                    'page_size' : 18,
                    'allow_size':5,
                    'return_method':""
                }
            };
            window.pageination = pageination;
        })(jQuery);

跟上面的一樣，要使用它，你必須要引入jquery.min.js和bootstrap.min.css

使用方法

function tt(num){
            //alert(num)
        }

        $(function(){
            var p1 = new pageination({
                container:"homepage_pagination_top",
                page_size:19,
                allow_size:7,
                return_method:tt
            })

            var p2 = new pageination({
                container:"homepage_pagination",
                page_size:30,
                return_method:tt
            })
        })

jquery+bootstrap分頁工具條插件

Python 將PDF轉爲PDF/A、PDF/X，以及PDF/A轉回PDF

elk3

號稱能打敗MLP的KAN到底行不行？數學核心原理全面解析

同事使用 insert into select 遷移數據，開開心心上線，上線後被公司開除！

DeepFilterNet復現

java調用c# com組件編碼過程筆記

grails+spring Security項目demo

jquery+bootstrap分頁工具條插件

oracle筆記--3.23

scp 上傳文件到服務器自動輸入密碼

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結