jquery ajax分页 js对象

简介:
Java代码   收藏代码
  1. <div class="sub_menus module-manager">  
  2.     <div class="module-list">  
  3.         <table class="list" id="tab_mod">  
  4.             <tr class="t_title">  
  5.                 <th class="col-1">序号</th>  
  6.                 <th class="col-2">模块名</th>  
  7.                 <th class="col-3">价格</th>  
  8.                 <th class="col-4">购买时间</th>  
  9.             </tr>                                                                                              
  10.         </table>  
  11.        </div>  
  12.     <div id="pager1" class="pager"></div>     
  13. </div>          

jQuery.page.js分页类 js对象解决同一个方法在页面引入多次报错问题(调用:对象.方法)

Java代码   收藏代码
  1. /** 
  2.  * table分页类 
  3.  * author phoenix 
  4.  * date 2013-12-17 
  5.  * 示例: 
  6.  var page = new Page({ 
  7.     url:'busimodules.php',  //获取分页的数据 
  8.     issort: true,           //是否显示排序序号 
  9.     pageSize:4,             //每页显示的条数 
  10.     name:'page',            //该值必须和实例化对象一样,如果创建多个实例的话实例名称不能相同 
  11.     fileds:['mname', 'price', 'buytime'], //要显示的字段,必须和url参数:busimodules.php的返回值一致 
  12.     tabcontainer: 'tab_mod',//表格id 
  13.     navcontainer: 'pager1'  //翻页导航显示的id 
  14. }); 
  15.  var page3 = new Page({ 
  16.     url:'busimodules.php', 
  17.     name:'page3', 
  18.     pageNavFun:'getPageBar2', 
  19.     pageSize:12, 
  20.     callback:function (jsondata, navstr) {} 
  21. }); 
  22.  * busimodules.php返回json数据格式: 
  23.  {"total":6,"pageSize":3,"curPage":1,"totalPage":2,"data":[{"mname":"\u8d2d\u7269\u8f66","price":"10.00","buytime":"2013-12-16 13:40:23"},{"mname":"\u6536\u85cf","price":"10.00","buytime":"2013-12-16 13:40:16"},{"mname":"\u8ba2\u5355","price":"10.00","buytime":"2013-12-16 13:40:10"}]} 
  24.  
  25.  如果要将返回结果自己处理,可以在参数name的后面加上参数callback:function (jsondata, navstr) {处理逻辑} 后面的tabcontainer等参数就都没有用了 
  26.  * 
  27.  */  
  28.   
  29. var Page = function (options) {  
  30.     var defaults = {  
  31.         navNum:10,  
  32.         navOffset:1,  
  33.         pageSize:3,  
  34.         data:{},  
  35.         pageNavFun:'getPageBar',  
  36.         issort:false  
  37.     };  
  38.   
  39.     this.options = $.extend({}, defaults, options);  
  40.   
  41.     if(!this.options.url) {return false;}  
  42.     if(!this.options.name) {return false;}  
  43.     if(!this.options.callback) {  
  44.         if(!this.options.tabcontainer) {return false;}  
  45.         if(!this.options.navcontainer) {return false;}  
  46.         if(!this.options.fileds || this.options.fileds.length < 1) {return false;}  
  47.     }  
  48.     this.init();  
  49. }  
  50.   
  51. Page.prototype.init = function () {  
  52.     this.getPageData(1);  
  53. }  
  54.   
  55. /** 
  56.  * 获取对应页数据 
  57.  * p表示当前页数 
  58.  * 返回当前页的数据,和导航数据 
  59.  */  
  60. Page.prototype.getPageData = function (p) {  
  61.     $this = this;  
  62.     if (!p) p = 1;  
  63.     ajaxSendData = 'pagesize=' + $this.options.pageSize + '&p=' + p;  
  64.     $.each($this.options.data, function (name, val) {  
  65.         ajaxSendData += "&" + name + "=" + val;  
  66.     });  
  67.   
  68.     $.ajax({  
  69.         type:'POST',  
  70.         url:$this.options.url + "?t=" + Math.random(),  
  71.         data:ajaxSendData,  
  72.         async:false,  
  73.         dataType:'JSON',  
  74.         success:function (obj) {  
  75.             var navstr = eval($this.options.pageNavFun + "(obj, $this.options)");  
  76.             var data = obj.data;  
  77.   
  78.             if ($this.options.callback) {  
  79.                 $this.options.callback(data, navstr);  
  80.             } else {  
  81.                 var html = '';  
  82.                 var shtml = '';  
  83.                 for (var i = 0; i < data.length; i++) {  
  84.   
  85.                     if ($this.options.issort) {  
  86.                         shtml = '<td class="col-1">' + ($this.options.pageSize * (p - 1)-0 + (i + 1)) + '</td>';  
  87.                     }  
  88.   
  89.                     html += '<tr>' + shtml;  
  90.                     var k = 1;  
  91.                     if (shtml != '') {  
  92.                         k = 2;  
  93.                     }  
  94.                     for (var j = 0; j < $this.options.fileds.length; j++) {  
  95.                         html += '<td class="col-' + k + '">' + data[i][$this.options.fileds[j]];  
  96.                         k++;  
  97.                     }  
  98.                     html += '</tr>';  
  99.                 }  
  100.   
  101.                 if (!$('#' + $this.options.tabcontainer).find('tr:eq(1)')[0]) {  
  102.                     $('#' + $this.options.tabcontainer).append(html);  
  103.                 }  
  104.                 else {  
  105.                     $('#' + $this.options.tabcontainer).find('tr:gt(0)').remove();  
  106.                     $('#' + $this.options.tabcontainer).append(html);  
  107.                 }  
  108.                 $('#' + $this.options.navcontainer).html(navstr);  
  109.             }  
  110.         }  
  111.     });  
  112. }  
  113.   
  114. function getPageBar(obj, opt) {  
  115.     if (!obj) return false;  
  116.     curPage = parseInt(obj.curPage, 10);  
  117.     if (curPage > obj.totalPage) {  
  118.         curPage = obj.totalPage;  
  119.     }  
  120.   
  121.     if (curPage < 1) {  
  122.         curPage = 1;  
  123.     }  
  124.   
  125.     if (curPage <= parseInt(opt.navNum / 210)) {  
  126.         opt.navOffset = 1;  
  127.     }  
  128.     else {  
  129.         opt.navOffset = curPage - parseInt(opt.navNum / 210);  
  130.     }  
  131.     var prev = next = 0;  
  132.     var startnav = endnav = '';  
  133.   
  134.     if (curPage == 1) {  
  135.         startnav = '<li class="paging_btn previous">首页</li> <li class="paging_btn previous">上页</li>';  
  136.     }  
  137.     else {  
  138.         prev = curPage - 1;  
  139.         startnav = '<li class="paging_btn previous" onclick="javascript:' + opt.name + '.getPageData(1);">首页</li> <li class="paging_btn previous" onclick="javascript:' + opt.name + '.getPageData(' + prev + ');">上页</li>';  
  140.     }  
  141.   
  142.     if (curPage == obj.totalPage || obj.totalPage == 0) {  
  143.         endnav = '<li class="paging_btn next">下页</li> <li class="paging_btn next">末页</li>';  
  144.     }  
  145.     else {  
  146.         next = curPage + 1;  
  147.         endnav = '<li class="paging_btn next" onclick="javascript:' + opt.name + '.getPageData(' + next + ');">下页</li> <li class="paging_btn next" onclick="javascript:' + opt.name + '.getPageData(' + obj.totalPage + ');">末页</li>';  
  148.     }  
  149.   
  150.     var amongNav = '';  
  151.     for (var i = opt.navOffset; i < opt.navOffset + opt.navNum; i++) {  
  152.         if (i == curPage) {  
  153.             amongNav += '<li class="paging_btn num checked">' + i + '</li>';  
  154.         }  
  155.         else {  
  156.             amongNav += '<li class="paging_btn num" onclick="javascript:' + opt.name + '.getPageData(' + i + ');">' + i + '</li>';  
  157.         }  
  158.         if (i >= obj.totalPage)  
  159.             break;  
  160.   
  161.     }  
  162.   
  163.     var jump = '<input type="text" name="page" class="jump_page" id="jump_page" maxlength="4" />';  
  164.     jump += '<input type="button" class="jump_btn" id="jump_btn" value="go" />';  
  165.     return startnav + amongNav + endnav + jump;  
  166. }  

 

