html+js实现分页功能

旅人杰

于 2020-02-14 20:59:42 发布

阅读量4.7k

点赞数

文章标签： html js javascript

本文链接：https://blog.youkuaiyun.com/qq_42554719/article/details/104319348

版权

本文介绍了如何结合HTML和JavaScript来实现网页的分页功能。通过展示js代码和html代码段，详细说明了分页逻辑和界面展示的实现过程。

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

在这里插入图片描述

js代码

<script>
        $(function () {
            //获取上一页html传递过来的id信息
           var search = location.search;
           var cid = search.split("=")[1];

           //调用异步交互方法
           load();
        });

        //创建异步交互方法,currentPage:当前第几页；pageSize：每页展示的数据记录数（10条记录）
        function load(currentPage, pageSize) {
            $.post("category/findByPage",{currentPage:currentPage,pageSize:pageSize},function (pb) {
                var str="";
                //添加每页要展示的信息
                for(var x=0;x<pb.pageSize;x++){
                    var s="<li style='height: 200px'>\n" +
                        "<div class=\"img\"><img style='width: 300px;height: 200px' src=\" "+pb.list[x].rimage+"\" alt=\"\"></div>\n" +
                        "<div class=\"text1\">\n" +
                        "<p>"+pb.list[x].rname+"</p>\n" +
                        "<br/>\n" +
                        "<p>"+pb.list[x].routeIntroduce+"</p>\n" +
                        "</div>\n" +
                        "<div class=\"price\">\n" +
                        "<p class=\"price_num\">\n" +
                        "<span>&yen;</span>\n" +
                        "<span>"+pb.list[x].price+"</