ajax获取数据自动创建分页，支持自定义显示数据量以及分页数量

工作中遇到这一需求，时间仓促赶着演示，只用了1个多小时随随便便做的，满足自定义以及同页面多块分页同时进行，多的不说，直接上demo，工作忙，没时间细化，希望哪位路过优化细化后共享下，最后附上使用说明

1、自己刚刚开始整合的小类库

String.prototype.trim = function () {
    return this.replace(/(^\s*)|(\s*$)/g, "");
}
String.prototype.ltrim = function () {
    return this.replace(/(^\s*)/g, "");
}
String.prototype.rtrim = function () {
    return this.replace(/(\s*$)/g, "");
}
String.prototype.isNumber = function () {
    return this != "" && !isNaN(this);
}
String.prototype.toFix = function (fix) {
    ///    <summary>
    ///        去掉多余小数并且不四舍五入
    ///    </summary>
    ///    <param name="fix" type="Number">
    ///        要保留的小数位数
    ///    </param>
    ///    <returns type="Number" />
    if (this.isNumber() && fix.isNumber()) {
        var array = this.split('.');
        if (array.length > 1 && fix.split('.').length == 1) {
            if (fix == 0) {
                return Number(array[0]);
            }
            return Number(array[0] + "." + array[1].substring(0, fix));
        }
    }
    return this;
}
Number.prototype.toFix = function (fix) {
    return this.toString().toFix(fix.toString());
}
 

 

2、主要js代码

function myAjaxOperation(dom, currentIndex, pageSize, pageCount) {
    this.dom = dom;
    this.currentIndex = currentIndex;
    this.pageSize = pageSize;
    this.pageCount = pageCount;
}
myAjaxOperation.prototype.paging = function () {
    ///    <summary>
    ///        通过ajax获取分页数据并分页
    ///    </summary>
    ///    <param name="dom" type="jQuery">
    ///        要填充数据的dom，以及在dom下方生成分页条
    ///    </param>
    ///    <param name="currentIndex" type="Int">
    ///        获取第几页
    ///    </param>
    ///    <param name="pageSize" type="Int">
    ///        每页获取多少条数据
    ///    </param>
    ///    <param name="pageCount" type="Int">
    ///        分页条显示多少页
    ///    </param>
    ///    <returns type="html" />

    if (this.dom == "undefined" || $(this.dom).attr("class") != "ajaxRequest") {
        return;
    }
    var dom = this.dom;
    var currentIndex = 1;
    var pageSize = 10;
    var pageCount = 10;

    if (this.currentIndex != "undefined" && this.currentIndex.toString().isNumber()) {
        currentIndex = Number(this.currentIndex);
    }
    if (this.pageSize != "undefined" && this.pageSize.toString().isNumber()) {
        pageSize = Number(this.pageSize);
    }
    if (this.pageCount != "undefined" && this.pageCount.toString().isNumber()) {
        pageCount = Number(this.pageCount);
    }


    var total; //总共多少条数据 
    var totalpage; //总共多少页
    var preNO; //分页条当前页之前显示多少页
    var nextNO; //分页条当前页之后显示多少页

    if (pageCount % 2 == 0) {
        preNO = pageCount / 2;
        nextNO = (pageCount / 2) - 1;
    }
    else {
        preNO = (pageCount / 2).toFix(0);
        nextNO = (pageCount / 2).toFix(0);
    }

    var url = $(dom).attr("destination");
    $.get(url, { pageSize: pageSize, pageIndex: currentIndex }, function (msg) {
        var resultDom = $(msg);
        $(dom).html(resultDom);
        total = Number($(resultDom).find("table").attr("total"));
        if ((total / pageSize) > (total / pageSize).toFix(0)) {
            totalpage = ((total / pageSize) + 1).toFix(0);
        }
        else {
            totalpage = total / pageSize;
        }

        var pagingBar = $('<div class="paging"><ul></ul></div>');
        if (currentIndex != 1) {
            $(pagingBar).children("ul").append($('<li index="1"><a href="#">首页</a></li>'));
            $(pagingBar).children("ul").append($('<li index="' + (currentIndex - 1) + '"><a href="#">上一页</a></li>'));
        }

        for (var i = 1; i <= pageCount && currentIndex - preNO + 1 <= totalpage && i <= totalpage; i++) {
            var index = i;
            if (currentIndex > preNO && (totalpage - currentIndex) >= nextNO) {
                index += (currentIndex - preNO);
            }
            else if (totalpage < pageCount) { 
                
            }
            else {
                if (totalpage - currentIndex < nextNO) {
                    index = totalpage - pageCount + index;
                }
            }
            $(pagingBar).children("ul").append($('<li index="' + index + '" ' + (index == currentIndex ? 'class="pagingli"' : '') + '><a href="#">' + index + '</a></li>'));
        }
        if (currentIndex != totalpage) {
            $(pagingBar).children("ul").append($('<li index="' + (currentIndex + 1) + '"><a href="#">下一页</a></li><li index="' + totalpage + '"><a href="#">末页</a></li>'));
        }
        $(pagingBar).children("ul").append($('<li>共 ' + total + '条，' + totalpage + '页</li>'));
        $(pagingBar).children().find("li").bind('click', function () {
            $(this).addClass("liloading");
            getDataList($(dom), $(this).attr("index"), pageSize, pageCount);
        });
        $(dom).next(".paging").remove();
        $(dom).after(pagingBar);

    });

}

