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

时间: 2024-10-10 10:04:58

ajax前端分页实现的相关文章

js 前端分页空间控件

现在web注重用户体验与交互性,ajax 提交数据的方式很早就流行了,它能够在不刷新网页的情况下局部刷新数据.前端分页多是用ajax请求数据(其他方式也有比如手动构造表单模拟提交事件等).通过js将查询参数构造好发向后台,后台处理后以特定的格式返回,多为json,比较流行处理起来也很方便.当后台数据到达后,浏览器重新渲染界面当然也包括js分页控件,如果觉得每次绘制分页控件对前端性能有影响也可以不绘制,但实现起来相对麻烦. 本人写的分页控件参考了其他网友的代码,链接忘了,控件接受四个参数或一个对象

PHP+JQUEY+AJAX实现分页

PHP+JQUEY+AJAX实现分页 HTML CSS #list{width:680px; height:530px; margin:2px auto; position:relative} #list ul li{float:left;width:220px; height:260px; margin:2px} #list ul li img{width:220px; height:220px} #list ul li p{line-height:22px} #pagecount{width

jQuery插件实例六:jQuery 前端分页

先来看看效果: 对于前端分页,关键是思路,和分页算法.本想多说两句,可又觉得没什么可说的,看代码吧: 如何使用? $("#pging").zPagination({ 'navEvent':function(){ console.log('取数据Ajax'); } }); JS代码 //分页Pagination ; (function ($, window) { var defaults = { rowCount: 400, //总数据行数 navPage: 10, //每次显示多少页导

MVC 简单的AJAX异步分页+MYSQL

留资料,以后学习用 1.后台 public ActionResult textPage() { return View(); } [HttpPost] public ActionResult textPage(FormCollection collection) { //实例化对象 BLL.pc_dialog bll_pcdialog = new BLL.pc_dialog(); Model.pc_dialog model_pcdialog = new Model.pc_dialog(); //

纯手写完美实现前端分页效果

经常听人提到前端分页技术,却总也没有完全的实现过,作为做过多年前后端的老码工,真的有必要好好研究一番,以飨读者; 在这里不只是有前端分页页面效果,更有真实数据的展示,实现了真正的分页哦! 内容导读 1.页面设计 2.jQuery之ajax与JSON数据 3.运行效果 说明: (1)需要将源码导入HBuilder中,打开HBuilder直接通过内置服务器运行页面即可实现分页效果 (2)一个分页小技术有时也是让人挠头,这里完全前端实现方式与Java的实现方式,我们提供给你完全的编码参考,希望能够帮到

Django MVC与MTV概念 Ajax、分页实现

 MVC与MTV概念 MTV与MVC(了解)        MTV模型(django):            M:模型层(models.py)            T:templates            V:视图层views        MVC模型:            M:模型层(models.py)            V:视图层(views.py)            C:控制器(Controller) urls.py        本质:django的MTV也是MVC

前端分页(输入页号)

$('#submitgo').click(function(){        if($('#fillNum').val()!=''){ var u = location.href.toString(); if(u.indexOf('page') >=0){                var url=replaceParamVal('page',$('#fillNum').val());                location.href=url;            }else{

前端分页插件pagination

摘要: 最近在开发项目中又用到了前端分页,以前也做过,为了方便以后使用所以将他封装成第三方插件,不依赖任何库.网上已经有很多插件,问什么还要自己造轮子? 自己写的扩展性高 不依赖任何库 作为一次技术沉淀 在线预览:http://baixuexiyang.github.io/pagination/ 项目地址:https://github.com/baixuexiyang/pagination 注意: 后面我还要将自己在开发中写到的插件都总结下分享给大家,如果你喜欢用可以star或者fork,或者你

PHP中使用jQuery+Ajax实现分页查询多功能操作

1.首先做主页面Ajax_pag.php 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Ajax做分页</title> <script src="bootstrap/js/jquery-1.11.2.min.js"></script> <script src="Ajax_