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}

pagination
div.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>