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

0 0

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

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

预期的用法是，给插件传入一个后台的请求路径“"http://127.0.0.1:8080/account/findListForPage"”,通过路径返回一个分页json对象（当前页、总页、页面表格数据），通过解析json生成表格和分页部分：

function reloadTable(code){
		$("#acTableGrid").grid({
    		//content:$(".widget-body"),
    		type: "POST",
			url:"${ctx}/account/findListForPage",
    		column:[{"id":"编号","state":"状态","type":"类型","phone":"电话"}],
    	    page:true,
    	    param:{"pageCode":code},
    	})
	}

(function($) {
    
	// 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);

生成的HTML结构如下：

//表格数据部分
<table id="acTableGrid" class="table table-striped table-bordered table-hover"><thead><tr><th>编号</th><th>状态</th><th>类型</th><th>电话</th><th>账号</th><th>注册时间</th><th>Email</th></tr></thead><tbody><tr><td>464690392101687300</td><td>null</td><td>0</td><td>null</td><td>15828245173</td><td>1399625797000</td><td>null</td></tr><tr><td>465404813799198700</td><td>null</td><td>0</td><td>null</td><td>313057544@qq.com</td><td>1399796129000</td><td>null</td></tr><tr><td>465442761785610240</td><td>null</td><td>0</td><td>null</td><td>15828245273</td><td>1399805176000</td><td>null</td></tr></tbody></table>
//分页部分
<div class="dt-row dt-bottom-row">	<input type="hidden" id="url" name="url" value="/kmp/account/findListForPage">	<input type="hidden" id="pageSize" name="pageSize" value="3">	<input type="hidden" id="pageCode" name="pageCode" value="1">	<input type="hidden" id="totalPageNum" name="totalPageNum" value="3">	<div class="row">		<div class="col-sm-6">		<div class="dataTables_info" id="dt_basic_info">第1/3页  共7条记录</div>	</div>	<div class="col-sm-6 text-right">		<div class="dataTables_paginate paging_bootstrap_full">			<ul class="pagination">			<li class="first"><a href="javascript:void(0)">首页</a></li>			<li class="prev"><a href="javascript:void(0)">上一页</a></li>			<li class="next"><a href="javascript:void(0)">下一页</a></li>			<li class="last"><a href="javascript:void(0)">末尾页</a></li>			</ul>	   </div>	</div>	</div> </div>

2014年5月21日 22:03

penwei
0
0 0 6

2个答案按时间排序按投票排序

0 0

采纳的答案

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

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

先在页面中划出一块第点到第几页就通过ajax局部刷新取出的数据扔到下面的value中
<s:iterator value="list" var="delist">
<option value="<s:property value="#delist.id" />">
<s:property value="#delist.name" />
</option>
<img src="<s:property value="#delist.picture_path" />" />
</s:iterator>

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

2014年5月22日 01:06

lao1984wang
617
0 0 24

1条评论

0 0

当你点击第一页的时候， 页面跳转走了， 当跳转新页面时, 当前页面的第几页链接高亮显示， 依次类推了

2014年5月21日 22:10

lihao312
607
0 2 61

添加评论

已解决问题

未解决问题

排行榜

查看全部排名>>