js/jquery 无刷分页通用代码

来源：互联网发布：程序员的自我修养pdf 编辑：程序博客网时间：2024/06/06 21:06

效果图：

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还是classvar 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;elseSearchPageIndex(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 一般处理程序中的接受参数名称每个请求都不同，
               })

效果图：

0 0