This demo will explain two ways:
1: link mode (setting a tag link address with different parameters: < a href = "xxxx. html? Current = 3"> 3 </a>; current: current: current page number)
Second: click mode (custom function jump, ajax mode, by clicking the event to send ajax requests to obtain data. ajax paging)
===================================================================================

Preparations, introducing js and css
<script type="text/javascript" src="../lib/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="../src/kkpager.min.js"></script>
<link rel="stylesheet" type="text/css" href="../src/kkpager.css" />

HTML DOM
<div id="kkpager"></div> 

Backstage Java Code, simulated query data base

Backstage use struts2 and json, not to mention much!

One: link mode

    <script type="text/javascript">  
            var sum = '${sum}';//Total Data Bar Background Return Data  
              var totalPage = Math.ceil(sum/3);//Total Page Number Total Data Bars/Display Number per Page Up  
            var current = '${current}';//Current Page Background Returns Data  
            if(current == 0){  
                current = 1;  
            }  
            $(function(){  
                //Initialization function  
                kkpager.generPageHtml({  
                pno : current, //page  
                total : totalPage,//PageCount  
                totalRecords : sum, //Total number of data bars  
                mode:'link', //Default to link mode  
                getLink : function(n){  
                    return 'usercontent/user.do?current='+n; //Setting the href address n of label a to represent the page number  
                },  
                 //Optional, with default values   
                lang : {  
                    firstPageText : 'First page',  
                    lastPageText : 'last page',  
                    prePageText : 'Previous page',  
                    nextPageText : 'next page',  
                    totalPageBeforeText : 'common',  
                    totalPageAfterText : 'page',  
                    totalRecordsAfterText : 'Bar data',  
                    gopageBeforeText : 'go to',  
                    gopageButtonOkText : 'Determine',  
                    gopageAfterText : 'page',  
                    buttonTipBeforeText : 'The first',  
                    buttonTipAfterText : 'page'  
                }  
            });  
    });  
    </script>  

2: click mode (ajax partial refresh)

    $(function(){  
            var sum = '${sum}';//Total Data Bar Background Return Data  
            var totalPage = Math.ceil(sum/3);//Total Page Number Total Data Bars/Display Number per Page Up  
            var current = '${current}';//Current Page Background Returns Data  
            if(current == 0){  
                    current = 1;  
            }  
            //Initialization function  
            kkpager.generPageHtml({  
                    pno : current, //page  
                    total : totalPage,//PageCount  
                    totalRecords : sum, //Total number of data bars  
                    mode:'click', //This is set to click mode  
                    lang : {  
                            firstPageText : 'First page',  
                            lastPageText : 'last page',  
                            prePageText : 'Previous page',  
                            nextPageText : 'next page',  
                            totalPageBeforeText : 'common',  
                            totalPageAfterText : 'page',  
                            totalRecordsAfterText : 'Bar data',  
                            gopageBeforeText : 'go to',  
                            gopageButtonOkText : 'Determine',  
                            gopageAfterText : 'page',  
                            buttonTipBeforeText : 'The first',  
                            buttonTipAfterText : 'page'  
                },  
                //Click on the function of the page number to send an ajax request to the background  
                click:function(n){  
                        $(".data-d table").html("");  
                        html = "<tr><td>id</td><td>uname</td><td>age</td><td>upwd</td></tr>";  
                        $.post("usercontent/ajax.do?current="+n,function(data){  
                        $.each(data,function(i,obj){  
                                html +="<tr><td>"+obj.id+"</td><td>"+obj.uname+"</td><td>"+obj.age+"</td><td>"+obj.upwd+"</td></tr>";  
                        })  
                        $(".data-d table").html(html);  
                },"json")  
                this.selectPage(n); //Select Page for Page Selection Switching with Manual Bar  
               },  
                //Set href link address by default#  
                getHref:function(n){  
                        return "javascript:;;";  
                }  
        });  
    });  

Parametric configuration instructions:

Required parameters

Optional parameters

getHref Link Algorithmic Function (only applicable to click mode) function type