前端写分页(用了自己同事写的插件)

记录一下

 首先需要在页面上引用分页的js

//分页插件
$(function () {
    var pagingObj = $(".js_paging");
    var pagingEmptyObj = $(".js_pagingEmpty");//页面配置的数据没有情况下的显示（默认）  使用页面配置 例如：pagingEmpty:'.js_pagingEmpty' by cp 2016 1 14
    if (!pagingObj) {
        return;
    }

    $(document).ready(function(){
        $.paging.search();
    });

    //默认分页的配置
    var pagingConfig = {
        pageIndex: 1,
        pageSize: 10,
        url: "",
        data: {},
        appendTo: "",
        beforeSuccess: undefined,
        success: ajaxSuccess,
        isLockLoding: false //是否锁定加载，true为锁定，无数据或正在请求时锁定
    };

    //配置等于当前页面配置合并默认配置
    var _curConfig = $(pagingObj).attr("data-options");
    if (_curConfig) {
        _curConfig = eval("({" + _curConfig + "})");
        pagingConfig = $.extend({}, pagingConfig, _curConfig);
    }

    //window滚动到底部时触发
    $("body").on('touchmove', function (e) {
        if (!pagingConfig.isLockLoding) {
            //判断底部有无  在计算触发下拉刷新的位置
            if ($("footer").length) {
                var lastScreen = parseInt($(window).scrollTop()) + parseInt($(window).innerHeight()) - 50 < pagingObj.position().top * 1 ? false : true;
            } else {
                var lastScreen = parseInt($(window).scrollTop()) + parseInt($(window).innerHeight()) +3 < pagingObj.position().top * 1 ? false : true;
            }
            
            if (lastScreen && pagingConfig.isLockLoding == false) {//到达需要加载的位置，且并未锁定加载
                ajaxLoading();
            }
        }
    });

    //拓展分页函数
    $.extend({
        paging: {
            search: function () {
                pagingConfig.pageIndex = 1;
                pagingConfig.isLockLoding = false;
                ajaxLoading();
            },
            updateDataAndSearch: function (searchData) {
                pagingConfig.pageIndex = 1;
                pagingConfig.isLockLoding = false;
                pagingConfig.data = $.extend(pagingConfig.data,searchData);
                ajaxLoading();
            }
        }
    });

    //请求分页数据，成功后调用success方法
    function ajaxLoading() {
        if (!pagingConfig.isLockLoding) {
            pagingConfig.isLockLoding = true;
            $.ajax({
                type: "post",
                url: pagingConfig.url,
                data: $.extend(pagingConfig.data, { pageIndex: pagingConfig.pageIndex, pageSize: pagingConfig.pageSize }),
                dataType: "json",
                beforeSend: function () {
                    pagingObj.text("加载中...")
                },
                error: function () {
                    //showWrong("加载失败，请重试");
                    pagingConfig.isLockLoding = false;
                    pagingObj.text("");
                },
                isShowLoad:false,
                success: pagingConfig.success
            });
        }
    }

    //默认的ajaxSuccess方法，成功后会解析分页模板生成HTML
    function ajaxSuccess(data) {
        pagingConfig.isLockLoding = false;
        if (pagingConfig.pageIndex == 1) {
            $(pagingConfig.appendTo).empty();
        }

        //如果定义了beforeSuccess函数，且return false则不执行解析html
        if (pagingConfig.beforeSuccess) {
            if (pagingConfig.beforeSuccess(data.Body) == false) {
                return;
            }
        }
        if (data.DictJsonStatus == 200) {      
            datalist = data.Body.hasOwnProperty("DataList") ? data.Body.DataList : data.Body.List;
            var templateHtml;
            if (pagingConfig.template) {
                templateHtml = $(pagingConfig.template).html();
            } else {
                templateHtml = pagingObj.next().html();
            }
            var regex = /(${+[^}]*[}]+)/g;
            var result = templateHtml.match(regex);

            for (var j in datalist) {
                var model = datalist[j];
                var appendHtml = templateHtml.replace(regex, function (word) {
                    return eval(word.substring(2, word.length - 1));
                });
                var r = $(pagingConfig.appendTo).append(appendHtml);
            }
            pagingConfig.pageIndex++;
            if (data.Body.Total == 0) {//判断没有数据存在时的显示   by cp 2016 1 14
                pagingObj.hide();
                if (pagingConfig.pagingEmpty) {//pagingConfig.pagingEmpty 页面配置的数据没有情况下的显示  例如：".js_pagingEmpty"
                    $(pagingConfig.pagingEmpty).show();
                } else {
                    pagingEmptyObj.show();
                }
            }
            //如果得到的数据比每页数据量小，说明已经没有数据了
            else if (datalist.length < pagingConfig.pageSize) {
                pagingObj.text("没有更多数据");
                pagingConfig.isLockLoding = true;
            } 
            else {
                pagingObj.text("请下拉加载数据");
            }
        } else {
            //showWrong(rq.Msg);
            pagingObj.text("");
        }
    }

});
//搜索后得到的数据 显示提示信息 与条数
function showTipsTotal(data) {
    var total = data.Total;
    $(".js_num").html(total)
}

模板：

 <div class="js_list">
                    
  </div>
   <!-- 分页控制 -->
   <!-- js_paging 分页插件里的元素  data-options 打开的url   appendTo 放到哪个地方去   -->
   <div class="commloadList js_paging" data-options="url:'/OACustomer/SearchCustomer',appendTo:'.js_list',data:searchData"></div>
    <!--这个隐藏的div就放下面-->
    <div style="display: none"> 　　
　　  <!--模板   需要显示的重复的分页内容--> 
      <div class="item-list  poabo js_openPage" data-url="/OACustomer/CustomerDetail?Id=${model.Id}">
          ${formateOperate(model)}  <!-- ${model.Id} 后台给的绑定数据源 也可以直接放${自定义的一个方法(model)} -->
          <img class="open" src="../../images/v1/open.png" alt="" />
      </div>
    </div>