使用JavaScript怎么实现一个分页导航效果?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。
成都创新互联公司于2013年创立,先为东安等服务建站,东安等地企业,进行企业商务咨询服务。为东安企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。第一部分是在页面显示内容的处理
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 += "
姓名 | "; li_list += "手机号码 | "; li_list += "邮箱 | "; li_list += "
---|---|---|
" + Name + " | "; li_list += "" + PhoneNO + " | "; li_list += "" + Email + " | "; li_list += "
第二部分是动态的设置页码并添加页码导航的方法
function SetPageCount(count) { if (count > 0) { //设置动态页码 var li_list = ""; li_list += ""; 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(); } }) } } }
看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注创新互联行业资讯频道,感谢您对创新互联的支持。