自定义分页

最新推荐文章于 2022-12-24 10:37:50 发布

原创最新推荐文章于 2022-12-24 10:37:50 发布 · 353 阅读

0 ·

CC 4.0 BY-SA版权

HTML+CSS 同时被 2 个专栏收录

9 篇文章

订阅专栏

Javascript

7 篇文章

订阅专栏

本文介绍了如何自定义每页显示的数据数量，并将HTML与总条数和总页数结合。点击分页数字会高亮显示，再次点击其他数字会更新高亮状态，并通过调用startSearch(3)重新加载数据，确保分页颜色正确。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

自己定义每页显示多少条

html1 ="   每页显示 :  <a href='#'  id='10' onclick='setPageSize(10)' style='color:#3c8dbc'>10</a>,<a href='#' id='20' style='color:black' onclick='setPageSize(20)'> 20</a>,<a href='#' id='30' style='color:black' onclick='setPageSize(30)'> 30</a>,<a href='#' id='40' style='color:black' onclick='setPageSize(40)'> 40</a>,<a href='#' id='50' style='color:black' onclick='setPageSize(50)'> 50</a>";

先把初始的页数都设置为黑色 10,20,30,40,50

然后把写的HTML接到共多少条多少页的后边

$('#totalPage').append(html1);

点击分页数目，相应数字变为蓝色，其余为黑

（注意再次点击别的数字第一次点的数字要变回黑色）

var storage=window.sessionStorage;
function setPageSize(num){
	sessionStorage.setItem("pageSize",num);
    startSearch(3);
}

这里用到了sessionStrage，而不是localStorage 因为每次退出系统后，分页数应该回到默认的数而不是一直存在

每次点击分页数目，就会重新查找 ——startSearch(3);，然后检查是否改变颜色

function changecolor(){
    color_num = sessionStorage.getItem('pageSize');
    var ary =[10,20,30,40,50];
    //ary.each(function(item){
    for(item in ary){
        if(color_num!=ary[item])
        {
            $('#'+ary[item]).css("color","black");
        }
        else
        {
            $('#'+ary[item]).css("color","#3c8dbc");
        }
    }
}

最后效果如下：