jquery 简单分页插件jQuerypage
昨天项目手机端要用到table的分页,考虑到手机端界面小,系统数据不多,在没考虑大批量数据处理的前提前就下载了这个插件,简单。
展示数据datas为json格式。
<!DOCTYPE html> <html lang="ch"> <head><meta charset="UTF-8"><title>Title</title><link href="page.css" type="text/css" rel="stylesheet"/><script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script><script type="text/javascript" src="page.js"></script> </head> <body><table id="demoContent" border="1"></table><ul class="page" id="page"></ul> </body> </html> <script type="text/javascript"> var datas=[{"did":1,"name":"又降价!Intel狂推首款可超频i3 中国特供","price":36,"img_sm":"p0281.jpg","material":"明虾、番茄酱、白糖、白醋、葱、姜、淀粉"},{"did":2,"name":"父子俩野营时喂了一只野猫 打开帐篷震惊","price":16.5,"img_sm":"p2679.jpg","material":"切片吐司、紫薯、铁棍山药、糖桂花、炼乳"},{"did":3,"name":"iPhone 7为啥卖不动?终于知道了!","price":32,"img_sm":"p8489.jpg","material":"三黄鸡、杭椒、干红椒、新鲜小米椒、麻椒、八角、香叶、葱、姜、生抽"},{"did":4,"name":"7吨超美国!中国革命性大卫星领先世界1代","price":36,"img_sm":"p0281.jpg","material":"明虾、番茄酱、白糖、白醋、葱、姜、淀粉"},{"did":5,"name":"昨晚全世界都被杭州美哭了(图)","price":16.5,"img_sm":"p2679.jpg","material":"切片吐司、紫薯、铁棍山药、糖桂花、炼乳"},{"did":6,"name":"A系处理器成历史!苹果从零自研GPU","price":32,"img_sm":"p8489.jpg","material":"三黄鸡、杭椒、干红椒、新鲜小米椒、麻椒、八角、香叶、葱、姜、生抽"},{"did":7,"name":"黑科技让NVMe SSD性能爆炸!再不浪费容量","price":36,"img_sm":"p0281.jpg","material":"明虾、番茄酱、白糖、白醋、葱、姜、淀粉"},{"did":8,"name":"都是泪!QQ最新大数据:年轻人看完沉默了","price":16.5,"img_sm":"p2679.jpg","material":"切片吐司、紫薯、铁棍山药、糖桂花、炼乳"},{"did":9,"name":"特斯拉什么车都要造:但就是不造它","price":32,"img_sm":"p8489.jpg","material":"三黄鸡、杭椒、干红椒、新鲜小米椒、麻椒、八角、香叶、葱、姜、生抽"},{"did":10,"name":"新一代宝马X4首次现身:内外大换血!","price":36,"img_sm":"p0281.jpg","material":"明虾、番茄酱、白糖、白醋、葱、姜、淀粉"},{"did":11,"name":"又降价!Intel狂推首款可超频i3 中国特供","price":36,"img_sm":"p0281.jpg","material":"明虾、番茄酱、白糖、白醋、葱、姜、淀粉"},{"did":12,"name":"父子俩野营时喂了一只野猫 打开帐篷震惊","price":16.5,"img_sm":"p2679.jpg","material":"切片吐司、紫薯、铁棍山药、糖桂花、炼乳"},{"did":13,"name":"iPhone 7为啥卖不动?终于知道了!","price":32,"img_sm":"p8489.jpg","material":"三黄鸡、杭椒、干红椒、新鲜小米椒、麻椒、八角、香叶、葱、姜、生抽"},{"did":14,"name":"7吨超美国!中国革命性大卫星领先世界1代","price":36,"img_sm":"p0281.jpg","material":"明虾、番茄酱、白糖、白醋、葱、姜、淀粉"},{"did":15,"name":"昨晚全世界都被杭州美哭了(图)","price":16.5,"img_sm":"p2679.jpg","material":"切片吐司、紫薯、铁棍山药、糖桂花、炼乳"},{"did":16,"name":"A系处理器成历史!苹果从零自研GPU","price":32,"img_sm":"p8489.jpg","material":"三黄鸡、杭椒、干红椒、新鲜小米椒、麻椒、八角、香叶、葱、姜、生抽"},{"did":17,"name":"黑科技让NVMe SSD性能爆炸!再不浪费容量","price":36,"img_sm":"p0281.jpg","material":"明虾、番茄酱、白糖、白醋、葱、姜、淀粉"},{"did":18,"name":"都是泪!QQ最新大数据:年轻人看完沉默了","price":16.5,"img_sm":"p2679.jpg","material":"切片吐司、紫薯、铁棍山药、糖桂花、炼乳"},{"did":19,"name":"特斯拉什么车都要造:但就是不造它","price":32,"img_sm":"p8489.jpg","material":"三黄鸡、杭椒、干红椒、新鲜小米椒、麻椒、八角、香叶、葱、姜、生抽"},{"did":20,"name":"新一代宝马X4首次现身:内外大换血!","price":36,"img_sm":"p0281.jpg","material":"明虾、番茄酱、白糖、白醋、葱、姜、淀粉"},{"did":21,"name":"二十四节气怎样来的?老祖宗真智慧","price":32,"img_sm":"p8489.jpg","material":"三黄鸡、杭椒、干红椒、新鲜小米椒、麻椒、八角、香叶、葱、姜、生抽"} ]; var options={"id":"page",//显示页码的元素"data":datas,//显示数据"maxshowpageitem":3,//最多显示的页码个数"pagelistcount":2,//每页显示数据个数"callBack":function(result){var cHtml="";for(var i=0;i<result.length;i++){cHtml+="<tbody><tr><td>"+ result[i].did +"</td><td>"+result[i].name+"</td><td>"+result[i].price+"</td><td>"+result[i].material+"</td></tr></tbody>";//处理数据 }tablehtml="<thead><tr><th>"+'序号'+"</th><th>"+'商品名称'+"</th><th>"+'价格'+"</th><th>"+'备注'+"</th></tr></thead>"+cHtml;$("#demoContent").html(tablehtml);//将数据增加到页面中 } };page.init(datas.length,1,options); </script>
插件分享地址:
链接: https://pan.baidu.com/s/1dF3uJdB 密码: xy12
转载于:https://www.cnblogs.com/ckxlovejava/p/7586827.html
jquery 简单分页插件jQuerypage相关推荐
- Jquery前端分页插件pagination同步加载和异步加载
上一篇文章介绍了Jquery前端分页插件pagination的基本使用方法和使用案例,大致原理就是一次性加载所有的数据再分页.https://www.jianshu.com/p/a1b8b1db025 ...
- java ajax jquery分页插件_分享精心挑选的12款优秀jQuery Ajax分页插件和教程
摘要:这篇jQuery栏目下的"分享精心挑选的12款优秀jQuery Ajax分页插件和教程",介绍的技术点是"jquery_ajax分页插件.jquery_ajax.a ...
- Jquery的分页插件
Jquery的分页插件, 用起来还不错. 来自: http://flaviusmatis.github.io/simplePagination.js/ 下载地址: https://github.com ...
- Jquery自定义分页插件
效果: 核心代码: 自定义Jquery插件grid.js //Jquery自定义分页插件 (function($) {$.fn.grid= function(options) {var objGrid ...
- jquery.pagination 分页插件使用代码
jquery.pagination 分页插件 下载链接 http://www.jq22.com/yanshi5697 js代码内容 var listLength = '' var pageNum = ...
- 基于jquery的分页插件
一.效果图. 二.html示例. <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml">&l ...
- 分页插件 ajax请求,jquery ajax分页插件的简单实现
说到基于jQuery的ajax分页插件,那我们就先看看主要的代码结构: 1.首先定义一个pager对象: var sjPager = window.sjPager = { opts: { //默认属性 ...
- jQuery Pagination分页插件
demo实例页面 基本demo页面 Ajax demo页面 参数可编辑demo页面 插件简介 此jQuery插件为Ajax分页插件,一次性加载,故分页切换时无刷新与延迟,如果数据量较大不建议用此方法, ...
- jQuery Pagination分页插件--无刷新
源码:https://github.com/SeaLee02/FunctionModule/blob/master/UploadFiles/WebDemo/FenYE/FenYeAjax.aspx 代 ...
最新文章
- 嵌入式EasyHMI V0.1版终于推出,C#真是软件开发的利器
- LR 场景选项配置--笔记
- 北大邮箱收件服务器,北京大学微电子学研究院邮件系统
- java 解析并生成 XML
- final类是否可以被代理_浅谈Java【代理设计模式】——看这篇文章就懂了
- 如何在优雅地Spring 中实现消息的发送和消费 1
- 微课|玩转Python轻松过二级(2.1.3节):字符串与字节串简介
- AMBERT!超越BERT!多粒度token预训练语言模型
- poj 3667 Hotel 线段树 内存分配问题
- 学习vb6.0视频教程网址
- 高斯列主元消去法matlab,高斯列主元消去法解线性方程组的实现
- Java 同环比计算相关逻辑
- png转ico 或如何制作ico文件
- 如何解决“数据错误,循环冗余检查”
- Eigen优化及并行性能测试
- Truffle框架的初使用
- Android发送图片到指定邮箱(仅客户端简单实现,不需服务端配合)
- 5.1 多元线性回归分析
- 传销分子为什么喜欢国学? PS:尽信书不如无书!
- DasBlog: 构建一个分布式.NET 协作系统