热门标签 | 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);
    }
    })
    });

  •   








    推荐阅读
    • 在JavaWeb开发中,文件上传是一个常见的需求。无论是通过表单还是其他方式上传文件,都必须使用POST请求。前端部分通常采用HTML表单来实现文件选择和提交功能。后端则利用Apache Commons FileUpload库来处理上传的文件,该库提供了强大的文件解析和存储能力,能够高效地处理各种文件类型。此外,为了提高系统的安全性和稳定性,还需要对上传文件的大小、格式等进行严格的校验和限制。 ... [详细]
    • 技术分享:使用 Flask、AngularJS 和 Jinja2 构建高效前后端交互系统
      技术分享:使用 Flask、AngularJS 和 Jinja2 构建高效前后端交互系统 ... [详细]
    • ### 优化后的摘要本学习指南旨在帮助读者全面掌握 Bootstrap 前端框架的核心知识点与实战技巧。内容涵盖基础入门、核心功能和高级应用。第一章通过一个简单的“Hello World”示例,介绍 Bootstrap 的基本用法和快速上手方法。第二章深入探讨 Bootstrap 与 JSP 集成的细节,揭示两者结合的优势和应用场景。第三章则进一步讲解 Bootstrap 的高级特性,如响应式设计和组件定制,为开发者提供全方位的技术支持。 ... [详细]
    • Python 伦理黑客技术:深入探讨后门攻击(第三部分)
      在《Python 伦理黑客技术:深入探讨后门攻击(第三部分)》中,作者详细分析了后门攻击中的Socket问题。由于TCP协议基于流,难以确定消息批次的结束点,这给后门攻击的实现带来了挑战。为了解决这一问题,文章提出了一系列有效的技术方案,包括使用特定的分隔符和长度前缀,以确保数据包的准确传输和解析。这些方法不仅提高了攻击的隐蔽性和可靠性,还为安全研究人员提供了宝贵的参考。 ... [详细]
    • Web开发框架概览:Java与JavaScript技术及框架综述
      Web开发涉及服务器端和客户端的协同工作。在服务器端,Java是一种优秀的编程语言,适用于构建各种功能模块,如通过Servlet实现特定服务。客户端则主要依赖HTML进行内容展示,同时借助JavaScript增强交互性和动态效果。此外,现代Web开发还广泛使用各种框架和库,如Spring Boot、React和Vue.js,以提高开发效率和应用性能。 ... [详细]
    • 优化升级版数据采集与赋值方法,专为前文内容设计
      在前一篇文章中,方法的局限性主要体现在需要传递参数,并且参数数量受限。当页面布局与所需参数不匹配时,该方法将无法正常工作。为此,我们推出了优化升级版1.1,旨在解决这些问题并提高灵活性和适用性。 ... [详细]
    • 如何在jqGrid中调整shrinkToFit以避免水平滚动条,并解决页面存在垂直滚动条时表格超出父容器的问题
      1、下图右侧为表格超出panel部分页面html代码:jggrid-class ... [详细]
    • 您的数据库配置是否安全?DBSAT工具助您一臂之力!
      本文探讨了Oracle提供的免费工具DBSAT,该工具能够有效协助用户检测和优化数据库配置的安全性。通过全面的分析和报告,DBSAT帮助用户识别潜在的安全漏洞,并提供针对性的改进建议,确保数据库系统的稳定性和安全性。 ... [详细]
    • ButterKnife 是一款用于 Android 开发的注解库,主要用于简化视图和事件绑定。本文详细介绍了 ButterKnife 的基础用法,包括如何通过注解实现字段和方法的绑定,以及在实际项目中的应用示例。此外,文章还提到了截至 2016 年 4 月 29 日,ButterKnife 的最新版本为 8.0.1,为开发者提供了最新的功能和性能优化。 ... [详细]
    • 本文详细介绍了 jQuery 的入门知识与实战应用,首先讲解了如何引入 jQuery 库及入口函数的使用方法,为初学者提供了清晰的操作指南。此外,还深入探讨了 jQuery 在实际项目中的多种应用场景,包括 DOM 操作、事件处理和 AJAX 请求等,帮助读者全面掌握 jQuery 的核心功能与技巧。 ... [详细]
    • Java中高级工程师面试必备:JVM核心知识点全面解析
      对于软件开发人员而言,随着技术框架的不断演进和成熟,许多高级功能已经被高度封装,使得初级开发者只需掌握基本用法即可迅速完成项目。然而,对于中高级工程师而言,深入了解Java虚拟机(JVM)的核心知识点是必不可少的。这不仅有助于优化性能和解决复杂问题,还能在面试中脱颖而出。本文将全面解析JVM的关键概念和技术细节,帮助读者全面提升技术水平。 ... [详细]
    • Android ListView 自定义 CheckBox 实现列表项多选功能详解
      本文详细介绍了在Android开发中如何在ListView的每一行添加CheckBox,以实现列表项的多选功能。用户不仅可以通过点击复选框来选择项目,还可以通过点击列表的任意一行来完成选中操作,提升了用户体验和操作便捷性。同时,文章还探讨了相关的事件处理机制和布局优化技巧,帮助开发者更好地实现这一功能。 ... [详细]
    • 深入解析Spring框架中的双亲委派机制突破方法
      在探讨Spring框架中突破双亲委派机制的方法之前,首先需要了解类加载器的基本概念。类加载器负责将类的全限定名转换为对应的二进制字节流。每个类在被特定的类加载器加载后,其唯一性得到保证。然而,这种机制在某些场景下可能会限制灵活性,因此Spring框架提供了一些策略来突破这一限制,以实现更加动态和灵活的类加载。这些策略不仅能够提升系统的可扩展性,还能在复杂的运行环境中确保类的正确加载和管理。 ... [详细]
    • REST API 时代落幕,GraphQL 持续引领未来
      尽管REST API已广泛使用多年,但在深入了解GraphQL及其解决的核心问题后,我深感其将引领未来的API设计趋势。GraphQL不仅提高了数据查询的效率,还增强了灵活性和性能,有望成为API开发的新标准。 ... [详细]
    • 2017-09-07前端日报精选JavaScriptEventLoop机制详解与Vue.js中实践应用Redux基础与实践如何用js获取虚拟键盘高度?( ... [详细]
    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社区 版权所有