分页---点击某一页颜色发生改变

最新推荐文章于 2023-04-14 10:35:45 发布

原创最新推荐文章于 2023-04-14 10:35:45 发布 · 2.3k 阅读

0 ·

CC 4.0 BY-SA版权

jquery 专栏收录该内容

23 篇文章

订阅专栏

本文详细介绍了如何在前后端开发中实现分页功能，包括从后端获取要显示的页数并传递给前端，前端如何接收并展示页数，以及如何使用JavaScript为当前页面的链接添加高亮显示，提升用户体验。

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

方法：

1.首先从后台传过来要显示的页数

self.render("backend/drill_question_query.html", myuser=self.admin, admin_nav=43, questions=questions, page=page, pagesize=pagesize, pages=pages)

2.然后在前端接受当前要显示的页数

<div style="display:inline;" class="fenye" data-dt="{{page}}" id="fenye">
    <a href="/admin/drill/questions?page={{ page-1 if page> 1 else 1 }}"><span>上一页</span></a>
    {% if pages < 10 %}
    {% for i in range(1,pages+1) %} <a href="/admin/drill/questions?page={{i}}"><span>{{i}}</span></a>{% end %}
    {% else %}
    {% for i in range(1,8) %} <a href="/admin/drill/questions?page={{i}}"><span>{{i}}</span></a>{% end %}
    <a href="/admin/drill/questions?page={{pages}}"><span>{{pages}}</span></a>
    跳转<input id="pager" style="display:inline;width:26px;height:20px;" class="form-control" onpropertychange="JumpPage()" onblur="JumpPage()">页
    {% end %}
    <a href="/admin/drill/questions?page={{ page+1 if page<pages else pages }}"><span>下一页</span></a>
</div>

3.在js中给a标签变颜色

<script>
    $(function() {
        // notice为当前第几页
        var page = $("#fenye").data("dt")
        var c = "/admin/drill/questions?page="+page
        page = page.toString();
        $("a span").each(function(i,item){
            console.log(typeof $(this).text())
            if($(this).text()==page){
                $(this).parent().css("color","#D200D2")
            }
        });
    })
</script>