程序员人生 网站导航

Jquery异步分页控件

栏目:互联网时间:2015-09-02 07:56:26

ascx控件:

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="Pager.ascx.cs" Inherits="com.eshop.www.Web.controls.Pager" %> <script src="/script/pagination/Pager.js" type="text/javascript"></script> <div class="paginator-wrap"> <div class="paginator"> <ul class="ul-wrap"> <li id="first" class="btn btn-m"> <a style="cursor:pointer;"> 首页 </a> </li> <li id="pre" class="btn btn-m"> <a style="cursor:pointer;"> 上1页 </a> </li> <li class="btn btn-m"> <a id="next" style="cursor:pointer;"> 下1页 </a> </li> <li class="btn btn-m"> <a id="end" style="cursor:pointer;"> 尾页 </a> </li> 页次:<em id="cp">1</em>/<em id="ye">0</em>页 共<em id="mc">0</em>条记录 <%--<li class="goto">到第</span><input type="text"><span class="words">页</span></li>--%> <li class="submit"> <input type="submit" value="肯定"></li> </ul> </div> </div>

Jquery插件:

jQuery.fn.pager = function (recordCount, opts) { opts = jQuery.extend({ pageSize: 10, num_display_entries: 10, current_page: 1, num_edge_entries: 0, link_to: "#", prev_text: "Prev", next_text: "Next", ellipse_text: "...", prev_show_always: true, next_show_always: true, callback: function () { return false; } }, opts || {}); var pageNum = 0; function numPages() { return Math.ceil(recordCount / opts.pageSize); } //对象初始化 function Init() { pageNum = numPages(); //当前页数 $("#cp").text(opts.current_page); //总页数 $("#ye").text(pageNum); //数据总条数 $("#mc").text(recordCount); //前1页 $("#pre").click(function () { PrevPage(); }) //下1页 $("#next").click(function () { NextPage(); }) //首页 $("#first").click(function () { FirstPage(); }) //尾页 $("#end").click(function () { EndPage(); }) //显示第1页 opts.callback(0, opts.pageSize); } //首页 function FirstPage() { if (opts.current_page > 1) { opts.current_page = 1; $("#cp").text(opts.current_page); //调用数据绑定方法 opts.callback(opts.current_page - 1, opts.pageSize); } } //下1页 function NextPage() { if (opts.current_page != pageNum) { opts.current_page += 1; $("#cp").text(opts.current_page); //调用数据绑定方法 opts.callback(opts.current_page - 1, opts.pageSize); } } //前1页 function PrevPage() { var currentpage = parseInt($("#PageIndex").val()); if (opts.current_page > 1) { opts.current_page -= 1; $("#cp").text(opts.current_page - 1); //调用数据绑定方法 opts.callback(opts.current_page - 1, opts.pageSize); } } //尾页 function EndPage() { if (opts.current_page != pageNum) { opts.current_page = pageNum; $("#cp").text(opts.current_page); //调用数据绑定方法 opts.callback(opts.current_page - 1, opts.pageSize); } } Init(); }

页面调用示例:

<script> $(function () { //第1个参数 数据总条数 $(".paginator").pager(<%=RecordCount %>, { pageSize: 5, current_page: 1, prev_text: "Prev", next_text: "Next", callback: QueryCommentInfo }); }) function QueryCommentInfo(pageIndex, pageSize) { $("#CommentInfo").html("<tr style=" margin-top:200px;"><td colspan="4"><img src="http://<%=com.eshop.www.Tools.StringHelper.SreverUrl %>/ds_shangcheng_pc/images/load.gif" /></div>正在加载,请稍后。。。</td></tr>"); $.post("/ajaxTodo/MemberComment.aspx", { Func: "QueryCommentInfo", pageIndex: pageIndex, pageSize: pageSize }, function (data) { if (data.toString() != "") { var jsonStr = data.toString().split("]")[0] + "]"; var dataStr = data.toString().split("]")[1]; var ary = $.parseJSON(jsonStr); var conStr = ""; $(ary).each(function () { var tr = "<tr><td class="star"><div class="icon-" + (",0,1,".indexOf("," + this.score + ",") >= 0 ? "badstar" : "goodstar") + ""></div></td><td class="comment"><div class="item">" + this.content + "</div></td><td class="date"><p class="date">" + this.create_date.split(" ")[0] + "</p><p class="time">" + this.create_date.split(" ")[1] + "</p></td><td class="info"> <a href="/retail/ProductShow.aspx?productcode=" + this.product_code + "">" + this.product_name + "</a> <p class="price"><span class="count">" + this.product_price + "</span>元</p></td></tr>"; conStr += tr; }) $("#CommentInfo").html(conStr); } }) } </script>

注意:要援用Jquery类库

------分隔线----------------------------
------分隔线----------------------------

最新技术推荐