jquery.pagination插件实现分页

 

 jquery.pagination分页实际并不是用jquery分页，而只是将自己分页得到的信息告诉这个插件，这个插件接受到信息后也只完成上一页下一页及页码的操作，具体的页面数据显示还是要交给repeater或者datalist来完成，以下是我自己写的一个jquery分页，使用之前一定要先下载jquery.pagination.js插件。

    <script src="../Js/jquery-1.4.1.min.js" type="text/javascript"></script>    <script src="../Js/jquery.pagination.js" type="text/javascript"></script>

如果不想使用该插件提供的默认样式，也可以自己写css样式

/*分页样式*/.flickr {padding:0px;margin:0px; text-align:center; font-family:Verdana; font-size:12px; color: #fff;}.flickr a {border-right: #dedfde 1px solid; padding-right: 6px; background-position: 50% bottom; border-top: #dedfde 1px solid; padding-left: 6px; padding-bottom: 2px; border-left: #dedfde 1px solid; color: #0061de; margin-right: 3px; padding-top: 2px; border-bottom: #dedfde 1px solid; text-decoration: none}.flickr a:hover{border-right: #000 1px solid; border-top: #000 1px solid; background-image: none; border-left: #000 1px solid; color: #fff; border-bottom: #000 1px solid; background-color: #0061de}.left{float:left}.right{float:right}paginationdiv.flickr {padding:0px;margin:0px; text-align:center; font-family:Verdana; font-size:12px;}div.flickr a {border-right: #dedfde 1px solid; padding-right: 6px; background-position: 50% bottom; border-top: #dedfde 1px solid; padding-left: 6px; padding-bottom: 2px; border-left: #dedfde 1px solid; color: #0061de; margin-right: 3px; padding-top: 2px; border-bottom: #dedfde 1px solid; text-decoration: none}div.flickr a:hover {border-right: #000 1px solid; border-top: #000 1px solid; background-image: none; border-left: #000 1px solid; color: #fff; border-bottom: #000 1px solid; background-color: #0061de}div.meneame a:active {border-right: #000 1px solid; border-top: #000 1px solid; background-image: none; border-left: #000 1px solid; color: #fff; border-bottom: #000 1px solid; background-color: #0061de}div.flickr span.current {padding-right: 6px; padding-left: 6px; font-weight: bold; padding-bottom: 2px; color: #ff0084; margin-right: 3px; padding-top: 2px}div.flickr span.disabled {padding-right: 6px; padding-left: 6px; padding-bottom: 2px; color: #adaaad; margin-right: 3px; padding-top: 2px

 

要先定义一些全局变量，方便分页时随时调用

        protected int PageSize = 12;//每页要显示的数据        protected static int CurrentPage;//当前页码，从0开始        protected int Count;//数据记录总数

 

在page_load事件里这样写

        protected void Page_Load(object sender, EventArgs e)        {            if (!IsPostBack)            {                ChannelTreeBind(0, "所有类别", Channel.Article, ddlClassId);                if (Request.QueryString["toPage"] == null)//toPage主要是从jquery里传递过来，下面jquery代码中请留意该参数                    CurrentPage = 0;                else                    CurrentPage = Convert.ToInt32(Request.QueryString["toPage"]);                ShowInfo(CurrentPage, "");//显示第一页数据            }        }

我们要把数据源从数据库里取出来放到repeater里面

        private void ShowInfo(int Current,string strWhere)//分页的语句已在BLL层写好了，方法很多种，我用的是select top pagesize id not in(select pagesize*currentpage)的方法         {            CMS.BLL.ArticleManager bll=new CMS.BLL.ArticleManager();            rptInfo.DataSource = bll.GetPageList(PageSize, Current,strWhere, "Id desc");            rptInfo.DataBind();            Count = bll.GetCount(strWhere);        }

 

接下来是全过程的核心，也就是用jquery插件来接受相应的参数了（具体参数可进一步查阅）

 

    <script type="text/javascript">            $(function() {        //分页参数设置        $("#Pagination").pagination(<%=Count %>, {        callback: pageselectCallback,        prev_text: "« 上一页",        next_text: "下一页 »",        items_per_page:<%=PageSize %>,    num_display_entries:5,    current_page:<%=CurrentPage %>,    num_edge_entries:2,    link_to:"?toPage=__id__"//=__id__指的是点击按钮后跳转的页面索引，由cs文件里的currentpage来接收       });        })    </script>