js/jquery 无刷分页通用代码

效果图：

HTML代码：

<div id="showPage" style="width: 650px; margin: 0 auto; display: none" class="pages">
                                            <div style="float: left">
                                                <a id="first" class="pages">首页</a>
                                                <a id="prev" class="pages">上页</a>
                                                <a id="next" class="pages">下页</a>
                                                <a id="last" class="pages">尾页</a>
                                                跳转到第<input type="text" id="txtGoPage" style="width: 45px; height: 15px; border: 1px solid" />
                                                页
                                            </div>
                                            <div style="margin: 0; float: left">
                                                 <input type="button" class="pages btn btn-info" id="go" value="跳转" />
                                                  共<span id="SumCount"></span> 条数据，每页<span id="ItemCount"></span> 条，
							当前<span id="Index"></span>/<span id="PageCount"></span>页
                                            </div>
                                        </div>

CSS代码：

/*分页*/
.pages {
    cursor: pointer;
    text-align: center;
    margin: 0 auto;
    padding-right: 0px;
    padding-bottom: 2px;
    padding-top: 2px;
    font-family: verdana, helvetica, arial, sans-serif;
}

.pages a {
    border-right: 1px solid;
    padding-right: 6px;
    border-top: 1px solid;
    padding-left: 6px;
    padding-bottom: 0px;
    overflow: hidden;
    border-left: 1px solid;
    line-height: 20px;
    margin-right: 2px;
    padding-top: 0px;
    border-bottom: 1px solid;
    height: 30px;
}

.pages a {
    border-left-color: #e6e7e1;
    border-bottom-color: #e6e7e1;
    color: #09c;
    border-top-color: #e6e7e1;
    background-color: #fff;
    border-right-color: #e6e7e1;
}

.pages a:hover {
    text-decoration: none;
    border-left-color: #09c;
    border-bottom-color: #09c;
    border-top-color: #09c;
    border-right-color: #09c;
}

.pages a.next {
    border-left-color: #09c;
    border-bottom-color: #09c;
    border-top-color: #09c;
    border-right-color: #09c;
}

JS/JQUERY代码：

//详细明细分页及明细页面中检索分页
//pageActionID,分页ID
//serachInfo 查询条件
//searchType 查询类型 so asn。。
function PagingActionClick(pageActionID, serachInfo, searchType) {
				//总页数大于1的情况下上下首末页可用
				if (parseFloat($("#PageCount").html()) > 1) {
								//取得控件类型是ID还是class
								var type = pageActionID.attr("id");
								//取得当前是多少页
								var thisindex = $("#Index").text();
								switch (type) {
												case 'first':
																{
																				$("#txtGoPage").val("");
																				pageindex = 1;
																				SearchPageIndex(1, serachInfo, searchType);
																				return;
																}
												case 'prev':
																{
																				$("#txtGoPage").val("");
																				pageindex = parseInt(thisindex) - 1;
																				if (pageindex < 1) return;
																				SearchPageIndex(pageindex, serachInfo, searchType);
																				return;
																}
												case 'next':
																{
																				$("#txtGoPage").val("");
																				pageindex = parseInt(thisindex) + 1;
																				if (pageindex > parseInt($("#PageCount").html())) return;
																				else
																								SearchPageIndex(pageindex, serachInfo, searchType);
																				return;
																}
												case 'last':
																{
																				var max = parseInt($("#PageCount").html());
																				$("#txtGoPage").val("");
																				pageindex = max;
																				SearchPageIndex(max, serachInfo, searchType);
																				return;
																}
												case 'go':
																{
																				var _go = $("#txtGoPage").val();
																				if (_go == "" || _go == undefined) {
																								$.msgbox("<span style='font-size:14px;line-height:30px;'>请输入要跳转的页数</span>",
																												{ type: "error", buttons: [{ type: 'submit', value: '确定' }] });
																								pageindex = 1;
																								return false;

																				}
																				else {
																								pageindex = _go;
																				}
																				SearchPageIndex(_go, serachInfo, searchType);
																				return;
																}
								}
				}
}


var searchpageindex;
//index,页面索引例如1,2,3
//searchwhere 查询条件
//wheretype 查询类型 so asn。。
function SearchPageIndex(index, searchwhere, wheretype) {
				$.ajax({
								type: "post",
								url: "AirSeaSolution.ashx",
								data: wheretype + "=" + encodeURIComponent(searchwhere) + "&currPage=" + index,
								datatype: "html",
								//async: false,
								success: function (returnData, textstatus, xmlhttprequest) {
												if (returnData.split('_')[0] != "") {
																$("#showPage").css('display', 'block');

																$("#divShowAccountListInfo").html(returnData.split('</tr>_')[0]);
																$("#divShowRoleManager").html(returnData.split('</tr>_')[0]);
																var page = returnData.split('</tr>_')[1].split(',');
																$("#SumCount").text(page[0]);//总条数
																$("#ItemCount").text(page[1]);//每页显示条数
																$("#Index").text(page[2]);//当前页数
																$("#PageCount").text(page[3]);//总页数
												}
												else {
																$("#showPage").css('display', 'none');
																$("#divShowAccountListInfo").html("<tr class='error'><td colspan='30'>暂无账单列表信息，请输入查询条件查询。</td></tr>");
																$("#divShowRoleManager").html("<tr class='error'><td colspan='5'>暂无角色权限信息，请添加。</td></tr>");

												}
								},
								error: function () {
												alert("分页数据检索信息错误");
								}
				});

}

使用方法：

                 $.ajax({
                                type: "post",
                                url: "AirSeaSolution.ashx",
                                data: "ShowAccountListInfo=" + encodeURIComponent(searchwhere) + "&currPage=1",
                                datatype: "html",
                                beforeSend: function (returnData) {
                                                $("#divShowAccountListInfo").html("<tr class='error'><td colspan='30'>暂无账单列表信息，请输入查询条件查询。</td></tr>");

                                                $.Dialog("<span style='font-size:16px;line-height:30px;padding-top:20px;color:red;'><img src='plugins/msgbox/images/info.png'>正在检索数据，请等候...</span>");
                                },
                                success: function (returnData, textstatus, xmlhttprequest) {
                                                $(".floatBoxBg").hide();
                                                $(".floatBox").hide();
                                                ShowAccountListHtml(returnData);
                                },
                                error: function (errorinfo) {
                                                alert("账单列表信息数据请求错误。");
                                }
                });

    //分页操作动作
                $(".pages").click(function () {
                                PagingActionClick($(this), ",,,", "ShowAccountListInfo");//ShowAccountListInfo  一般处理程序中的接受参数名称 每个请求都不同，
                })

效果图：