jquery 简单分页插件jQuerypage
生活随笔
收集整理的這篇文章主要介紹了
jquery 简单分页插件jQuerypage
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
昨天項目手機端要用到table的分頁，考慮到手機端界面小，系統(tǒng)數(shù)據(jù)不多，在沒考慮大批量數(shù)據(jù)處理的前提前就下載了這個插件，簡單。
展示數(shù)據(jù)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噸超美國！中國革命性大衛(wèi)星領先世界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最新大數(shù)據(jù)：年輕人看完沉默了","price":16.5,"img_sm":"p2679.jpg","material":"切片吐司、紫薯、鐵棍山藥、糖桂花、煉乳"},{"did":9,"name":"特斯拉什么車都要造：但就是不造它","price":32,"img_sm":"p8489.jpg","material":"三黃雞、杭椒、干紅椒、新鮮小米椒、麻椒、八角、香葉、蔥、姜、生抽"},{"did":10,"name":"新一代寶馬X4首次現(xiàn)身：內外大換血！","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噸超美國！中國革命性大衛(wèi)星領先世界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最新大數(shù)據(jù)：年輕人看完沉默了","price":16.5,"img_sm":"p2679.jpg","material":"切片吐司、紫薯、鐵棍山藥、糖桂花、煉乳"},{"did":19,"name":"特斯拉什么車都要造：但就是不造它","price":32,"img_sm":"p8489.jpg","material":"三黃雞、杭椒、干紅椒、新鮮小米椒、麻椒、八角、香葉、蔥、姜、生抽"},{"did":20,"name":"新一代寶馬X4首次現(xiàn)身：內外大換血！","price":36,"img_sm":"p0281.jpg","material":"明蝦、番茄醬、白糖、白醋、蔥、姜、淀粉"},{"did":21,"name":"二十四節(jié)氣怎樣來的？老祖宗真智慧","price":32,"img_sm":"p8489.jpg","material":"三黃雞、杭椒、干紅椒、新鮮小米椒、麻椒、八角、香葉、蔥、姜、生抽"} ]; var options={"id":"page",//顯示頁碼的元素"data":datas,//顯示數(shù)據(jù)"maxshowpageitem":3,//最多顯示的頁碼個數(shù)"pagelistcount":2,//每頁顯示數(shù)據(jù)個數(shù)"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>";//處理數(shù)據(jù) }tablehtml="<thead><tr><th>"+'序號'+"</th><th>"+'商品名稱'+"</th><th>"+'價格'+"</th><th>"+'備注'+"</th></tr></thead>"+cHtml;$("#demoContent").html(tablehtml);//將數(shù)據(jù)增加到頁面中 } };page.init(datas.length,1,options); </script>插件分享地址：
鏈接: https://pan.baidu.com/s/1dF3uJdB 密碼: xy12
轉載于:https://www.cnblogs.com/ckxlovejava/p/7586827.html
總結
以上是生活随笔為你收集整理的jquery 简单分页插件jQuerypage的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 屏幕控制实现消息发送以及轰炸
- 下一篇： WebView纯浏览模式，webView