Jquery异步分页控件
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;"> 上一页 </a> </li> <li class="btn btn-m"> <a id="next" style="cursor:pointer;"> 下一页 </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); //前一页 $("#pre").click(function () { PrevPage(); }) //下一页 $("#next").click(function () { NextPage(); }) //首页 $("#first").click(function () { FirstPage(); }) //尾页 $("#end").click(function () { EndPage(); }) //显示第一页 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); } } //下一页 function NextPage() { if (opts.current_page != pageNum) { opts.current_page += 1; $("#cp").text(opts.current_page); //调用数据绑定方法 opts.callback(opts.current_page - 1, opts.pageSize); } } //前一页 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 () { //第一个参数 数据总条数 $(".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类库
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。