jquery ajax分页 js对象
2023-09-14 08:59:47 时间
jQuery.page.js分页类 js对象解决同一个方法在页面引入多次报错问题(调用:对象.方法)
url:busimodules.php, //获取分页的数据 issort: true, //是否显示排序序号 pageSize:4, //每页显示的条数 name:page, //该值必须和实例化对象一样,如果创建多个实例的话实例名称不能相同 fileds:[mname, price, buytime], //要显示的字段,必须和url参数:busimodules.php的返回值一致 tabcontainer: tab_mod,//表格id navcontainer: pager1 //翻页导航显示的id var page3 = new Page({ url:busimodules.php, name:page3, pageNavFun:getPageBar2, pageSize:12, callback:function (jsondata, navstr) {} * busimodules.php返回json数据格式: {"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"}]} 如果要将返回结果自己处理,可以在参数name的后面加上参数callback:function (jsondata, navstr) {处理逻辑} 后面的tabcontainer等参数就都没有用了 */ var Page = function (options) { var defaults = { navNum:10, navOffset:1, pageSize:3, data:{}, pageNavFun:getPageBar, issort:false }; this.options = $.extend({}, defaults, options); if(!this.options.url) {return false;} if(!this.options.name) {return false;} if(!this.options.callback) { if(!this.options.tabcontainer) {return false;} if(!this.options.navcontainer) {return false;} if(!this.options.fileds || this.options.fileds.length 1) {return false;} } this.init(); Page.prototype.init = function () { this.getPageData(1); * 获取对应页数据 * p表示当前页数 * 返回当前页的数据,和导航数据 */ Page.prototype.getPageData = function (p) { $this = this; if (!p) p = 1; ajaxSendData = pagesize= + $this.options.pageSize + p= + p; $.each($this.options.data, function (name, val) { ajaxSendData += " " + name + "=" + val; }); $.ajax({ type:POST, url:$this.options.url + "?t=" + Math.random(), data:ajaxSendData, async:false, dataType:JSON, success:function (obj) { var navstr = eval($this.options.pageNavFun + "(obj, $this.options)"); var data = obj.data; if ($this.options.callback) { $this.options.callback(data, navstr); } else { var html = ; var shtml = ; for (var i = 0; i data.length; i++) { if ($this.options.issort) { shtml = td + ($this.options.pageSize * (p - 1)-0 + (i + 1)) + /td ; } html += tr + shtml; var k = 1; if (shtml != ) { k = 2; } for (var j = 0; j $this.options.fileds.length; j++) { html += td class="col- + k + " + data[i][$this.options.fileds[j]]; k++; } html += /tr ; } if (!$(# + $this.options.tabcontainer).find(tr:eq(1))[0]) { $(# + $this.options.tabcontainer).append(html); } else { $(# + $this.options.tabcontainer).find(tr:gt(0)).remove(); $(# + $this.options.tabcontainer).append(html); } $(# + $this.options.navcontainer).html(navstr); } } }); function getPageBar(obj, opt) { if (!obj) return false; curPage = parseInt(obj.curPage, 10); if (curPage obj.totalPage) { curPage = obj.totalPage; } if (curPage 1) { curPage = 1; } if (curPage = parseInt(opt.navNum / 2, 10)) { opt.navOffset = 1; } else { opt.navOffset = curPage - parseInt(opt.navNum / 2, 10); } var prev = next = 0; var startnav = endnav = ; if (curPage == 1) { startnav = li 首页 /li li 上页 /li ; } else { prev = curPage - 1; startnav = li string" >.getPageData(1);" 首页 /li li string" >.getPageData( + prev + );" 上页 /li ; } if (curPage == obj.totalPage || obj.totalPage == 0) { endnav = li 下页 /li li 末页 /li ; } else { next = curPage + 1; endnav = li string" >.getPageData( + next + );" 下页 /li li string" >.getPageData( + obj.totalPage + );" 末页 /li ; } var amongNav = ; for (var i = opt.navOffset; i opt.navOffset + opt.navNum; i++) { if (i == curPage) { amongNav += li + i + /li ; } else { amongNav += li string" >.getPageData( + i + );" + i + /li ; } if (i = obj.totalPage) break; } var jump = input type="text" name="page" id="jump_page" maxlength="4" / ; jump += input type="button" id="jump_btn" value="go" / ; return startnav + amongNav + endnav + jump;
Cat.prototype.say = function(){ console.log(I am +this.name+, I am +this.age); var kk = new Cat(kk); console.log(kk.name);//undefined @private kk.setName(deeka); console.log(kk.getName()); // deeka kk.setAge(2); console.log(kk.getAge()); // 2 kk.age = 3; console.log(kk.age);//3 @public kk.say(); // I am deeka, I am 3
详细解析JavaScript的Ajax之同步和异步的区别 详细解析JavaScript的Ajax之同步异步的区别 博客整理到这里基本上JavaScript的初级知识就整理完了,现在我们来说一下看JavaScript的最后一个知识点——Ajax。 (Asynchronous Javascript And XML) 即异步 JavaScript 和 XML,一种创建交互式、快速动态网页应用的网页开发技术,无需重新加载整个网页的情况下,能够更新部分网页的技术。 1.同步和异步 首先我们先来分析一下JavaScript的中的同步和异步的区别。 同步就是调用某个内容时,调用方得等待这个调用返回结果才能继续往后执行。(期间不可以执行其他的命令)。如图:
相关文章
- jQuery分页插件(jquery.page.js)的使用
- 可想实现一个自己的简单jQuery库?(九)
- JS框架_(JQuery.js)纯css3进度条动画
- JS框架_(JQuery.js)网页文字评论弹幕
- JS框架_(JQuery.js)带阴影贴纸标签按钮
- JS框架_(JQuery.js)图片相册掀开切换效果
- JS框架_(JQuery.js)夜晚天空满天星星闪烁动画
- JS框架_(JQuery.js)上传进度条
- jQuery如何退出each循环的?
- 写了个限制文本框输入最大长度的jquery插件 - jquery.restrictFieldLength.js
- 使用jquery-easyui写的CRUD插件(3)
- 第二百一十八节,jQuery EasyUI,TimeSpinner(时间微调)组件
- Jquery各Ajax函数:$.get(),$.post(),$.ajax(),$.getJSON()
- 到浏览器顶部的获取js和jquery
- [Js/Jquery]天气接口简单使用
- 电子签章盖章之jQuery插件jquery.zsign
- js 分页插件(jQuery)
- JS:crypto-js模块实现数据加密解密
- JS:使用Mock.js生成随机数据,拦截 Ajax 请求
- babel配置项目目录支持转换es6语法,引入非项目目录js后,引入Js转换无效
- js-jquery-001-条形码概述
- js-jquery-SweetAlert2【二】配置与方法
- js-jquery-对象与JSON字符串互相转换
- js-jquery-SweetAlert【一】使用
- js-jquery-插件开发(二)【最终插件是最后一个,中间是过程】
- 跨域请求jQuery的ajax jsonp使用常见问题解答
- 白学jquery Mobile《构建跨平台APP:jQuery Mobile移动应用实战》连续7-电话问卷调查
- 理解JQuery中的data()使用方法