jquery分页插件AmSetPager(自写)

2020-05-22 16:13:52易采站长站整理

}
});
};
})( jQuery, window, document );

说一下样式(.pager就是分页元素class):

<SPAN style=”FONT-SIZE: 12px”><style type=”text/css”>
.pager a{ text-decoration: none; border: 1px solid #e7ecf0;color: #15B;}
.pager a:hover{ background-color:#E6EBEF}
.pager a,.pager span{display: inline-block;padding: 0.1em 0.4em;margin-right: 5px; margin-bottom: 5px;}
.selectno{background: #26B;color: #fff;border: 1px solid #AAE;}
</style></SPAN>

有三种方式,一个是页面中数据容器有全部数据,这时就是mode:’static’。还有就是ajax按分页方式取数据时,mode:’ajax’,还有根据url传参分页mode:’url’(我感觉这时估计不会用到吧)。
首先静态的:
html:

<table id=”tablepager” border=”0″ cellpadding=”0″ cellspacing=”0″>
<tr><td><p>1aaaaaaaaaaaaaaaaaaaaaa</p></td></tr>
<tr><td><p>2aaaaaaaaaaaaaaaaaaaaaa</p></td></tr>
<tr><td><p>3aaaaaaaaaaaaaaaaaaaaaa</p></td></tr>
<tr><td><p>4aaaaaaaaaaaaaaaaaaaaaa</p></td></tr>
<tr><td><p>5aaaaaaaaaaaaaaaaaaaaaa</p></td></tr>
<tr><td><p>6aaaaaaaaaaaaaaaaaaaaaa</p></td></tr>
<tr><td><p>7aaaaaaaaaaaaaaaaaaaaaa</p></td></tr>
<tr><td><p>8aaaaaaaaaaaaaaaaaaaaaa</p></td></tr>
<tr><td><p>9aaaaaaaaaaaaaaaaaaaaaa</p></td></tr>
</table>
<div id=”pager” class=”pager”></div>

js代码:

$(function(){
$(“#tablepager”).AmSetPager({“viewCount”:2,”mode”:”static”,”listCount”:6});
})

这里也可以设置callback,和下面类似

截图:



ajax的:
html:

<table id=”tablepager” border=”0″ cellpadding=”0″ cellspacing=”0″>
</table>
<div id=”pager” class=”pager”></div>

后台获取实例数据:

public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = “text/plain”;
int index = int.Parse(context.Request.QueryString[“index”]);
int viewCount = int.Parse(context.Request.QueryString[“viewCount”]);
List<string> list = new List<string>();
for (int i = 1; i <= viewCount; i++)
{
list.Add(index + “_” + i + “………………..”);