模仿博客园首页 ajax 无刷新分页

效果模仿 淘宝（http://s.taobao.com/search?q=920&commend=all&ssid=s5-e&search_type=item&sourceId=tb.index&initiative_id=tbindexz_20121221）

的分页不过他的不是ajax 也像博客园的首页分页(转载请保持原著)：

思路：1：创建页码 如图:

服务器需要的返回总数(具体创建dom自己发挥 以及有多少页 具体思路 假如每页显示10条 总数除以10 1：结果等于总数不需要操作 2： 如果大于或者等于1默认为1 3：利用正则

判断有小数点后加+1)代码如下：pageNumberCount 是总数

 pageNumberCount = json.total / 10, _RegExp = /\./;
 if (pageNumberCount <= 1) {
    pageNumberCount = 1;
   } else if (_RegExp.test(pageNumberCount)) {
       pageNumberCount = parseInt(pageNumberCount);
       pageNumberCount = pageNumberCount + 1;
   }:

2：点击1获取第一页数据 点击2获取第2页数据。。。。后面就是这样的规律 看完后是不是觉得很容易啊！没错ajax就是那么简单(呵呵 不过也是用的别人写好的jquery内库)

最后附加代码：

/*
 *datatabel tootip提示
 */
function getHtml(){
    this.html = "";
}
        
getHtml.prototype = {
    show: function(){
        var toolTip = $("<div id='tooltip' width='100px' height='12px'>" + this.html + "</div>");
        return toolTip;
    }
}
        
/*
 *jquery datatable
 */
function _getDataTable(){
}
        
/*
 * jquery datatable 扩展
 * show             显示表格
 * getupPage        点击上一页向左递减
 * getdowmPage      点击下一页向右自加
 * getPageIndex     点击页码操作
 * createPageNumber 创建页面dom 操作
 * btnCreatePageNumber 点击确定按钮查询操作
 * createDateMenu   创建表头Menu
 */
