JavaScript实现列表分页浏览

页面中经常会使用列表显示查询结果，并可以使用JavaScript代码很方便地实现分页浏览功能，下面先来看完整的实现代码。

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        #result {
            min-height:300px;
        }
        .list_res {
            list-style-type: square;
        }
        .list_res li a{
            color: navy;
            font-size: 1.1em;
        }
        .listPageNavi {
            text-align: center;
            margin-top: 2em;
        }
        .listPageNavi a {
            font-size: 0.9em;
            margin-left: 0.5em;
            margin-right: 0.5em;
        }
    </style>
</head>
<body>
<div id="result"></div>
</body>
</html>
<script src="/js/ajax.js"></script>
<script>
    // 每页多少行
    let listRowPerPage = 3;
    // 当前页
    let listCurPage = 1;

    // 初始化
    function listPageInit(id) {
        let lst = document.getElementById(id);
        if (lst === undefined)
            return false;
        let lstItems = listGetItems(id);
        if (lstItems === null || lstItems.length === 0)
            return false;
        // 显示页导航
        let s = Array("<div class='listPageNavi'>");
        // 首页
        s.push(`<a href="javascript:listShowPage('${id}',1);">首页</a>`);
        // 上一页
        s.push(`<a href="javascript:listPreviousPage('${id}');">上一页</a>`);
        // 下一页
        s.push(`<a href="javascript:listNextPage('${id}');">下一页</a>`);
        // 末页
        s.push(`<a href="javascript:listLastPage('${id}');">末页</a>`);
        //
        s.push("</div>");
        // 导航添加到列表后
        lst.parentNode.innerHTML += s.join("");
        // 显示第一页
        listShowPage("list1", 1);
        return true;
    }

    // 返回列表项集合
    function listGetItems(id) {
        let lst = document.getElementById(id);
        return lst.getElementsByTagName("li");
    }

    // 总页数
    function listPageCount(id) {
        let lstItems = listGetItems(id);
        let pageCount = Math.floor(lstItems.length / listRowPerPage);
        if (lstItems.length % listRowPerPage !== 0)
            pageCount++;
        return pageCount;
    }

    // 显示指定页
    function listShowPage(id, page) {
        let lstItems = listGetItems(id);
        let min = (page - 1) * listRowPerPage;
        let max = min + listRowPerPage;
        if (max > lstItems.length)
            max = lstItems.length;
        // 记录当前页
        listCurPage = page;
        //
        for (let i = 0; i < min; i++)
            lstItems[i].style.display = "none";
        for (let i = min; i < max; i++)
            lstItems[i].style.display = "list-item";
        for (let i = max; i < lstItems.length; i++)
            lstItems[i].style.display = "none";
    }

    // 显示上一页
    function listPreviousPage(id) {
        let nextPage = listCurPage - 1;
        if (nextPage < 1)
            nextPage = 1;
        listShowPage(id, nextPage);
    }

    // 显示下一页
    function listNextPage(id) {
        let pageCount = listPageCount(id);
        let nextPage = listCurPage + 1;
        if (nextPage > pageCount)
            nextPage = pageCount;
        listShowPage(id, nextPage);
    }

    // 显示末页
    function listLastPage(id) {
        let pageCount = listPageCount(id);
        listShowPage(id, pageCount);
    }

    //
    // 读取列表并初始化
    new Ajax("list.html").getText(function (txt) {
        document.getElementById("result").innerHTML = txt;
        // 列表分页初始化
        listPageInit("list1");
    });
</script>

页面中，style元素定义了一些必要的CSS样式，id为"result"的div元素用于显示列表及分页浏览导航。下面着重来看JavaScript代码部分。

JavaScript代码中，首先定义了两个变量，分别是：

listRowPerPage，设置每页显示多少行，测试时设置为3。
listCurPage，当前显示的是第几页，默认为第1页。

