热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

开发笔记:jQuery+AJAX实现纯js分页功能

篇首语:本文由编程笔记#小编为大家整理,主要介绍了jQuery+AJAX实现纯js分页功能相关的知识,希望对你有一定的参考价值。使用jQuery的AJAX技术,在boot

篇首语:本文由编程笔记#小编为大家整理,主要介绍了jQuery+AJAX实现纯js分页功能相关的知识,希望对你有一定的参考价值。


使用jQuery的AJAX技术,在bootstrap的框架下搭建的纯js分页

bootstrap作为Twitter推的一款前端框架,效果个人还是觉得很不错的。这次只是拿来作为网页元素的css样式表使用,比较省力,效果也会比自己做要漂亮多了。

使用数据为单独的json文件data.json

 




[plain] view plain copy
 

[
{
"name": "bootstrap-table",
"stargazers_count": "526",
"forks_count": "122",
"description": "An extended Bootstrap table with radio, checkbox, sort, pagination, and other added features. (supports twitter bootstrap v2 and v3) "
},
...
]

  





 

技术分享

把主要代码和过程总结一下

html页面index.html如下





























ID Item Name Item Price Item Operate







  





js代码index.js如下

 

 





 

var pageTotal=0;//总页数
var rowTotal=0;//总行数
var currentPage=0;//当前页数
var startRow=0;//页开始行数
var endRow=0;//页结束行数
var pageSize=2;//每页行数

