ajax前端分页实现

本来不打算重复造轮子的，网上也已经有了很多关于前端分页的框架，插件等等，但是还是打算写出来是因为前段时间有一个功能模块需要用到前端分页，然后找了很多框架，以及插件，发现其内容非常的复杂或者有的干脆就是不能用的，一气之下就准备自己动手写一个，下面贴出代码。。

到自己写的时候其实发现，这个还是挺简单的，逻辑代码并不多，，

ajax向后台发送请求，并将请求得到的数据（下面）来计算出页数页码等等这些东西。这个list设置为全局变量是可以保证不用传参给pagelist的话它也能用

这是接收到的后端数据

这是分页所跳转的链接，就是1234等页面页码所跳转的点击事件，里面主要是做了接收点击的页码数来找到该页码所对应的数据。

这个判断是如果没有点击，也就是页面刚打开的状态的话$(function）触发该行if里面的数据。

把页码通过计算，i=总页数，当I大于0的时候就减减，一直到把所有的页码循环完，并且把点击事件加上，就是这个触发本身自己的的这个方法，然后给了一个data-url属性的值就是本身自己的页面通过data-url来传给自己，并且给actives来传给自己。

如果走的是else的话就说明是页面所点击进来的，这样的话就把接收到的页码参数重新赋值给全局变量里面的当前页码数。

隐藏多余分页就是，前面得出的页码是所有的页码，当数据较多的时候页码会出现几十个页码，这样的话肯定是不美观的，上面用JS来计算当前所在的页面来显示隐藏掉前面三个和后面三个页码数就像这样

当点击到页码5的时候1为自动隐藏掉。

empty是清空body里面的所有数据，并且重新赋值（也就是页面数据并且下面重新赋值）

这段代码就是核心代码了，start_page和curr就是计算循环数据了。

start_page=（每页数据X当前页码）-每页数据

curr=（每页数据X页码）

例如：每页显示十条数据，当前是第一页的话那开始数据就是（10X1）-10等于0，循环从0开始也就是数组的第一个元素

当前页数是10X1=10就是循环的次数

循环的逻辑：第一页，当i=0并且i小于10的时候就i++，这样得出来的数组下标数据就是0-9，刚好十条，正是我们想要数据，至于第二页第三页，后面的大家可以自己去算。

到了这里基本上是完了，然后重点就是上面一段开始数据和当前数据的计算了，其他的都只是页面美化等等一些东西。

有不懂的地方可以给我留言，看到会回复。

这是随手写的一个小玩意，我不太善于写前端请大神轻喷，可能有人能比我写的更好，欢迎大家指点。

作者　　--PDO

转载于:https://www.cnblogs.com/pdos/p/9951409.html

ajax前端分页实现相关推荐

Jquery前端分页插件pagination同步加载和异步加载
上一篇文章介绍了Jquery前端分页插件pagination的基本使用方法和使用案例,大致原理就是一次性加载所有的数据再分页.https://www.jianshu.com/p/a1b8b1db025 ...
php ajax实现分页效果
ajaxpage.php[这里是数据展示页面的代码]: <meta charset='utf-8′> <script src=" http://ajax.googleapi ...
java如何写ajax,java,jq,ajax写分页
1.先写好html基础样式我懒得去写css样式233,能看就行 #page { width: 20px; } id name pwd age 上一页下一页 2.编写servlet 2.1 先写查询 ...
一次性加载数据，前端分页
在项目中,前端显示数据的时候,很多地方需要用到分页,通常有两种方式: 一:点击页码的时候,ajax请求后台服务器得到每一页数据,然后在前台进行显示二:在页面加载,或者其他事件中,一次性将数据加载至前 ...
用ajax进行分页查询
分页,既能提升用户体验,又减少页面体积,提升加载速度.Ajax 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术.那怎么实现用ajax进行分页查询呢? 实现图: 工具类: package ...
JavaWEB（AJAX实现分页）
4.2 使用AJAX实现分页 4.2.1 需求需要将分页数据通过ajax的方式进行分页,实现只变更部分数据的功能. 4.2.2 实现原理 1.设置Servlet的response的格式为applic ...
基于bootstrap的前端分页。带省略号和上下页。
bootstrap前端分页自带效果. 没办法,要是你看了之前的博客你该知道我为什么,要自己写... 诶,好了,不唠叨了 . 首先是百度下获得资源 http://blog.csdn.net/u0130 ...
php ajax mysql 分页查询_基于PHP_MySql_Ajax的分页技术方案
一.引言 Ajax的全称是AsynchronousJavaScriptAndXML(异步JavaScript和XML),它不是一项新技术,而是很多成熟的技术的集合. 和Applet,Flash相比,A ...
think php ajax分页,thinkPHP5框架实现基于ajax的分页功能示例
本文实例讲述了thinkPHP5框架实现基于ajax的分页功能.分享给大家供大家参考,具体如下: 最近一个页面的选项卡又牵扯到ajax分页,所以研究了一下tp5的ajax分页使用方法首先看一下tp5 ...

ajax前端分页实现

ajax前端分页实现相关推荐

最新文章

热门文章