JavaScrip实现前端列表分页

    在一些网站的管理系统中，通常的查询功能会有很多信息，这时候前端如果不分页显示，那么浏览器的长度就会很长。所以通常要进行分页处理。
    对于分页主要有两种方法，第一种方法有后台来进行分页，前端通过请求后台传入分页所需的参数来使后台返回响应的分页结果。第二种方法是有前台来进行分页，后台一次性返回全部结果，前端对这些结果进行分页显示处理。
    下面主要是实现的一个前端分页的效果，先上几张效果图：

分页前

列表对应的代码

<ul>
                    <li>
                        <div class="news-item">
                            <a class="news-name" href="info/1976/5086.htm" target="_blank">新闻1标题</a>
                            <span class="news-date">2017/12/22<span>
        </div>
   </li>
   <li>
    <div class="news-item">
             <a class="news-name" href="info/1976/4957.htm" target="_blank">新闻2标题</a>
         <span class="news-date">2017/12/12<span>
        </div>
   </li>
   <li>
    <div class="news-item">
             <a class="news-name" href="info/1976/4956.htm" target="_blank">新闻3标题</a>
         <span class="news-date">2017/12/12<span>
        </div>
   </li>
   ...
   ...
   ...
</ul>

如何分页呢？
首先给ul标签加一个id，比如id=”news-lis”，然后在页面合适的位置加上分页操作控件，通过Javascript调整li的隐藏与显示。

分页后效果图

分页代码

<!--分页控件，将此代码添加到网页上即可-->
<div  class="c-pages">
    <div class="cp-item">
        <span>共</span>
        <span id="cp-count">0</span>
        <span>条</span>
    </div>
    <div class="cp-item">
        <span id="curr-page">1</span>
        <span>/</span>
        <span id="total-page">1</span>
    </div>
    <div class="cp-item">
        <button id="home">首页</button>
        <button id="prev">上页</button>
        <button id="next">下页</button>
        <button id="last">尾页</button>
    </div>
    <div class="cp-item">
        <button id="goTo">转到</button>
        <input type="number" id="goToPage" />
        <span>页</span>
    </div>
</div>

/**分页js函数,forpage.js,此代码需要链接在html页面底部，同时需要先加载jquery框架**/

// li jquery object array
var newsLis = $("#news-lis").children();

// total news count
var count = newsLis.length;

// max count for one page
var ONE_PAGE_COUNT = 5;

// total pages
var totalPage = parseInt(count / ONE_PAGE_COUNT) + ((count % ONE_PAGE_COUNT) == 0? 0 : 1);

// init page
var currPage = 1;

// function used to set news count
function setUICount(count) {
    if (count == undefined)
        count = 0;
    $("#cp-count").text(count);
}

// function used to set total pages
function setUIPages(totalPage) {
    totalPage = Math.max(1, totalPage);
    $("#total-page").text(totalPage)
}

// update curr page
function setUICurrPage(currPage) {
    currPage = Math.max(1, currPage);
    $("#curr-page").text(currPage);
}

// 传入显示的page参数，显示对应页面的新闻列表，隐藏其他列表
function scanAllForShow(page) {
    // page at least 1 or max totalPage
    page = Math.max(1, Math.min(totalPage, page));
    for (var i = 0;i < count;i++) {
        if (parseInt(i / ONE_PAGE_COUNT) + 1 == page)
            $(newsLis[i]).attr("style", "");
        else
            $(newsLis[i]).attr("style", "display: none");
    }
}

function homePage() {
    currPage = 1;
    scanAllForShow(currPage);
    setUICurrPage(currPage);
}

function nexePage() {
    var last = currPage;
    if (last == totalPage)
        return;

    scanAllForShow(++currPage);

    setUICurrPage(currPage);
}

function prevPage() {
    var next = currPage;
    if (next <= 1) 
        return;

    scanAllForShow(--currPage);

    setUICurrPage(currPage);
}

function lastPage() {
    currPage = totalPage;
    scanAllForShow(currPage);
    setUICurrPage(currPage);
}

function goToPage() {
    var target = $("#goToPage").val();
    if (target == undefined)
        target = currPage;
    target = Math.max(1, Math.min(totalPage, target));
    currPage = target;
    scanAllForShow(target);
    setUICurrPage(currPage);
    $("#goToPage").val("");
}

// 页面加载完成后调用此函数
function init() {
    newsLis = $("#news-lis").children();
    count = newsLis.length;
    totalPage = count / ONE_PAGE_COUNT + ((count % ONE_PAGE_COUNT) == 0? 0 : 1);
    currPage = 1;
    setUICount(count);
    setUIPages(totalPage);
    setUICurrPage(currPage);
    scanAllForShow(currPage);
    // 注册点击函数
    $("#home").click(homePage);
    $("#prev").click(prevPage);
    $("#next").click(nexePage);
    $("#last").click(lastPage);
    $("#goTo").click(goToPage);

}

window.onload = function() {
    init();
}