问题描述
在学习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 definitionvar 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);}returnthis.$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>
解决方案
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
解决方案二：
当你点击第一页的时候， 页面跳转走了， 当跳转新页面时, 当前页面的第几页链接高亮显示， 依次类推了