js分页效果

最新推荐文章于 2023-03-26 17:33:02 发布
最新推荐文章于 2023-03-26 17:33:02 发布
阅读量83 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Lilyxu1111/article/details/118056644
版权

//html部分

<div class="goods-box">
            <div class="one">
                <img src="img/product1.jpg" alt="">
                <div class="goods-price">￥438.00</div>
                <div class="goods-text">
                    <a href="#">【坏果包赔】<span>猫山王榴莲</span>肉马来西亚进口带壳（D197）液氮冷冻水果 特惠装 中果</a>
                </div>
                <div class="goods-comment">
                    <span>1万+</span>条评价
                </div>
                <div class="goods-comment">
                    <a href="">猫山王榴莲旗舰店</a>
                </div>
                <div class="logistic" title="京东物流仓配，商家提供售后服务">
                    <i>京东物流</i>
                </div>
                <div class="last-shop">
                    <a href="#" class="contrast"><div class="squre"></div> <i> &nbsp;</i> 对比</a>
                    <a href="#" class="contrast ss"><span class="gz">&#xe610;</span><i>&nbsp;</i>关注</a>
                    <a href="#" class="contrast shop"><img src="img/jiar.png" width="19px" alt=""><i>&nbsp;</i> 加入购物车</a>
                </div>
            </div>
        </div>
        <div class="cont-paging">
            <span class="page-change prev">上一页</span>
            <div class="paging"></div>
            <span class="page-change nex">下一页</span>
        </div>

//css部分

.goods-box {
    width: 1080px;
    height: 450px;
    margin-top: 50px;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
    background-color: #f9f9f9;
}
.one {
    float: left;
    width: 220px;
    margin-top: 20px;
    margin-bottom: 0;
    margin-left: 40px;
}
.one::after {
    content: '';
    display: block;
    clear: both;
}
.goods-price {
    margin-top: 15px;
    color: #e4393c;
    font-size: 18px;
}
.goods-text {
    overflow: hidden;
    height: 50px;
    margin-top: 10px;
    color: #666;
    font-size: 12px;
    text-overflow: ellipsis;
}
.goods-text a {
    color: #666;
}
.goods-text span {
    color: #e4393c;
}
.goods-text a:hover {
    color: #e4393c;
}
.goods-comment {
    margin-top: 10px;
    color: #a7a7a7;
    font-size: 12px;
}
.goods-comment span {
    color: #646fb0;
}
.goods-comment a {
    color: #a7a7a7;
}
.logistic {
    height: 16px;
    margin-top: 10px;
}
.logistic i {
    padding: 0 3px;
    border: 1px solid #e23a3a;
    color: #e23a3a;
    font-size: 12px;
}
.last-shop {
    margin-top: 16px;
    margin-bottom: 0;
}
.last-shop::after {
    content: '';
    display: block;
    clear: both;
}
.contrast {
    float: left;
    position: relative;
    width: 58px;
    height: 25px;
    margin-bottom: 10px;
    border: 1px solid #ddd;
    color: #999;
    font-size: 12px;
    line-height: 25px;
}
.squre {
    float: left;
    width: 10px;
    height: 10px;
    margin-top: 6px;
    margin-left: 6px;
    border: 1px solid rgb(221, 221, 221);
}
.gz {
    margin-left: 6px;
    font-family: 'iconfont';
    font-size: 15px;
}
.ss {
    border-left: none;
}
.shop {
    width: 93px;
    border-left: none;
}
.shop img {
    margin-left: 3px;
    vertical-align: -5px;
}
.cont-paging {
    width: 1080px;
    height: 50px;
    margin-top: 0;
    margin-right: auto;
    margin-left: auto;
    background-color: #fff;
    line-height: 50px;
    text-align: center;
}
.cont-paging::after {
    content: '';
    display: block;
    clear: both;
}
.page-change {
    float: left;
    height: 20px;
    margin-top: 15px;
    margin-right: 20px;
    margin-left: 350px;
    background-color: rgb(162, 167, 228);
    color: rgb(56, 56, 56);
    line-height: 20px;
}

//js部分