_getDataTable.prototype = {
    show: function (obj, tableID) {
        if (obj == "" || tableID == "") {
            return;
        }
        else {
            var tableInfo = tableID.dataTable({
                "bInfo": obj.bInfo,
                "bStateSave": obj.bStateSave,
                "bRetrieve": obj.bRetrieve,
                "bLengthChange": obj.bLengthChange, // 是否允许用户通过一个下拉列表来选择分页后每页的行数
                'bPaginate': obj.bPaginate, //是否分页。
                "bProcessing": obj.bProcessing, //datatable获取数据时候是否显示正在处理提示信息。 
                "bServerSide": obj.bServerSide,
                "bFilter": obj.bFilter, //过滤
                "aaData": obj.aaData, //数据源
                "aoColumns": obj.aoColumns, //数据源
                "aoColumnDefs": obj.aoColumnDefs, //列排序
                "fnRowCallback": obj.fnRowCallback,
                "iDisplayLength": obj.iDisplayLength,
                "sPaginationType": obj.sPaginationType
            });
            return tableInfo;
        }
    },
    getupPage: function (page_no, id) {
        //获取最大值最小值 这里修改利用each获取 
        var max = parseInt($("#page").children("a:last").text()), min = parseInt($("#page").children("a:first").text());

        //当前页小于最小值
        if (page_no <= min) {
            if (page_no == 1) {
                return;
            }
            for (var i = min; i < page_no + 5; i++) {
                $("#a_" + i + "").attr("id", "a_" + (i - 1) + "");
                $("#a_" + (i - 1) + "").text(i - 1);
            }
        }

        //样式操作
        dataTableCss(page_no, pageNumberCount);
    },
    getdowmPage: function (page_no, id) {
        //获取最大值最小值 这里修改利用each获取 
        var i, max = parseInt($("#page").children("a:last").text()), min = parseInt($("#page").children("a:first").text());

        //当前页小于最大值
        if (page_no < max) {
        }
        else {
            if (page_no < pageNumberCount) {//当前页小于总页数才修改id 和文本值
                for (var i = page_no; i > 0; i--) {
                    $("#a_" + i + "").attr("id", "a_" + (i + 1) + "");
                    $("#a_" + (i + 1) + "").text(i + 1);
                }
            }
        }
        //样式操作
        dataTableCss(page_no, pageNumberCount);
    },
    getPageIndex: function (page_no, id, pageNumberCount) {
        //最大值最小值 这里修改利用each获取 
        var i, max = parseInt($("#page").children("a:last").text()), min = parseInt($("#page").children("a:first").text());

        if (page_no != pageNumberCount) {//当前页不等于总页数
            if (max == page_no) {////当前页等于最大值
                for (var i = page_no; i > 0; i--) {
                    $("#a_" + i + "").attr("id", "a_" + (i + 1) + "");
                    $("#a_" + (i + 1) + "").text(i + 1);
                }
            }
            else
                if (min == page_no) {//当前页等于最小值
                    if (page_no != 1) {//当前页不等于1
                        for (var i = min; i < page_no + 5; i++) {
                            $("#a_" + i + "").attr("id", "a_" + (i - 1) + "");
                            $("#a_" + (i - 1) + "").text(i - 1);
                        }
                    }
                }
        }

        //样式操作
        dataTableCss(page_no, pageNumberCount);
    },
    createPageNumber: function (pageNumberCount) {
        var pageCount = "", pageJquery = "",
            upPage = "<input class='pageNumberInfo' type='button' id='upPage' value='上一页' title='上一页'/>",
            dowmPage = "<input class='pageNumberInfo' type='button' value='下一页' id='dowmPage'  title='下一页'/>";
        omitPage = "<span id='omitPage' class='pageNumberInfo'>...</span>";
        page.append(upPage);
        if (pageNumberCount > 5) {
            _sum = 5
            for (var i = 1; i <= _sum; i++) {
                pageCount += "<a class='pageNumberInfo' id='a_" + i + "' href=''>" + i + "</a>";
            }
            page.append(pageCount);
            page.append(omitPage);
        }
        else {
            for (var i = 1; i <= pageNumberCount; i++) {
                pageCount += "<a class='pageNumberInfo' id='a_" + i + "' href=''>" + i + "</a>";
            }
            page.append(pageCount);
        }
        pageJquery = "共  " + pageNumberCount + "  页到第 <input class='pageNumberInfo' placeholder='请输入' type='text' id='jumpto' name='jumpto' title='指定页码'/><input class='pageNumberInfo' type='button' value='确定' id='btnJquery' title='指定页码'/>";
        page.append(pageJquery);
        page.append(dowmPage);
    },
    btnCreatePageNumber: function (page_no) {
        var i;
        //获取最大值最小值 这里修改利用each获取 
        var max = parseInt($("#page").children("a:last").text()), min = parseInt($("#page").children("a:first").text());

        var pageCount = "", pageJquery = "",
            upPage = "<input class='pageNumberInfo' type='button' id='upPage' value='上一页' title='上一页'/>",
            dowmPage = "<input class='pageNumberInfo' type='button' value='下一页' id='dowmPage'  title='下一页'/>";
        omitPage = "<span id='omitPage' class='pageNumberInfo'>...</span>";
        if (page_no >= max) {
            if (page_no == pageNumberCount) {
                //点6情况
                page.html("");
                page.append(upPage);
                for (var i = 4; i >= 0; i--) {
                    pageCount += "<a class='pageNumberInfo' id='a_" + (page_no - i) + "' href=''>" + (page_no - i) + "</a>";
                }
                page.append(pageCount);
                page.append(omitPage);
                pageJquery = "共  " + pageNumberCount + "  页到第 <input class='pageNumberInfo' placeholder='请输入' type='text' id='jumpto' name='jumpto' title='指定页码'/><input class='pageNumberInfo' type='button' value='确定' id='btnJquery' title='指定页码'/>";
                page.append(pageJquery);
                page.append(dowmPage);
            } else {
                page.html("");
                page.append(upPage);
                for (var i = 4; i >= 0; i--) {
                    pageCount += "<a class='pageNumberInfo' id='a_" + (page_no - i + 1) + "' href=''>" + (page_no - i + 1) + "</a>";
                }
                page.append(pageCount);
                page.append(omitPage);
                pageJquery = "共  " + pageNumberCount + "  页到第 <input class='pageNumberInfo' placeholder='请输入' type='text' id='jumpto' name='jumpto' title='指定页码'/><input class='pageNumberInfo' type='button' value='确定' id='btnJquery' title='指定页码'/>";
                page.append(pageJquery);
                page.append(dowmPage);
            }

        } else if (page_no <= min) {
            if (page_no == 1) {
                page.html("");
                page.append(upPage);
                for (var i = 0; i <= 4; i++) {
                    pageCount += "<a class='pageNumberInfo' id='a_" + (parseInt(page_no) + i) + "' href=''>" + (parseInt(page_no) + i) + "</a>";
                }
                page.append(pageCount);
                page.append(omitPage);
                pageJquery = "共  " + pageNumberCount + "  页到第 <input class='pageNumberInfo' placeholder='请输入' type='text' id='jumpto' name='jumpto' title='指定页码'/><input class='pageNumberInfo' type='button' value='确定' id='btnJquery' title='指定页码'/>";
                page.append(pageJquery);
                page.append(dowmPage);
            } else {
                page.html("");
                page.append(upPage);
                for (var i = 0; i <= 4; i++) {
                    pageCount += "<a class='pageNumberInfo' id='a_" + (page_no - 1 + i) + "' href=''>" + (page_no - 1 + i) + "</a>";
                }
                page.append(pageCount);
                page.append(omitPage);
                pageJquery = "共  " + pageNumberCount + "  页到第 <input class='pageNumberInfo' placeholder='请输入' type='text' id='jumpto' name='jumpto' title='指定页码'/><input class='pageNumberInfo' type='button' value='确定' id='btnJquery' title='指定页码'/>";
                page.append(pageJquery);
                page.append(dowmPage);
            }
        }

        //样式操作
        dataTableCss(page_no, pageNumberCount);
    },
    createDateMenu: function (Menu) {
        $(".tops").contextMenu({
            menu: Menu
        }, function (action, el, pos) {
            //action 是点击对应菜单名称
        });
    }
}

