铁雪资源网 Design By www.gsvan.com
前言
最近的项目需要添加一个分页导航的功能，没有用网上封装好的文件。通过JS自己简单实现了效果。下面和大家分享一下。
内容
下图为首次加载后的效果，默认显示5页，
当点击下一页时将选中页面的页码置于中间
下面让我们来看看实现的代码
第一部分是在页面显示内容的处理
function SetListPage() {
$.ajax({
type: "GET",
url: "ajax/PhoneList.ashx",
datatype: 'json',
success: function (data, textStatus) {
var li_list = "";
if (data != "") {
var cc = jQuery.parseJSON(data); //转换Json对象
var pagesize = 6; //设置每页显示数
var pagecount = Math.ceil(cc.length / pagesize); //获取页数
SetPageCount(pagecount); //设置跳转页签
for (var j = 0, l = pagecount; j < l; j++) { //设置页面内容
if (j == 0) {
li_list += "<table class='phonetable' >";
}
else {
li_list += "<table class='phonetable hide'>";
}
li_list += "<tr>";
li_list += "<th>姓名</th>";
li_list += "<th>手机号码</th>";
li_list += "<th>邮箱</th>";
li_list += "</tr> ";
var index = j * pagesize;
var rowcount = j * pagesize + pagesize;
if (rowcount > cc.length) {
rowcount = cc.length;
}
for (var i = index; i < rowcount; i++) {
var Name = cc[i]['Name'];
var PhoneNO = cc[i]['PhoneNO'];
var Email = cc[i]['Email'];
li_list += "<tr>";
li_list += "<td>" + Name + "</td>";
li_list += "<td>" + PhoneNO + "</td>";
li_list += "<td>" + Email + "</td>";
li_list += "</tr> ";
}
li_list += "</table>";
}
}
}
});
}
第二部分是动态的设置页码并添加页码导航的方法
function SetPageCount(count) {
if (count > 0) { //设置动态页码
var li_list = "";
li_list += "<ul>";
li_list += "<li id='01preage'><a class='prev'><span></span>上一页</a></li>";
li_list += "<li><ul>";
li_list += "<li class='01pageIndex'><a class='active'>1</a></li>";
for (var i = 2; i <= count; i++) {
if (i <= 5) {
li_list += "<li class='01pageIndex'><a>" + i + "</a></li>";
} else {
li_list += "<li class='01pageIndex'><a style='display: none;'>" + i + "</a></li>";
}
}
li_list += "</ul></li>";
li_list += "<li id='01nextage'><a>下一页<span></span></a></li>";
li_list += "</ul>";
if (li_list != null && li_list.length > 0) {
$("#PhonePageCount").html(li_list);
$('.01pageIndex a').click(function () { //添加添加分页导航的事件
var pagecounts = $('.01pageIndex a').length;
$(this).addClass('active');
$(this).parent().siblings().find('a').removeClass('active');
var index = $(this).parent().index() || 0;
if (1 < index && index < pagecounts - 2) {
$('.01pageIndex a').hide()
$('.01pageIndex a').eq(index - 2).show();
$('.01pageIndex a').eq(index - 1).show();
$('.01pageIndex a').eq(index).show();
$('.01pageIndex a').eq(index + 1).show();
$('.01pageIndex a').eq(index + 2).show();
}
$('#phonelist>table').siblings().hide();
$('#phonelist>table').eq(index).show();
})
$('#01preage').click(function () {
var currentPageIndex = $('.01pageIndex').find("a[class$='active']").parent().index();
var pagecounts = $('.01pageIndex a').length;
if (currentPageIndex > 0) {
var thisobj = $('.01pageIndex a').eq(currentPageIndex - 1);
thisobj.addClass('active');
thisobj.parent().siblings().find('a').removeClass('active');
if (0 < currentPageIndex && currentPageIndex < pagecounts - 3) {
$('.01pageIndex a').hide()
$('.01pageIndex a').eq(currentPageIndex - 3).show();
$('.01pageIndex a').eq(currentPageIndex - 2).show();
$('.01pageIndex a').eq(currentPageIndex - 1).show();
$('.01pageIndex a').eq(currentPageIndex).show();
$('.01pageIndex a').eq(currentPageIndex + 1).show();
}
$('#phonelist>table').siblings().hide();
$('#phonelist>table').eq(currentPageIndex - 1).show();
}
})
$('#01nextage').click(function () {
var currentPageIndex = $('.01pageIndex').find("a[class$='active']").parent().index();
var pagecount = $('.01pageIndex a').length - 1;
var pagecounts = $('.01pageIndex a').length;
if (pagecount > currentPageIndex) {
var thisobj = $('.01pageIndex').eq(currentPageIndex + 1);
thisobj.find('a').addClass('active');
thisobj.siblings().find('a').removeClass('active');
if (0 < currentPageIndex && currentPageIndex < pagecounts - 3) {
$('.01pageIndex a').hide()
$('.01pageIndex a').eq(currentPageIndex - 1).show();
$('.01pageIndex a').eq(currentPageIndex).show();
$('.01pageIndex a').eq(currentPageIndex + 1).show();
$('.01pageIndex a').eq(currentPageIndex + 2).show();
$('.01pageIndex a').eq(currentPageIndex + 3).show();
}
$('#phonelist').siblings().hide();
$('#phonelist>table').eq(currentPageIndex + 1).show();
}
})
}
}
}
小结
一个小小的功能，在实现的过程中并不容易不断的调试和优化才让这样的需求得到了合理的实现。但敲代码中也让我更多的感受到了页面导航中所需要考虑到的多元素设计。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
标签：
js分页导航,js导航,js分页
铁雪资源网 Design By www.gsvan.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
铁雪资源网 Design By www.gsvan.com
暂无JS实现分页导航效果的评论...
苹果官宣WWDC 2024！预计会有大批AI功能 - 2024/12/28
3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。
苹果官方表示：
在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。
探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。
Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。
3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。
苹果官方表示：
在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。
探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。
Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。
RTX 5090要首发 性能要翻倍！三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。
据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。