一款简单的前端分页

一款非常简单的分页实现方法，适合新手使用。

前端一次性把数据全部读取完，再进行分页，前端分页比较块，但不适用于数量量大的情况

代码：

html:

   <ul id="pageul"></ul>


    <div class="pagination_left">


        <ul class="pagebtnul" id="pagebtnul">


            <li><a href="#">首页</a></li>
            <li><a href="#">1</a></li>
            <li><a class="active" href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li><a href="#">尾页</a></li>
        </ul>

    </div>

js:

   var page = new PagedList();  //分页方法
    var pagedBtn = new PagedBtn();  //分页按钮方法
    var showpage = 5; //显示页数 
    var showpageCount = 3; //显示一页显示数量
    jQuery(document).ready(function () { 
        requestPageData();
    })
  
    //填充按钮
    function addbtn(item, showtem, CurrentPage) {
        var sb = '';
        if (item == CurrentPage)
        {
            sb+='  <li><a href="#"  class="active" οnclick="clickbtn(';
        }
        else
        {
            sb+='  <li><a href="#"  οnclick="clickbtn(';
        }
        sb+=item;
        sb+=')">';
        sb+=showtem;
        sb+='</a></li>';
        $("#pagebtnul").append(sb)
    }


    function clickbtn(CurrentPage)
    {
        var pagedata = page.getPagetoList(CurrentPage);
        initPageHtml(pagedata);
        var btns = pagedBtn.getBtntoList(CurrentPage);
        initBtnHtml(btns, CurrentPage);
    }
    function initPageHtml(pagedata) {
        $("#pageul").empty();        
          $.each(pagedata, function (i, item) {
              var sb = "<li>" + item.name + "</li>";
              $("#pageul").append(sb)
        });
    }


    function initBtnHtml(pagedata, CurrentPage) {
        $("#pagebtnul").empty();
        var TotalPageCount = page.TotalPageCount()
        if (TotalPageCount != 1)
        {
            if (CurrentPage !=1) {
                addbtn(1, "首页", 0);
            }
            // $("#ticketsul").empty();
            $.each(pagedata, function (i, item) {
                addbtn(item, item, CurrentPage);
            });
            if (CurrentPage !=TotalPageCount) {
                addbtn(TotalPageCount, "尾页", 0);
            }
        }
    }
    function requestPageData2() {
        $.ajax({
            url: "url",
            dataType: "json",
            success: function (data) { initPagedata(pageData, 1) }
        });
    }
    function requestPageData() {


        data = [{ name: "分页1" }, { name: "分页2" }, { name: "分页3" }, { name: "分页4" }, { name: "分页5" }, { name: "分页6" }, { name: "分页7" }, { name: "分页8" }, { name: "分页9" }, { name: "分页10" }, { name: "分页11" }, { name: "分页12" }, { name: "分页13" }, { name: "分页14" }, { name: "分页15" }, { name: "分页16" }, { name: "分页17" }, { name: "分页18" }, { name: "分页19" }, { name: "分页20" }, ];
         initPagedata(data, 1)
     }
    function initPagedata(pageData, currtpage)
    {
        page.initdata(pageData, showpageCount);
        pagedBtn.initdata(page.TotalPageCount(), showpage);
        var pagedata = page.getPagetoList(currtpage);
        initPageHtml(pagedata);
        var btns = pagedBtn.getBtntoList(currtpage);
        initBtnHtml(btns, currtpage);

    }        

代码上传到csdn:

https://download.csdn.net/download/qq_25744257/10491386