function dataTableCss(page_no, pageNumberCount) {
    $("#a_" + page_no + "").addClass("indexPageClass").siblings().removeClass("indexPageClass");
    if (parseInt($("#page").children("a:last").text()) < pageNumberCount) {
        $("#omitPage").show();
    }
    else {
        $("#omitPage").hide();
    }
 }

　　html：

   

<div class="data_list">
 @{
      Html.RenderPartial("VehicleTable");
   }
</div>
  <div id="page" style="margin: 0 auto; text-align:center;"></div>
  <div class="clear"></div>

VehicleTable视图:

@{
    ViewBag.Title = "DataTable_JS";
}

@CssOrJs.Css("DataTable/demo_page.css", Url)
@CssOrJs.Css("DataTable/demo_table_jui.css", Url)
@CssOrJs.Css("contextMenu/jquery.contextMenu.css", Url)

@CssOrJs.Script("contextMenu/jquery.contextMenu.js", Url)

@* DataTable*@
<div id="VehicleTable">
</div>
@*菜单操作*@
<ul id="myMenu" class="contextMenu">
    <li><a  onclick="fnShowHide(0);" href="javascript:void(0)">column 1</a></li>
    <li><a  onclick="fnShowHide(1);">column 2</a></li>
    <li><a  onclick="fnShowHide(2);">column 3</a></li>
    <li><a  onclick="fnShowHide(3);">column 4</a></li>
    <li><a  onclick="fnShowHide(4);">column 5</a></li>
    <li><a  onclick="fnShowHide(5);">column 6</a></li>
    <li><a  onclick="fnShowHide(6);">column 7</a></li>
</ul>

页面代码：

    var spanMsg = $("#spanCX"), page = $("#page"), pageIndex = $("#page a"), pageNumberCount, page_no = 1, page_count = 10;
    var getVehiceTable = new _getDataTable(), isCreatePage = true, ajax_request = false,jumpto=$("#jumpto");

        pageIndex.live("click", function (e) {
            e.preventDefault();
            if (ajax_request == false) {
                page_no = parseInt($(this).attr("id").substring(2)); //(/\d+/).exec($(this).attr("id"));
                var createobj = { page_no: page_no, pageID: "$('#page a')", pageNumberCount: pageNumberCount };
                vehicle_Jquery("pageIndex", createobj);
            }
        });
        $("#btnJquery").live("click", function (e) {
            if (ajax_request==false) {
                page_no = $("#jumpto").val().trim();
                if (/^\d+$/.test(page_no) == false) {
                    return;
                }
                if (page_no > pageNumberCount) {
                    page_no = pageNumberCount;
                }
                var createobj = { page_no: page_no };
                vehicle_Jquery("btnJquery", createobj);
            }
        });

        $("#upPage").live("click", function (e) {
            if (ajax_request == false) {
                getVehiceTable.getupPage(page_no, $("#page a"));
                if (page_no != 1) {
                    page_no--;
                    vehicle_Jquery("null",null);
                }
                $("#a_" + page_no + "").addClass("indexPageClass").siblings().removeClass("indexPageClass");
            }
        });

        $("#dowmPage").live("click", function () {
            if (ajax_request == false) {
                getVehiceTable.getdowmPage(page_no, $("#page a"));
                if (page_no < pageNumberCount) {//当前页小于总页数才请求数据
                    page_no++;
                    vehicle_Jquery("null", null);
                }
                $("#a_" + page_no + "").addClass("indexPageClass").siblings().removeClass("indexPageClass");
            }
        });

