在学习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]
// 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"]
//表格数据部分
编号 | 状态 | 类型 | 电话 | 账号 | 注册时间 | |
---|---|---|---|---|---|---|
464690392101687300 | null | 0 | null | 15828245173 | 1399625797000 | null |
465404813799198700 | null | 0 | null | 313057544@qq.com | 1399796129000 | null |
465442761785610240 | null | 0 | null | 15828245273 | 1399805176000 | null |
//分页部分
[/code]