前端jq 实现简易分页功能

分页功能

HTML代码
less代码
css代码
JQ代码
示例

主要功能上一页下一页以及输入指定页码进行跳转

主要逻辑:
当页码数小于1时 页码数为1
当页码数大于总条数时 页码数为当前总条数

仅供参考 自我记录.

HTML代码

<!-- 分页 -->
<div class="page_box"><button class="id_top"></button> <!-- 上一页 --><input type="text" id="page_text" value="1" /> <!-- 可输入页码 --><button class="id_next"></button> <!-- 下一页 --><span>/ </span><span id="id_total">10</span> <!-- 显示总页数 -->
</div>

less代码

  *{margin: 0;padding: 0;text-decoration: none;list-style: none;box-sizing: border-box;}/*分页*/
.page_box {width: 150px;height: 24px;line-height: 24px;background: #273559;margin: 200px auto;.id_top {float: left;width: 24px;height: 24px;border: 1px solid #445789;; //自定义边框outline: none; //消除默认点击蓝色边框效果background: url(data:image/png;base64,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) no-repeat center;background-size: 26px;border-radius: 2px;&:hover {cursor: pointer;/*光标呈现为指示链接的指针（一只手）*/}}input {float: left;width: 28px;height: 24px;border: 1px solid #445789;border-radius: 2px;margin-left: 18px;margin-right: 9px;text-align: center;font-size: 16px;outline: none;color: #fff;background: #273559;vertical-align:middle;}span{color: #fff;line-height: 24px;}.id_next {float: right;width: 24px;height: 24px;border: 1px solid #445789; //自定义边框outline: none; //消除默认点击蓝色边框效果background: url(data:image/png;base64,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) no-repeat center;background-size: 26px;border-radius: 2px;&:hover {cursor: pointer;/*光标呈现为指示链接的指针（一只手）*/}}
}

css代码

 /*初始化*/
* {margin: 0;padding: 0;text-decoration: none;list-style: none;box-sizing: border-box;
}
/*分页*/
.page_box {width: 150px;height: 24px;line-height: 24px;background: #273559;margin: 200px auto;
}
.page_box .id_top {float: left;width: 24px;height: 24px;border: 1px solid #445789;outline: none;background: url(data:image/png;base64,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) no-repeat center;background-size: 26px;border-radius: 2px;
}
.page_box .id_top:hover {cursor: pointer;/*光标呈现为指示链接的指针（一只手）*/
}
.page_box input {float: left;width: 28px;height: 24px;border: 1px solid #445789;border-radius: 2px;margin-left: 18px;margin-right: 9px;text-align: center;font-size: 16px;outline: none;color: #fff;background: #273559;vertical-align: middle;
}
.page_box span {color: #fff;line-height: 24px;
}
.page_box .id_next {float: right;width: 24px;height: 24px;border: 1px solid #445789;outline: none;background: url(data:image/png;base64,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) no-repeat center;background-size: 26px;border-radius: 2px;
}
.page_box .id_next:hover {cursor: pointer;/*光标呈现为指示链接的指针（一只手）*/
}

JQ代码

// 使用 Google 的 CDN
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script>$(function () {var that_input_value = '1' //默认input val$("#page_text").change(function () {let input_val = Number($(this).val())let total = Number($('#id_total').text())console.log(input_val, total);if (input_val < total) {$(this).val(input_val)} else {input_val = total$(this).val(input_val)}if (input_val < 1) {$(this).val(1)}that_input_value = $(this).val()console.log(that_input_value,'每次change input的值');});$('.page_box>.id_top').click(function () {let i = Number($(this).next().val())if (i > 1) {i--;$(this).next().val(i)} else {i = 1;$(this).next().val(i)}console.log(i, 'top');})$('.page_box>.id_next').click(function () {let i = Number($(this).prev().val())let total = Number($('#id_total').text())if (i < total) {i++;$(this).prev().val(i)} else {i = total$(this).prev().val(i)}console.log(i, 'id_next')});});
</script>

示例

前端jq 实现简易分页功能相关推荐

前端分页功能的实现以及原理
分页场景常见于电商网站,比如说淘宝天猫的评论区,分页功能一般是后台实现,前端请求就完事了.现闲得无聊,就写出来玩玩,只实现功能,并未封装. 以前写过一篇下拉刷新.加载数据功能博客,也附上链接,可点击查 ...
练手：原生js（部分jquery）写一个前端页面分页功能
准备一个获取数据的接口 –注–:页面可能有点简陋,我们这里主要写如何操作dom来实现分页的功能. 这里我是用node搭建了一个简易的服务器,用来给前端发送数据: const express = req ...
前端vue实现分页功能
前端Vue实现分页功能我们都知道在spring boot项目中安装pagehelper可以实现分页功能,但是在vue中也能在前端实现分页. 1. 首先,在data中定义以下变量: data() {r ...
django自带的分页功能
django自带的分页功能 django中自带的分页功能有缺陷,但是也是一种思路,所以在下做一个整理,方便以后使用,还有服务各位小伙伴. django视图部分的代码.(注释才是重点) from dja ...
Java Web -【分页功能】详解
分页简介分页功能在网页中是非常常见的一个功能,其作用也就是将数据分割成多个页面来进行显示. 使用场景: 当取到的数据量达到一定的时候,就需要使用分页来进行数据分割. 当我们不使用分页功能的时候,会面 ...
[Beego] [bootstrap-paginator]实现分页功能
说明在开发中分页功能几乎是必不可少的一项功能,使用beego框架开发时,就遇到了分页功能的需求.可能是之前版本并不支持,我发现有很多自己实现的分页功能的封装,在阅读了官方源码时,我发现了分页功能的封 ...
php tp框架分页源代码,ThinkPHP3.2框架自带分页功能实现方法示例
本文实例讲述了ThinkPHP3.2框架自带分页功能实现方法.分享给大家供大家参考,具体如下: 1.前端-分页代码: {$page} 2.创建分页样式:如page.css 并将以下代码复制到该文件中 ...
jPList – 实现灵活排序和分页功能的 jQuery 插件
jPList 是一个灵活的 jQuery 插件,可以用于任何 HTML 结构的排序,分页和筛选.它支持的数据源包括:PHP + MySQL,ASP.NET + SQL Server,PHP + SQL ...
django高级应用（分页功能）
django高级应用(分页功能) 1.原生分页应用前端html代码 1 <!DOCTYPE html> 2 <html lang="en"> 3 < ...

前端jq 实现简易分页功能

分页功能

HTML代码

less代码

css代码

JQ代码

示例

前端jq 实现简易分页功能相关推荐

最新文章

热门文章

前端jq 实现简易 分页功能

分页功能

HTML代码

less代码

css代码

JQ代码

示例

前端jq 实现简易 分页功能相关推荐

最新文章

热门文章

前端jq 实现简易分页功能

前端jq 实现简易分页功能相关推荐