　　vehicle_Jquery:

   function vehicle_Jquery(flag, obj) {
        var name = userName.val().trim(), _cust_id, _tree_path;
        ajax_request = true;
        spanMsg.show();
        if (name == "") {
            _cust_id = $.cookie('Login_cust_id');
            _tree_path = $.cookie('Login_tree_path');
            var searchUrl = $.cookie('xmlHost') + "customer/" + _cust_id + "/vehicle/search";
            var searchData = { auth_code: $.cookie('Login_auth_code'), tree_path: _tree_path, mode: "all", page_no: page_no, page_count: page_count, key: txtVehicleNumber.val().trim() };
            var searchObj = { type: "GET", url: searchUrl, data: searchData, success: function (json) { vehiclSearchSuccess(json, flag, obj) }, error: OnError };
            ajax_function(searchObj);
        }
        else {
            var isHave = false;
            for (var i = 0; i < _uerName.length; i++) {
                if (name == _uerName[i].cust_name) {
                    isHave = true;
                    _cust_id = _uerName[i].cust_id;
                    _tree_path = _uerName[i].tree_path;
                    var searchUrl = $.cookie('xmlHost') + "customer/" + _cust_id + "/vehicle/search";
                    var searchData = { auth_code: $.cookie('Login_auth_code'), tree_path: _tree_path, mode: "all", page_no: page_no, page_count: page_count, key: txtVehicleNumber.val().trim() };
                    var searchObj = { type: "GET", url: searchUrl, data: searchData,success: function (json) { vehiclSearchSuccess(json, flag, obj) }, error: OnError };
                    ajax_function(searchObj);
                    break;
                }
            }
            if (!isHave) {
                alert("用户名输入错误!");
            }
        }
    }

ajax_function 代码：

/*
 * jquery ajax
 */
function ajax_function(obj){
    $.ajax({
        type: obj.type,
        url: obj.url,
        data: obj.data,
        dataType: obj.dataType,
        success: obj.success,
        error: obj.error
    });
}

最后附加 vehiclSearchSuccess函数 

   var vehicleInfoSuccess = function vehicleInfoSuccess(json, flag, obj) {
        var j, _j, UnContacter, Uncontacter_tel;
        for (var i = 0; i < json.data.length; i++) {
            j = json.data[i].create_time.indexOf("T");
            _j = json.data[i].service_end_date.indexOf("T");
            json.data[i].create_time = json.data[i].create_time.substring(0, j);
            json.data[i].service_end_date = json.data[i].service_end_date.substring(0, _j);
        }
        spanMsg.hide();
        VehicleTable.empty();
        VehicleTable.html(tbHtml);
        VeicleTableID = $("#VeicleDable"), VDable = $("#VeicleDable thead tr th");
        var _columns = [{ "mData": "cust_name", "sClass": "center" },
                          { "mData": "obj_name", "sClass": "center" },
                          { "mData": "cust_name", "sClass": "center" },
                          { "mData": "cust_id", "sClass": "center" },
                          { "mData": "sim", "sClass": "center" },
                          { "mData": "create_time", "sClass": "center" },
                          { "mData": "service_end_date", "sClass": "center" },
                          { "mData": null, "sClass": "center", "fnRender": function (obj) {
                              return '<a  id=' + obj.aData.obj_id + '  class="set" href="#">设置</a>';
                          }
                          }];
        var aoColumnDefs = [{ "bSortable": false, "aTargets": [7]}]//设置0列不可排序
        var objTable = { "bInfo": false, "bStateSave": false, "bRetrieve": true, "bLengthChange": false, 'bPaginate': false,
            "bProcessing": true, "bServerSide": false, "bFilter": false, "aaData": json.data,
            "aoColumns": _columns, "aoColumnDefs": aoColumnDefs
        }
        VeicleTable = getVehiceTable.show(objTable, VeicleTableID);

        //create pageNumber
        if (isCreatePage == true) {
            if (json.data.length <= 0) {
                return;
            }
            pageNumberCount = json.total / 10, _RegExp = /\./;
            if (pageNumberCount <= 1) {
                pageNumberCount = 1;
            } else if (_RegExp.test(pageNumberCount)) {
                pageNumberCount = parseInt(pageNumberCount);
                pageNumberCount = pageNumberCount + 1;
            }
            getVehiceTable.createPageNumber(pageNumberCount);
            isCreatePage = false;
        }
        ajax_request = false;

        //菜单操作
        getVehiceTable.createDateMenu("myMenu");

        //菜单按钮html赋值(取dataTable对象的列名称,申明 var Mydata 把Mydata赋值VeicleTableID.dataTable({xxxx}) Mydata.DataTable.settings[0].aoColumns[0].sTitle)
        VULhtml.each(function (index) {
            if ($.cookie('VeicleMenu' + index) == "x") {
                VULhtml[index].innerHTML = VeicleTable.DataTable.settings[0].aoColumns[index].sTitle;
            }
            else {
                VULhtml[index].innerHTML = VDable[index].innerHTML + '√';
            }
        });
        if (flag == "pageIndex") {
            getVehiceTable.getPageIndex(obj.page_no, obj.pageID, obj.pageNumberCount);
        } else if (flag == "btnJquery") {
            getVehiceTable.btnCreatePageNumber(obj.page_no);
            $("#jumpto").val(obj.page_no);
        }