jQuery实现简单分页

现在项目分页好多都是直接用插件，今天发现其实自己写页不难。主要是以前老师讲的时候没听。（对不起老何！哈哈）

今天发布一个前端超简单的分页效果,纯jQ！废话不多说，上代码。要是你们需要，直接复制过去就可以，我故意把css，js，放在一起就是为了方便copy。。注意jq版本1.7以上

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>最简单的分页</title>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script><style>
ul.pagination {display: inline-block;padding: 0;margin: 0;
}ul.pagination li {display: inline;}ul.pagination li a {color: black;float: left;padding: 8px 16px;text-decoration: none;border: 1px solid blue;border-radius:3px;
}
.active{background-color: #7FFFAA;
}
</style>
</head>
<body><form>#foreach($goods in $goodss)<li>$goods.goods_name</li>#end<h2>最简单的分页</h2><ul class="pagination"></ul><input type="hidden" id="currentPage" name="currentPage" value="23"></input><input type="hidden" id="totalPage" value="54"></input></form>
<script>
$().ready(function(){var curPage =$("#currentPage").val();var last =$("#totalPage").val();var page =Math.ceil(curPage/10);//调用绘制分页样式函数draw(page,curPage);//绑定点击页码事件$(document).on("click",".pagination li a",function(){var str =$(this).html();if(!isNaN(str)){//移除之前的active$(".pagination li a").removeClass("active");$(this).attr("class","active");$("#currentPage").val(str);}});//绑定下一页点击事件$(document).on("click","#nextPage",function(){var num =$(".active").html();var curPage =$("#currentPage").val();var last =$("#totalPage").val();var page =Math.ceil((parseInt(num))/10);if(num < page*10 && num != last){//移除之前的active$(".pagination li a").removeClass("active");$("#"+(parseInt(num)+1)+"").attr("class","active");//$(".pagination li a[text="+(parseInt(num)+1)+"]").attr("class","active");//jQ1.6支持$("#currentPage").val(parseInt(num)+1);}else if(num == page*10 && num != last){//清空之前的数据$(".pagination").html("");draw(page+1,(parseInt(num)+1));}})//绑定上一页点击事件$(document).on("click","#previousPage",function(){var num =$(".active").html();var curPage =$("#currentPage").val();var last =$("#totalPage").val();var page =Math.ceil((parseInt(num))/10);if(num <= page*10 && num != (page-1)*10+1){//移除之前的active$(".pagination li a").removeClass("active");$("#"+(parseInt(num)-1)+"").attr("class","active");//$(".pagination li a[text="+(parseInt(num)+1)+"]").attr("class","active");//jQ1.6支持$("#currentPage").val(parseInt(num)-1);}else if(num == (page-1)*10+1 && num != 1){//清空之前的数据$(".pagination").html("");draw(page-1,(parseInt(num)-1));}})//绘制页面分页样式function draw(page,curPage){//页面中的当前页var page =page;//后台传过来的页数var curPage = curPage;//后台传过来的总页数var datas =$("#totalPage").val();//每页显示多少条数据var pageSize =10;//在网页中一共要分多少页var totalPage = Math.floor((datas-1)/pageSize+1);var liStr ="<li><a id='previousPage' href='#'>«</a></li>";$("#currentPage").val(curPage);if(page <= totalPage){if(datas <= 10){for(i=1; i<=datas; i++){//为当前页增加样式var active ="";if(i==curPage){active=" class='active' ";}liStr +=" <li><a id="+i+" "+active+" href='#'>"+i+"</a></li>"}}else{var start =pageSize*(page-1)+1;var end =page*pageSize;if(page == totalPage){for(i=start; i<=datas; i++){//为当前页增加样式var active ="";if(i==curPage){active=" class='active' ";}liStr +=" <li><a id="+i+" "+active+" href='#'>"+i+"</a></li>"}}else{for(i=start; i<=end; i++){//为当前页增加样式var active ="";if(i==curPage){active=" class='active' ";}liStr +=" <li><a id="+i+" "+active+" href='#'>"+i+"</a></li>"}}}}liStr +="<li><a id='nextPage' href='#'>»</a></li>";$(".pagination").append(liStr);}
})
</script>
</body>
</html>

说实话有些注释真的不好写，要是看不懂。先拷贝过去看看效果，慢慢看一下也许你就懂了。。。

jQuery实现简单分页相关推荐

jquery前端简单分页_如何使用jQuery创建简单的分页
jquery前端简单分页 How to create easy pagination with jQuery jQuery pagination. All we know, that when we ...
基于jquery的简单分页实现
先上图: 之前在做表格插件想把分页整合进去,原本去网站找一个现成的整合进去,发现有些太简单或者很复杂,达不到自己的要求,自己想还是自己整一个,顺便了解一下其中的原理. 分页样式是基于boostarp的 ...
jQuery实现简单分页(jqPaginator插件)
文章目录前言一.jqPaginator是什么? 二.使用步骤 1.引入库 2.读入数据 3.参数文档三.完整项目实现案列 1.先上效果 2.搭建Servlet运行环境 3.建一个项目 4.后端代 ...
JQuery实现简单分页（DataTable,pagination）
DataTable分页(前端分页,后台不需要任何处理) $('#tblResult').DataTable({// columnDefs:[{ orderable:false, targets:[0] ...
jquery实现简单的分页功能
jquery实现简单的分页功能本文适合少量数据的使用,如果数据条数过多,不太适合! 页面html代码 <table>  </table> ...
php jquery 全选删除,jQuery+php简单实现全选删除的方法
jQuery+php简单实现全选删除的方法发布于 2017-08-06 10:13:21 | 66 次阅读 | 评论: 0 | 来源: 网友投递 PHP开源脚本语言PHP(外文名: Hypertex ...
mvc jquery ajax分页实例,jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解，mvcpagerajax分页...
jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解,mvcpagerajax分页简单的两个步骤即可实现分页功能 //回调里面进行业务处理 function lo ...
前端表格插件Jquery DataTable简单汉化
前端表格插件Jquery DataTable简单汉化项目需要求,需要用到Jquery DataTable插件,功能强大,可以实现前端数据分页和页面检索,数据10000条类可以考虑.但由于国外插件,页 ...
combobox 怎么实现对listview的类别查询_通过 Django Pagination 实现简单分页
作者:HelloGitHub-追梦人物文中涉及的示例代码,已同步更新到 HelloGitHub-Team 仓库当博客上发布的文章越来越多时,通常需要进行分页显示,以免所有的文章都堆积在一个页面,影 ...

jQuery实现简单分页

jQuery实现简单分页相关推荐

最新文章

热门文章