let ww = [];
let res = '';
let shoppingcar = $('.shop-box');
let y=0;
let allgoods = $('.all-good');
//axios引入数据，需要说明的是引用axios需要用<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
axios.post("http://8.130.175.54:8003/getAllGoods")
.then(function (xlfy) {
    console.log(xlfy.data);
    res=xlfy.data;
    //获取元素,分页效果
    let div = $('.goods-box');
    let prev = $('.prev');
    let nex = $('.nex');
    let paging = $('.paging');
    let pagecount = Math.ceil(xlfy.data.length/4);
    let x=1;
    let info = [];
    //定义图片
    let pict = ['<img src="img/product10.jpg" alt="">',
        '<img src="img/product1.jpg" alt="">',
        '<img src="img/product2.jpg" alt="">',
        '<img src="img/product3.jpg" alt="">',
        '<img src="img/product4.jpg" alt="">',
        '<img src="img/product5.jpg" alt="">',
        '<img src="img/product6.jpg" alt="">',
        '<img src="img/product7.jpg" alt="">',
        '<img src="img/product8.jpg" alt="">',
        '<img src="img/product9.jpg" alt="">'
    ]
    //渲染函数，将数据插入
    let rend = ()=>{
        info = xlfy.data.slice((x-1)*4,4*x);
        div.innerHTML = '';
        info.forEach((item,index)=>{
            let one = document.createElement('div');
            one.classList.add('one');
            one.setAttribute('index',item.id);
            one.innerHTML += `${pict[index]}
            <div class="goods-price">￥${item.price}</div>
            <div class="goods-text">
                <a href="#">【${item.name}】${item.desc}</a>
            </div>
            <div class="goods-comment">
                <a href="">${item.merchant}</a>
            </div>
            <div class="logistic" title="京东物流仓配，商家提供售后服务">
                <i>京东物流</i>
            </div>
            <div class="last-shop">
                <a href="javascript:void(0)" class="contrast"><div class="squre"></div> <i> &nbsp;</i> 对比</a>
                <a href="javascript:void(0)" class="contrast ss"><span class="gz">&#xe610;</span><i>&nbsp;</i>关注</a>
                <a href="javascript:void(0)" class="contrast shop"><img src="img/jiar.png" width="19px" alt=""><i>&nbsp;</i> 加入购物车</a>
            </div>`;
            div.appendChild(one);
        }) 
    }
    //调用渲染函数
    rend();
    //添加页数
    for(let i=1;i<=pagecount;i++){
        paging.innerHTML = paging.innerHTML+`<a>${i}</a>`+' ';
    }
    //添加页数输入框
    paging.innerHTML+=`<span class='skip'>跳转至<input type='text'></span>页`;
    //选择页数并给第一页添加默认的背景色
    let all = paging.querySelectorAll('a');
    all[x-1].classList.add('active');
    //选择页数，实现点击某页跳转到那一页
    all.forEach((item,index)=>{
        item.onclick = function(){
            div.innerHTML = '';
            for(let i=0;i<all.length;i++){
                all[i].classList.remove('active');
            }
            this.classList.add('active');
            x = index+1;
            rend();
        }
    })
    //input框按enter键实现跳转
    let skipinput = document.querySelector('.skip input');
    skipinput.onkeydown = function(e){
        if(e.keyCode==13&& skipinput.value !=''){
            for(let i=0;i<all.length;i++){
                all[i].classList.remove('active');
            }
            x = e.target.value;
            all[x-1].classList.add('active');
            div.innerHTML = '';
            rend();
        }
        if(x>=all.length||x<=0){
            return ;
        }
    }
    //点击上一页，下一页改变高亮
    let changepage = ()=>{
        for(let i=0;i<all.length;i++){
            all[i].classList.remove('active');
        }
        all[x-1].classList.add('active');
    }
    //上一页的点击效果
    prev.onclick = function(){
       
        if(x<=1){
           return;
        }else{
            div.innerHTML = '';
            x=x-1;
            changepage();
            rend();
        }
    }
    //下一页的点击效果
    nex.onclick = function(){
        if(x>=3){
            return ;
        }else{
            div.innerHTML='';
            x=x+1;
            changepage();
            rend();
        }
    }
Lilyxu1111
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
原生JS实现分页效果
越陌度阡
07-18 2944
做开发久了，会越来越依赖框架，毕竟利用框架可以快速的完成工作任务，如常见的分页效果，只需要与后端配合，由后端返回总页数和当前第几页这两个参数传给一些框架的分页功能，就可以轻松的实现分页效果，那如果在不依赖框的情况下利用原生JS如何实现一个分页效果呢？接下来给大家分享一段分页代码实现下面的效果。 <!DOCTYPE html> <html> <head>.........
用js实现分页
weixin_42609225的博客
01-05 532
使用 JavaScript 实现分页可以使用以下步骤： 首先，你需要确定你要分页的数据，并计算出数据的总页数。 然后，你可以在页面上创建一个分页组件，用来显示分页按钮。 为每个分页按钮添加点击事件处理函数。在这个函数中，你可以使用 AJAX 技术从服务器获取相应页的数据，然后在页面上渲染出来。 当用户点击分页按钮时，你可以使用 JavaScript 改变页面上分页组件的样式，以此来指示当前...
【学习笔记45】JavaScript的分页效果
yizhiyang
11-28 382
JavaScript的分页效果
JavaScript实现列表分页（小白版）
分享Java，vue学学习笔记
03-26 2251
上方获li获取标签为8；这里是一个页面显示5条数据所以对pageLi进行取模；为0则是Math.floor不是则是Math.ceil，Math.floor是向下取整（ 1.6 => 1），Math.ceil为向上取整（1.6=>2 ），所以这里n最后等于2，页面为2。第一步：修改一下样式（一条li标签假如有40的高度，现在有8个则整个ul有320；我现在需要进行一个页面显示5条数据；第四步：对分页两个li做点击事件进行分页显示。在获取分页li进行样式设置。以ul列表为例进行分页。第三步：创建分页标签。
javascript 实现分页
weixin_35755188的博客
02-13 1946
JavaScript 实现分页可以使用以下步骤： 计算出需要分页的数据总量和每页显示的数据数量。 根据总数据量和每页数据量计算出需要的总页数。 根据当前页码计算出该页的数据在总数据中的起始位置和结束位置。 根据起始位置和结束位置截取出当前页的数据。 在界面上显示当前页的数据，并提供页码控制功能，使用户可以在不同的页码间切换。 以下是一个简单的 JavaScript 代码示例： ```...
JS 简单分页样式
weixin_42468212的博客
08-20 547
css部分 <style> ul{ -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; } li{ ...
JS分页效果示例
01-19
分页 代码如下: [removed][removed] 代码如下: /*——–pager——-*/ .number span a{padding:4px 6px;} .number span a:hover{padding:4px 6px; background-color: #999;color:#FFFFFF;} .number {margin:5px 0;...
原生javascript实现分页效果
10-19
主要为大家详细介绍了原生javascript实现分页效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
原生js实现分页效果
10-14
主要为大家详细介绍了原生js实现分页效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
用js实现页面分页效果
04-14
1.用js控制页面上的数据，实现分页效果， 2.可以对每一列进行排序 3.还可以控制页面以几行数据进行分页
div+js分页效果
11-26
div分页浏览，可上下浏览 div id命名为div+位置号，通 js函数通过要显示的div var eventSizez//总页数 var currentPosition = 0; //初始位置 //下一个正在办理事项办理情况 function next() { if(currentPosition 0){ $('#div'+currentPosition).hide(); currentPosition--; if(currentPosition <0){ currentPosition=eventSize-1; } $('#div'+currentPosition).show(); }else{ $('#div'+currentPosition).hide(); currentPosition=eventSize-1; $('#div'+currentPosition).show(); } } //初始化正在办理事项情况 function initPostion(position) { if(position==0){ $('#div0').show() return; } }
推荐10个js分页样式
03-12
推荐个人整理的十个JS的分页样式，相信有用。
(手机移动web)iscroll+html5+css3+js实现下拉刷新上拉分页的功能
08-26
基于iscroll4和html5、css3实现的下拉刷新、上拉分页的demo，兼容pc、android、ios、wp等设备。解决了上拉分页footer存在bug的问题。 支持chrome、ff、opera、360浏览器、百度浏览器、qq浏览器等众多主流浏览器。
js实现分页
sning999
11-28 355
一、首先编写分页的样式。 display:inline;"> 2283c5; background-color:#fafafa; border-color:#e0e8eb; position:relative; float:left; padding:6px 12px; border:1px solid #ddd;"> display:inli
分页JS模板
Pretty_Pretty_的博客
04-02 550
function goPage(pno) { var idTable = document.getElementById("idData"); var rowNum = idTable.rows.length;//获取行数 var totalPage;//总页数 var pageSize = 15;//每页显示行数 c...
js控制分页效果，下拉列表实时更新分页数量效果
qq_40825627的博客
12-13 1161
先来看效果图 小编采用的是json数据动态加载数据的，json格式的数据如下： { &quot;values&quot;:[ { &quot;name&quot;:&quot;111&quot;, &quot;city&quot;:&quot;111&quot;, &quot;postcode&quot;:&quot;111&quo
原生JS实现酷炫分页
越陌度阡
07-18 459
分享一个如下效果的JS分页特效，是不是很酷炫。 以下是代码实现： <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>原生JS实现酷炫分页</.........
js和mysql实现分页效果
最新发布
05-20
在 JavaScript 中实现分页效果可以使用 Ajax 技术向后端请求数据，然后通过 DOM 操作动态生成分页器和数据列表。而在 MySQL 中实现分页则可以使用 LIMIT 关键字和 OFFSET 参数。 下面是一个简单的示例： JavaScript代码： ```javascript function getResults(page) { $.ajax({ url: 'get_results.php', type: 'GET', data: {page: page}, success: function(response) { // 处理返回的数据 var results = response.results; var totalPages = response.totalPages; // 动态生成分页器和数据列表 // ... } }); } ``` PHP代码： ```php $perPage = 10; // 每页显示的记录数 $page = $_GET['page'] ?? 1; // 当前页码，默认为第一页 $offset = ($page - 1) * $perPage; // 计算偏移量 // 查询数据总数 $total = $pdo->query('SELECT COUNT(*) FROM table')->fetchColumn(); // 查询当前页的数据 $stmt = $pdo->prepare('SELECT * FROM table LIMIT :offset, :perPage'); $stmt->bindParam(':offset', $offset, PDO::PARAM_INT); $stmt->bindParam(':perPage', $perPage, PDO::PARAM_INT); $stmt->execute(); $data = $stmt->fetchAll(PDO::FETCH_ASSOC); // 计算总页数 $totalPages = ceil($total / $perPage); // 返回数据 $response = ['results' => $data, 'totalPages' => $totalPages]; echo json_encode($response); ``` 其中，`$perPage` 表示每页显示的记录数，`$page` 表示当前页码，`$offset` 表示偏移量，`$total` 表示总记录数，`$totalPages` 表示总页数。在 SQL 查询中使用 `LIMIT` 和 `OFFSET` 可以限制返回的记录数和偏移量，从而实现分页效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值