昨天项目手机端要用到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

jquery 简单分页插件jQuerypage的更多相关文章

  1. jQuery Pagination分页插件

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. Jquery前端分页插件pagination同步加载和异步加载

    上一篇文章介绍了Jquery前端分页插件pagination的基本使用方法和使用案例,大致原理就是一次性加载所有的数据再分页.https://www.jianshu.com/p/a1b8b1db025 ...

  3. Jquery前端分页插件pagination使用

    插件描述:JqueryPagination是一个轻量级的jquery分页插件.只需几个简单的配置就可以生成分页控件.并且支持ajax获取数据,自定义请求参数,提供多种方法,事件和回调函数,功能全面的分 ...

  4. 转：精心挑选的12款优秀 jQuery Ajax 分页插件和教程

    在这篇文章中,我为大家收集了12个基于 jQuery 框架的 Ajax 分页插件,这些插件都提供了详细的使用教程和演示.Ajax 技术的出现使得 Web 项目的用户体验有了极大的提高,如今借助优秀的  ...

  5. Jquery的分页插件

    Jquery的分页插件, 用起来还不错. 来自: http://flaviusmatis.github.io/simplePagination.js/   下载地址: https://github.c ...

  6. 12款优秀 jQuery Ajax 分页插件和教程

    12款优秀 jQuery Ajax 分页插件和教程 在这篇文章中,我为大家收集了12个基于 jQuery 框架的 Ajax 分页插件,这些插件都提供了详细的使用教程和演示.Ajax 技术的出现使得 W ...

  7. jQuery Pagination分页插件--刷新

    源码地址:https://github.com/SeaLee02/FunctionModule/blob/master/UploadFiles/WebDemo/FenYE/FenYeDemo.aspx ...

  8. Jquery Pagination分页插件使用

    JqueryPagination是个简单轻量级的分页插件,使用起来很容易,只要初始化一个实例,并设置总数量.翻页回调函数.其它参数就可以实现无刷新分页功能了. 准备工作 下载jquery.min.js ...

  9. JQuery Pagination 分页插件 增加了首页尾页以及跳转功能

    JQuery分页插件 挺好用的 但是官方是没有提供首页尾页以及跳转功能 我觉得这个功能可以有,于是就改进了一下 一个js一个css从连接里面下 链接:http://pan.baidu.com/s/1n ...

  10. 精心挑选的12款优秀 jQuery Ajax 分页插件和教程

    在这篇文章中,我为大家收集了12个基于 jQuery 框架的 Ajax 分页插件,这些插件都提供了详细的使用教程和演示.Ajax 技术的出现使得 Web 项目的用户体验有了极大的提高,如今借助优秀的  ...

随机推荐

  1. Python中的super函数，你熟吗？

    摘要:经常有朋友问,学 Python 面向对象时,翻阅别人代码,会发现一个 super() 函数,那这个函数的作用到底是什么? 本文分享自华为云社区<Python中的super函数怎么学,怎么解 ...

  2. 关于thinkphp5.1(tp5.1)中sum计算结果不精确、不准确的问题

    使用sprintf函数处理,虽然原理没搞懂,但是问题解决了 复现: test表中有两列,值分别是-0.33和10,数据类型是float SELECT SUM(`val`) AS tp_sum FROM ...

  3. 不要舔 Switch 游戏卡，单性生殖，永久夏令时

    文章转载自:https://mp.weixin.qq.com/s/8EikwCvZgKt2TFsld-nKSA

  4. EFK-5: ES集群开启用户认证

    转载自:https://mp.weixin.qq.com/s?__biz=MzUyNzk0NTI4MQ==&mid=2247483826&idx=1&sn=583e9a5260 ...

  5. Solutions：安全的APM服务器访问

    转载自: https://blog.csdn.net/UbuntuTouch/article/details/105527468 APM Agents 访问APM server如果不做安全的设置,那么 ...

  6. 解决zeal离线文档下载慢问题

    zeal简介 编程过程中难免会遇到不会用的关键字和方法,对我而言,在windows下,我使用Zeal这个软件进行离线文档查询. 问题 但是,在软件中下载DocSet(文档)会出现下载慢,或者下载不了的 ...

  7. Elasticsearch：同步 MongoDB 数据到 Elasticsearch

    转载自:https://elasticstack.blog.csdn.net/article/details/114639152 MongoDB 是一个基于分布式文件存储的数据库.由 C++ 语言编写 ...

  8. 不安装运行时运行 .NET 程序 - NativeAOT

    大家好,先祝大家国庆快乐.不过大家看到这篇文章的时候估计已经过完国庆了 . 上一篇我们写了如何通过 SelfContained 模式发布程序(不安装运行时运行.NET程序)达到不需要在目标机器上安装 ...

  9. 知识图谱-生物信息学-医学顶刊论文(Bioinformatics-2022)-SGCL-DTI：用于DTI预测的监督图协同对比学习

    14.(2022.5.21)Bioinformatics-SGCL-DTI:用于DTI预测的监督图协同对比学习 论文标题: Supervised graph co-contrastive learni ...

  10. Codeforces Round #830 (Div. 2) A-D

    比赛链接 A 题解 知识点:贪心,数论. 先求出序列最大公约数 \(d\) ,如果为 \(1\) 直接输出 \(0\) . 否则,尝试用最后一个数操作, \(gcd(d,n) = 1\) 则可以,花费 ...