JS面向对象编程之对象访问控制实例

Java代码   收藏代码
  1. function Cat(name, age){  
  2.     var name = name;  
  3.     this.age = age||1;  
  4.     this.setName = function(sName){  
  5.         this.name = sName;  
  6.     }  
  7.     this.getName = function(){  
  8.         return this.name;  
  9.     }  
  10.     this.setAge = function(nAge){  
  11.         this.age = nAge;  
  12.     }  
  13.     this.getAge = function(){  
  14.         return this.age;  
  15.     }  
  16. }  
  17.    
  18. Cat.prototype.say = function(){  
  19.     console.log('I am '+this.name+', I am '+this.age);  
  20. }  
  21.    
  22. var kk = new Cat('kk');  
  23. console.log(kk.name);//undefined @private  
  24. kk.setName('deeka');  
  25. console.log(kk.getName()); // deeka  
  26. kk.setAge(2);  
  27. console.log(kk.getAge()); // 2  
  28. kk.age = 3;  
  29. console.log(kk.age);//3 @public  
  30. kk.say(); // I am deeka, I am 3  

 

相关文章
|
19小时前
|
JavaScript 前端开发
js遍历对象的方法
js遍历对象的方法
6 1
|
5天前
|
移动开发 JavaScript 前端开发
分享48个JS分页代码特效,总有一款适合您
分享48个JS分页代码特效,总有一款适合您
16 0
|
14天前
|
JavaScript Unix 索引
2022年11月21日13:32:00——T5——JS对象与Date日期函数
2022年11月21日13:32:00——T5——JS对象与Date日期函数
20 0
|
16天前
|
JavaScript 前端开发 Java
JavaScript数组操作示例及对象操作技巧
今天针对javascript的数组的一些常见操作进行一些讲解,希望对给为开发者有帮助。 先看下面常见的三种循环。
|
18天前
|
前端开发 JavaScript Java
前端(JavaScript)------函数与对象
前端(JavaScript)------函数与对象
47 0
|
18天前
|
JavaScript
JS 获取对象数据类型的键值对的键与值
JS 获取对象数据类型的键值对的键与值
|
18天前
|
JavaScript 索引
js之数组,对象,类数组对象
js之数组,对象,类数组对象
|
19天前
|
JavaScript 前端开发
javaScript Number 对象
avaScript Number 对象是 JavaScript 中用于表示数字的基本类型之一。它表示的数字可以是整数,也可以是浮点数。在 JavaScript 中,所有的数字都是 Number 类型的实例,可以通过 new Number() 构造函数来创建。此外,JavaScript 还提供了一些用于处理数字的常用方法和属性,例如 parseFloat()、parseInt()、isNaN()、is
52 6
|
20天前
|
JavaScript 前端开发 Java
Postman 提供的Javascript 对象有哪些?
Postman 提供的Javascript 对象有哪些?
|
20天前
|
JavaScript 前端开发 索引
js遍历数组和对象的常用方法有哪些?
js遍历数组和对象的常用方法有哪些?
11 0

相关产品

  • 云迁移中心