在学习jQuery插件封装，依葫芦画瓢封装了一个简单的表格和分页，页面能初始化生成表格和分页，但生成后怎么能让分页插件执行分页和表格刷新工作就不晓得怎么继续了，希望熟悉jQuery插件开发的人能帮忙补齐一下。

预期的用法是，给插件传入一个后台的请求路径“"http://127.0.0.1:8080/account/findListForPage"”,通过路径返回一个分页json对象（当前页、总页、页面表格数据），通过解析json生成表格和分页部分：
[code="js"]
function reloadTable(code){
$("#acTableGrid").grid({
//content:$(".widget-body"),
type: "POST",
url:"${ctx}/account/findListForPage",
column:[{"id":"编号","state":"状态","type":"类型","phone":"电话"}],
page:true,
param:{"pageCode":code},
})
}
[/code]

code="js" {

// plugin definition
var GridTable = function(ele, options) {
    this.$element = ele,

    this.defaults = {
        page : false,
        type : "GET",
        url : undefined,
        param : undefined,
        pageData : undefined
    },
    this.opts = $.extend({}, this.defaults, options)
    if(this.opts.url!=undefined&&this.opts.url!=""){
    var dataObject = $.ajax({
            async: false,
            type : this.opts.type,
            url : this.opts.url,
            data : this.opts.param,
            success : function(data) {
                return data
            }
        });
    }
    this.opts.pageData = dataObject.responseJSON;
}

GridTable.prototype = {
    buildBody : function() {
        this.$element.empty();
        this.$element.addClass("table table-striped table-bordered table-hover");
        if (this.opts.column.length > 0) {
            var thead = $("<thead>");
            var tr = $("<tr>").appendTo(thead);
            $.each(this.opts.column[0], function(name, value) {
                tr.append("<th>" + value + "</th>");
            });
            this.$element.append(thead)
        }

        var record = this.opts.pageData.data;
        if (record != undefined && record.length > 0) {
            var tbody = $("<tbody>");
            for (i = 0; i < record.length; i++) {
                columnData = record[i];
                var tr = $("<tr>");
                $.each(this.opts.column[0], function(name, value) {
                    tr.append("<td>" + columnData[name] + "</td>");
                });
                tbody.append(tr);
            }
        return  this.$element.append(tbody)
        }

    },

    buildPagin: function(){
        var pageData = this.opts.pageData;
        if (this.opts.page) {
            var page = '<div class="dt-row dt-bottom-row">';
            page = page
                    + ' <input type="hidden" id="url" name="url" value="'
                    + this.opts.url + '">';
            page = page
            + ' <input type="hidden" id="pageSize" name="pageSize" value="'
            + pageData.pageSize + '">';
            page = page
                    + ' <input type="hidden" id="pageCode" name="pageCode" value="'
                    + pageData.pageCode + '">';
            page = page
                    + ' <input type="hidden" id="totalPageNum" name="totalPageNum" value="'
                    + pageData.totalPageNum + '">';
            page = page + ' <div class="row">';
            page = page + '     <div class="col-sm-6">';
            page = page
                    + '     <div class="dataTables_info" id="dt_basic_info">第'
                    + pageData.pageCode + '/' + pageData.totalPageNum
                    + '页  共' + pageData.totalRecords + '条记录</div>';
            page = page + ' </div>';
            page = page + ' <div class="col-sm-6 text-right">';
            page = page
                    + '     <div class="dataTables_paginate paging_bootstrap_full">';
            page = page + '         <ul class="pagination">';
            page = page
                    + '         <li class="first"><a href="javascript:void(0)">首页</a></li>';
            page = page
                    + '         <li class="prev"><a href="javascript:void(0)">上一页</a></li>';
            page = page
                    + '         <li class="next"><a href="javascript:void(0)">下一页</a></li>';
            page = page
                    + '         <li class="last"><a href="javascript:void(0)">末尾页</a></li>';
            page = page + '         </ul>';
            page = page + '    </div>';
            page = page + ' </div>';
            page = page + ' </div>';
            page = page + ' </div>';
            this.$element.after(page);
    },

}

$.fn.grid = function(options) {
    var grid =  new GridTable(this, options);
    grid.buildBody();
    grid.buildPagin();
    return grid;
};

})(jQuery);

[/code]

生成的HTML结构如下：
[code="html"]
//表格数据部分

编号	状态	电话	账号	注册时间	Email
464690392101687300	null	null	15828245173	1399625797000	null
465404813799198700	null	null	313057544@qq.com	1399796129000	null
465442761785610240	null	null	15828245273	1399805176000	null

//分页部分

第1/3页共7条记录

首页
上一页
下一页
末尾页

[/code]

yan__er666

网页上通过grid分页后的数据，，，如何通过ajax请求数据并获取查询出来的所有数据

2条回答

为你推荐