listPageInit(id)函数，用于分页浏览的初始化，参数需要指定列表元素的id属性值。函数中，首先会对列表元素和列表项进行检查；然后，使用HTML代码创建导航栏，分别使用a元素创建了显示首页、上一页、下一页和末页的导航链接。初始化成功时会显示第一页，并返回true；否则返回false。

listGetItems(id)函数，用于获取列表项集合，参数指定列表元素的id属性值。函数会返回列表对象中的所有li元素集合。

listPageCount(id)函数，计算总页数，参数指定列表元素的id属性值。函数会计算列表项按listRowPerPage数值分页共有多少页。

listShowPage(id, page)函数，显示指定的页。参数一指定列表元素的id属性值，参数二指定显示第几页。函数中，会按列表项集合的索引进行分页处理，显示的列表项使用li元素的默认显示（display）属性list-item，不显示的列表项则设置为none。

listPreviousPage(id)函数，显示上一页，参数指定列表元素的id属性值。函数中会通过当前页减1计算上一页的页码，如果小于1则显示第一页。

listNextPage(id)函数，显示下一页，参数指定列表元素的id属性值。函数中通过当前页加1计算下一页的页码，如果大于总页数则显示最后一页。

listLastPage(id)函数，显示最后一页，参数指定列表元素的id属性值。

在这些函数中，只有listPageInit(id)需要直接调用，此函数中对列表的元素进行了必要的检查，其它函数都会在代码中自动调用，所以不需要对列表元素进行重复检查。

代码的最后，模拟从服务器获取查询结果，使用Ajax类读取了页面相同目录下list.html文件中的列表代码，其内容如下：

HTML

<ul id='list1' class='list_res'>
    <li><a href='/article/Article.aspx?id=a251000' target='_blank'>Excel与数据处理——概述</a></li>
    <li><a href='/article/Article.aspx?id=a251001' target='_blank'>Excel和二维表结构</a></li>
    <li><a href='/article/Article.aspx?id=a251002' target='_blank'>小小单元格有大学问</a></li>
    <li><a href='/article/Article.aspx?id=a251003' target='_blank'>区域</a></li>
    <li><a href='/article/Article.aspx?id=a251004' target='_blank'>公式与函数</a></li>
    <li><a href='/article/Article.aspx?id=a251005' target='_blank'>数字与计算</a></li>
    <li><a href='/article/Article.aspx?id=a251006' target='_blank'>文本</a></li>
    <li><a href='/article/Article.aspx?id=a251007' target='_blank'>长数字、前导0与自动填充</a></li>
    <li><a href='/article/Article.aspx?id=a251008' target='_blank'>日期与时间</a></li>
    <li><a href='/article/Article.aspx?id=a251009' target='_blank'>逻辑运算与条件判断</a></li>
</ul>

请注意，列表元素的id属性为list1，在调用列表分页浏览相关函数时需要使用这个属性值。如果想简化代码，也可以将这个列表复制到id为result的div元素中直接进行测试，并将Ajax类的调用直接使用listPageInit("list1");代码替换。

在Ajax对象中，成功读取列表数据后，调用showPageInit("list1")函数进行初始化，并显示第一页的内容，显示效果如下图所示。

列表分页浏览

本文通过JavaScript代码实现了列表分页浏览的基本功能，实际应用中可以根据需要进行扩展。对于list系列变量和函数，可以保存到单独的.js文件，以便在其它页面中重复使用。此外，listRowPerPage和listCurPage变量定义为全局变量，所以，在一个页面中只能支持一个列表的分页浏览，如果页面中有多个列表需要分页浏览（虽然这样的设计并不多见），可以将这两个数据使用input字段（type属性设置为hidden）保存到对应的导航栏中，并使用类似"列表id+RowPerPage"、"列表id+CurPage"这样的格式命名，在其它函数中使用这两个数据时，可以使用document.getElementById()方法读取。如果需要在初始化时设置每页显示多少行数据，也可以在listPageInit()函数中添加第二个参数，并将设置的数据保存到listRowPerPage变量或隐藏的input字段中。