简单的jQuery分页插件封装怎么进行？

Question

在学习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	0	null	15828245173	1399625797000	null
465404813799198700	null	0	null	[e-mail]	1399796129000	null
465442761785610240	null	0	null	15828245273	1399805176000	null

//分页部分

第1/3页  共7条记录

• 首页
• 上一页
• 下一页
• 末尾页

[/code]

Answer 1

lihao312 说的我有点不认同 不需要去跳新页面

1：分页控件需要向后台发送请求，发送的参数包括当前页，每页显示数量，查询条件；并且获取数据加载到当前页面；
2：进行修改删除操作的时候能记住当前页；
3：查询后翻页的时候可以可以记住当前查询的条件

先在页面中划出一块 第点到第几页就通过ajax局部刷新取出的数据扔到下面的value中

">


" />
/s:iterator

本来准备贴我的一个以前做的例子 看了下太挫啦 不丢人现眼啦 下面的你参考下
http://www.jb51.net/article/24920.htm