手写简单分页js

1，功能

     自动序列化class=query的的div的控件；

     根据每个项目只需要重写createFootHtml就可以，配合asp.net的模板页来渲染数据。

     

//Refuse to be modified by anynone 拒绝任何人修改
//author 11973 作者11973
//if you want to use,but it can't meet your need, you can copy ,and rename filename and namespace pageCommon .
//如果你想用，但是这个js不能完全满足你，你复制一份，重命名文件，并且重命名命名空间pageCommon.
var pageCommon = {
    url: "",
    loadQ:null,
    pageData: {
        pageSize: 6,
        pageIndex:1      
    },
    callback: null,
    //序列化
    serializePostData: function (jq) {
        var data = {};
        if (jq == undefined||jq==null) {
            return data;
        }
        var array = jq.find(":input").not("button");
        if (array == undefined || array == null || array.length==0) {
            return data;
        }
  //      console.error(array);
        array.each(function () {
            var obj = $(this).attr("name");
            if (obj != undefined && obj != null) {
                data[obj.toString()] = $(this).val();
            }
        })
        return data;
    },
    //重新赋值为空
    clearAll: function (jq) {
        jq.find(":input").not("button").val("");
       
    },
    //初始化
    init: function (jq) {
        var that = this;
        that.loadQ = jq;
        that.pageData.pageIndex = 1;
        that.url = jq.attr("pageUrl");
        that.postHtml();
        $("#search").click(function () {
            pageCommon.refresh();
        })
    },
    //刷新
    refresh: function () {
        var that = this;
        that.postHtml();
    },
   
    //下一页
    nextpage: function (current) {
        var that = this;
        that.pageData.pageIndex++;
        that.postHtml();
    },
    //上一页
    prepage: function (current) {
        var that = this;
        if (current > 1) {
            that.pageData.pageIndex--;
            that.postHtml();
        }
    },
    //加载
    postHtml: function () {
        var that = this;
        var query = that.serializePostData($(".query"));
        query.pageIndex = that.pageData.pageIndex;
        query.pageSize = that.pageData.pageSize;
        $.post(that.url, query, function (html) {
            that.loadQ.empty();
            that.loadQ.html(html);
            that.createFooter()
            if (that.callback) {
                that.callback();
            }
        });
    },
    createFooter: function () {
        var that = this;
        var list = that.loadQ.find(".pageList");
        var pageIndex = parseInt(list.attr("pageIndex"));
        var pageCount = parseInt(list.attr("pageCount"));
        var start = 1;
        var end = 6;
        if (pageCount <= 6) {
            end = pageCount;
        } else {           
            start = pageIndex / 6* 6 ;
            end = (pageIndex / 6 + 1) * 6;
            if (end > pageCount) {
                end = pageCount;
            }
        }
        that.createFootHtml(start, end, pageIndex, pageCount);
    },
    createFootHtml: function (start, end, current,pageCount) {   
        var that = this;
        var html = '<div><span class="pageBtnWrap">	<span class="disabled" onclick="currentPage(this,1)">首页</span>';
        html += ' <a href="javascript:void(0);" onclick="prePage()" class="page-prev " >上一页</a>'
        for (var i = start; i <= end; i++) {
            if (i == current) {
                html +='<span class="curr">'+i+'</span> '
            } else {
                html += '<a   onclick="currentPage(this,' + i + ')" class="page" title="第'+i+'页">'+i+'</a>';
            }
          
        }
        if (end < pageCount) {
            html += '<span class="spanDot">...</span>';
        }
        html += ' <a href="javascript:void(0);" onclick="nextPage()"  class="page-next"  >下一页</a>'
        html += '<a href="#" title="尾页" onclick="currentPage(this,' + pageCount + ')">尾页</a>';
        html += '</span>';
        html += '<span class="infoTextAndGoPageBtnWrap">';
        html += ' <span class="totalText">当前第<span class="currPageNum"> ' + current + '</span> 页';
        html += ' <span class="totalInfoSplitStr"> /</span >共<span class="totalPageNum"> ' + pageCount + '</span> 页</span> ';
        html += ' <span class="goPageBox" >&nbsp;转到<span id="kkpager_gopage_wrap">';
        html += ' <input type= "button" id= "kkpager_btn_go" value= "确定" onclick="y_confirm(' + pageCount +')" > <input type="text" id="kkpager_btn_go_input" value="" onblur="hideGo()" onfocus="showGo()" max=' + pageCount +'></span> 页</span ></span ></div> ';
        html += '<div style="clear:both;"></div>';

        //html += " <label> 共 </label ><label>" + that.loadQ.find(".pageList").attr("recordCount") + "</label><label>条数据 </label>";
      
     
        $("#kkpager").html(html);
    }

}
function y_confirm(pageCount) {
    var obj = $("#kkpager_btn_go_input").val();   
    if (!isNaN(obj)) {      
        var count = parseInt(obj);
        if (count > pageCount) {
            count = pageCount;
        }
        var that = pageCommon;
        that.pageData.pageIndex = count;
        that.postHtml();
    }
    
}
function showGo() {
    $("#kkpager_btn_go").show();
}
function hideGo() {
    //页码--失去焦点时
    // $("#kkpager_btn_go").hide();
}
function btnSearch() {
    var that = pageCommon;
    that.pageData.pageIndex = 1;
    that.postHtml();
}
//  $(".prepage").off();;
function prePage() {
    var that = pageCommon;
    that.pageIndex = parseInt(that.loadQ.find(".pageList").attr("pageIndex"));
    that.prepage(that.pageIndex);
}

function nextPage() {
    var that = pageCommon;
    var pageIndex = parseInt(that.loadQ.find(".pageList").attr("pageIndex"));
    var pageCount = parseInt(that.loadQ.find(".pageList").attr("pageCount"));
    if (pageIndex < pageCount) {
        that.pageIndex = pageIndex;
        that.nextpage(that.pageIndex);
    }
}
function currentPage(e,current) {
     
    var css = $(e).attr("class");
  
        var that = pageCommon;      
        that.pageData.pageIndex = current;
        that.postHtml();
    
}

2，示例

<div class="header-search fr posr query">
                    <input name="keyword" type="text" placeholder="输入关键词">
                    <input name="expertAreaId" type="hidden" id="expertAreaId">
                    <input type="button"  id="search" class="enterKey" value="检索">
 </div>
  <div id="pageData" class="clearfix" pageurl="@Url.Action("ExpertList")"></div>
                    <!-- 圈子列表 -->
                    <div class="pagenav ">
                        <div id="kkpager">
                        </div>
</div>
<script>
    $(function () {
      
        pageCommon.init($("#pageData"));
        $(document).on("click", ".area", function () {

            $("#expertAreaId").val($(this).attr("data"));
            pageCommon.refresh();
        })

    });
</script>