jquery ajax分页 js对象-优快云博客

本文介绍了一个自定义的分页组件实现方法，通过JavaScript面向对象的方式实现了动态加载数据并进行分页展示的功能。此组件可以应用于各种需要分页显示数据的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<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对象解决同一个方法在页面引入多次报错问题（调用：对象.方法）

/**
 * 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面向对象编程之对象访问控制实例

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