function getDataList(dom, currentIndex, pageSize, pageCount) {
    var myAjax = new myAjaxOperation();
    myAjax.dom = $(dom);
    myAjax.currentIndex = currentIndex;
    myAjax.pageSize = pageSize;
    myAjax.pageCount = pageCount;
    myAjax.paging();
}

 

3、获取的数据的格式，注意table有个自定义属性 总数total用来显示总共多少条数据

<div>
    <table cellpadding="0" cellspacing="0" width="100%"  total="@ViewBag.total">
        @if (ViewBag.IsComplate == "0")
        {
@*未完成*@     
            <thead>
                <tr>
                    <td class="leftborder">
                        流程名称
                    </td>
                    <td>
                        流程交易号
                    </td>
                    <td>
                        操作名称
                    </td>
                    <td>
                        操作人
                    </td>
                    <td>
                        操作人部门
                    </td>
                    <td>
                        创建时间
                    </td>
                    <td class="rightborder">
                        已过时间
                    </td>
                </tr>
            </thead>
            <tbody>
                @{foreach (var item in ViewData["AllOpreation"] as List<AllOpreationModel>)
                  {
                    <tr>
                        <td>@item.ProcessName
                        </td>
                        <td>
                            <a href="javascript:void(0)" onclick="OpenCurrentProcess('@item.ProcessTransactionsNumber')">
                                [@item.ProcessTransactionsNumber]</a> @*<a href="javascript:void(0)" onclick="currentPro(1)">@item.ProcessTransactionsNumber</a>*@
                        </td>
                        <td>
                            @item.OperationName
                        </td>
                        <td>
                            <a href="javascript:void(0)">@item.Operator</a>
                        </td>
                        <td>@item.OperatorSector
                        </td>
                        <td>@item.CreationTime
                        </td>
                        <td>@item.Overtime
                        </td>
                    </tr>
                  }
                }
            </tbody>
        }
        else
        {
@*已完成*@
            <thead>
                <tr>
                    <td class="leftborder">
                        流程名称
                    </td>
                    <td>
                        流程交易号
                    </td>
                    <td>
                        操作名称
                    </td>
                    <td>
                        操作交易号
                    </td>
                    <td>
                        操作结果
                    </td>
                    <td>
                        操作人
                    </td>
                    <td>
                        操作人部门
                    </td>
                    <td>
                        待办创建时间
                    </td>
                    <td>
                        完成时间
                    </td>
                    <td class="rightborder">
                        历时
                    </td>
                </tr>
            </thead>
            <tbody>
                @{foreach (var item in ViewData["AllOpreation"] as List<AllOpreationModel>)
                  {
                    <tr>
                        <td>@item.ProcessName
                        </td>
                        <td>
                            <a href="javascript:void(0)" onclick="OpenCurrentProcess('@item.ProcessTransactionsNumber')">
                                [@item.ProcessTransactionsNumber]</a> @*<a href="javascript:void(0)" onclick="currentPro(1)">@item.ProcessTransactionsNumber</a>*@
                        </td>
                        <td>@item.OperationName
                        </td>
                        <td>
                            @Html.ActionLink("[" + item.OperatingTransactionNumber + "]", "FormView", "../uWorkflow/Task", new { code = item.OperatingTransactionNumber }, new { target = "_blank" })
                        </td>
                        <td>@item.OperatingResult
                        </td>
                        <td>
                            <a href="javascript:void(0)">@item.Operator</a>
                        </td>
                        <td>@item.OperatorSector
                        </td>
                        <td>@item.CreationTime
                        </td>
                        <td>@item.CompletionTime
                        </td>
                        <td>@item.Overtime
                        </td>
                    </tr>
                  }
                }
            </tbody>
        }
    </table>
</div>

4、如何使用，@*之间的内容是MVC的注释，分页条自动生成，不用写的*@

html：

@*@Html.Action("_WaitingOperationPart", "Opreation")*@
            <div class="ajaxRequest" destination="/uProcess/Opreation/_WaitingOperationPart" pageSize="10" pageCount="5">
                @*
            This data list get by ajax.
            Please set class 'ajaxRequest' 
            and 
            set a custom attribute 'destination'.
            pageSize :每页获取多少条数据
            pageCount : 分页条显示多少页
            *@
            </div>
            @*<div class="paging">
                <ul>
                    <li><a href="#">首页</a></li>
                    <li><a href="#">上一页</a></li>
                    <li class="pagingli"><a href="#">1</a></li> pagingli 当前页样式
                    <li class="liloading"><a href="#">2</a></li> liloading 点击后显示加载图标
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li>
                    <li><a href="#">下一页</a></li>
                    <li><a href="#">末页</a></li>
                </ul>
            </div>*@

 js：pageSize和pageCount也可以不初始化，默认都是10

$(".ajaxRequest").each(function (index) {
        if (window["console"])
           console.log(index);
        var myAjax = new myAjaxOperation();
        myAjax.dom = $(this);
        myAjax.currentIndex = 1;
        myAjax.pageSize = $(this).attr("pageSize").trim();
        myAjax.pageCount = $(this).attr("pageCount").trim();
        myAjax.paging();
    });

 

 

5、截图赏析 样式自己调

6、不善写作，如果还是不懂就给我留言，我会在收到留言的第一时间回复你