function page(){
$.ajax({
url:"data.json",
type:"POST",
dataType:"json",
timeout:1000,
error:function(){
alert("ajax error");
},
success:function(data){
rowTotal=data.length;
pageTotal=Math.ceil(rowTotal/pageSize);//上取整
currentPage=1;

  










 

//绘制数据table
if(pageTotal==1){
for(var i=0;i $("#table tbody").append(
$(""+
data[i].name+
""+
data[i].stargazers_count+
""+
data[i].forks_count+
""+
data[i].description+
"")
);
}
}else{
for(var i=0;i $("#table tbody").append(
$(""+
data[i].name+
""+
data[i].stargazers_count+
""+
data[i].forks_count+
""+
data[i].description+
"")
);
}

  










 

//绘制页面ul
for(var i=1;i $("#page_ul").append(
$("

  • "+i+"
  • ")
    );
    }
    }
    }
    });
    }
    //翻页
    function gotoPage(pageNum){
    $.ajax({
    url:"data.json",
    type:"POST",
    dataType:"json",
    timeout:1000,
    error:function(){
    alert("ajax error");
    },
    success:function(data){
    currentPage=pageNum;
    startRow=pageSize*(pageNum-1);
    endRow=startRow+pageSize;
    endRow=(rowTotal>endRow)?endRow:rowTotal;
    $("#table tbody").empty();
    for(var i=startRow;i $("#table tbody").append(
    $(""+
    data[i].name+
    ""+
    data[i].stargazers_count+
    ""+
    data[i].forks_count+
    ""+
    data[i].description+
    "")
    );
    }

    }
    });
    }


    $(function(){
    page();

    $("#page_ul li").live("click",function(){
    var pageNum=$(this).text();
    gotoPage(pageNum);
    });

    $("#page_prev li").live("click",function(){
    if(currentPage==1){

    }else{
    gotoPage(--currentPage);
    }
    });

    $("#page_next li").live("click",function(){
    if(currentPage==pageTotal){

    }else{
    gotoPage(++currentPage);
    }
    })
    });

  •   








    推荐阅读
    • Vue基础一、什么是Vue1.1概念Vue(读音vjuː,类似于view)是一套用于构建用户界面的渐进式JavaScript框架,与其它大型框架不 ... [详细]
    • 开发笔记:加密&json&StringIO模块&BytesIO模块
      篇首语:本文由编程笔记#小编为大家整理,主要介绍了加密&json&StringIO模块&BytesIO模块相关的知识,希望对你有一定的参考价值。一、加密加密 ... [详细]
    • 本文介绍了OC学习笔记中的@property和@synthesize,包括属性的定义和合成的使用方法。通过示例代码详细讲解了@property和@synthesize的作用和用法。 ... [详细]
    • 本文详细介绍了Java中vector的使用方法和相关知识,包括vector类的功能、构造方法和使用注意事项。通过使用vector类,可以方便地实现动态数组的功能,并且可以随意插入不同类型的对象,进行查找、插入和删除操作。这篇文章对于需要频繁进行查找、插入和删除操作的情况下,使用vector类是一个很好的选择。 ... [详细]
    • 本文讨论了在手机移动端如何使用HTML5和JavaScript实现视频上传并压缩视频质量,或者降低手机摄像头拍摄质量的问题。作者指出HTML5和JavaScript无法直接压缩视频,只能通过将视频传送到服务器端由后端进行压缩。对于控制相机拍摄质量,只有使用JAVA编写Android客户端才能实现压缩。此外,作者还解释了在交作业时使用zip格式压缩包导致CSS文件和图片音乐丢失的原因,并提供了解决方法。最后,作者还介绍了一个用于处理图片的类,可以实现图片剪裁处理和生成缩略图的功能。 ... [详细]
    • 在springmvc框架中,前台ajax调用方法,对图片批量下载,如何弹出提示保存位置选框?Controller方法 ... [详细]
    • 本文介绍了前端人员必须知道的三个问题,即前端都做哪些事、前端都需要哪些技术,以及前端的发展阶段。初级阶段包括HTML、CSS、JavaScript和jQuery的基础知识。进阶阶段涵盖了面向对象编程、响应式设计、Ajax、HTML5等新兴技术。高级阶段包括架构基础、模块化开发、预编译和前沿规范等内容。此外,还介绍了一些后端服务,如Node.js。 ... [详细]
    • 我将SpringMVC升级到Spring3.2.5.我的一些剩余调用即使存在,也会返回无法识别的字段异常.这是错误.Resolvingexceptionfrom ... [详细]
    • 关于extjs开发实战pdf的信息
      本文目录一览:1、extjs实用开发指南2、本 ... [详细]
    • 1、概述首先和大家一起回顾一下Java消息服务,在我之前的博客《Java消息队列-JMS概述》中,我为大家分析了:然后在另一篇博客《Java消息队列-ActiveMq实战》中 ... [详细]
    • 个体都会学习的JavaScript之DOM树
      篇首语:本文由编程笔记#小编为大家整理,主要介绍了JavaScript之DOM树相关的知识,希望对你有一定的参考价值。目录 ... [详细]
    • Nginx使用(server参数配置)
      本文介绍了Nginx的使用,重点讲解了server参数配置,包括端口号、主机名、根目录等内容。同时,还介绍了Nginx的反向代理功能。 ... [详细]
    • 从零基础到精通的前台学习路线
      随着互联网的发展,前台开发工程师成为市场上非常抢手的人才。本文介绍了从零基础到精通前台开发的学习路线,包括学习HTML、CSS、JavaScript等基础知识和常用工具的使用。通过循序渐进的学习,可以掌握前台开发的基本技能,并有能力找到一份月薪8000以上的工作。 ... [详细]
    • 本文介绍了Java后台Jsonp处理方法及其应用场景。首先解释了Jsonp是一个非官方的协议,它允许在服务器端通过Script tags返回至客户端,并通过javascript callback的形式实现跨域访问。然后介绍了JSON系统开发方法,它是一种面向数据结构的分析和设计方法,以活动为中心,将一连串的活动顺序组合成一个完整的工作进程。接着给出了一个客户端示例代码,使用了jQuery的ajax方法请求一个Jsonp数据。 ... [详细]
    • asp.net(vb脚本)如何获取xml的节点值?xmlversion1.0encodingutf-8?rootimageimagemenusmenuurl#frame_paren ... [详细]
    author-avatar
    唯依爱时尚服饰
    这个家伙很懒,什么也没留下!
    PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
    Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有