Java代码
- <div class="sub_menus module-manager">
- <div class="module-list">
- <table class="list" id="tab_mod">
- <tr class="t_title">
- <th class="col-1">序号</th>
- <th class="col-2">模块名</th>
- <th class="col-3">价格</th>
- <th class="col-4">购买时间</th>
- </tr>
- </table>
- </div>
- <div id="pager1" class="pager"></div>
- </div>
jQuery.page.js分页类 js对象解决同一个方法在页面引入多次报错问题（调用：对象.方法）
Java代码
- /**
- * table分页类
- * author phoenix
- * date 2013-12-17
- * 示例：
- var page = new Page({
- 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 class="col-1">' + ($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 class="paging_btn previous">首页</li> <li class="paging_btn previous">上页</li>';
- }
- else {
- prev = curPage - 1;
- 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>';
- }
- if (curPage == obj.totalPage || obj.totalPage == 0) {
- endnav = '<li class="paging_btn next">下页</li> <li class="paging_btn next">末页</li>';
- }
- else {
- next = curPage + 1;
- 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>';
- }
- var amongNav = '';
- for (var i = opt.navOffset; i < opt.navOffset + opt.navNum; i++) {
- if (i == curPage) {
- amongNav += '<li class="paging_btn num checked">' + i + '</li>';
- }
- else {
- amongNav += '<li class="paging_btn num" onclick="javascript:' + opt.name + '.getPageData(' + i + ');">' + i + '</li>';
- }
- if (i >= obj.totalPage)
- break;
- }
- var jump = '<input type="text" name="page" class="jump_page" id="jump_page" maxlength="4" />';
- jump += '<input type="button" class="jump_btn" id="jump_btn" value="go" />';
- return startnav + amongNav + endnav + jump;
- }
JS面向对象编程之对象访问控制实例
Java代码
- function Cat(name, age){
- var name = name;
- this.age = age||1;
- this.setName = function(sName){
- this.name = sName;
- }
- this.getName = function(){
- return this.name;
- }
- this.setAge = function(nAge){
- this.age = nAge;
- }
- this.getAge = function(){
- return this.age;
- }
- }
- 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
