Jquery.Page.js 分页插件的使用

1、简单直接贴代码 需要引用以下样式和脚本

 

<link href="~/Scripts/Page/pager.css" rel="stylesheet" />

<script src="~/Scripts/jQuery-1.8.3.js"></script>

<script src="~/Scripts/Page/jquery.pager.js"></script>

page.css代码如下

#pager ul.pages { 

display:block; 

border:none; 

text-transform:uppercase; 

font-size:10px; 

margin:10px 0 50px; 

padding:0; 

} 

#pager ul.pages li { 

list-style:none; 

float:left; 

border:1px solid #ccc; 

text-decoration:none; 

margin:0 5px 0 0; 

padding:5px; 

} 

#pager ul.pages li:hover { 

border:1px solid #003f7e; 

} 

#pager ul.pages li.pgEmpty { 

border:1px solid #eee; 

color:#eee; 

} 

#pager ul.pages li.pgCurrent { 

border:1px solid #003f7e; 

color:#000; 

font-weight:700; 

background-color:#eee; 

} 

2、HTML代码

<div id="pager" class="page">

</div>

3、分页插件使用 

pagenumber页码,
pagecount分页数量,
buttonClickCallback点击分页的函数,
TotalCount记录总数
PageEnter:true 跳页false不跳页
<script type="text/javascript">

    $("#pager").pager({

        pagenumber: pageclickednumber,

        pagecount: Math.ceil(total / 8),

        buttonClickCallback: PageClick,

        TotalCount: total,

        PageEnter: true

    });



    PageClick = function (pageclickednumber) {

    }

</script>

效果如下:

Jquery.Page.js 分页插件的使用

QQ:点击这里给我发消息;.net技术讨论群:C#.NETWEB程序开发交流


                            

你可能感兴趣的:(jquery)