SharePoint 2013 自定义翻页显示列表项

项目需求：自定义开发一个能分页显示列表项的小部件，允许左右翻页，能根据用户权限来显示管理链接等。

效果如下：

技术要求：使用sharepoint rest API 来获取列表项，这样性能高，能够快速响应用户操作。（关于REST API详细介绍见我的博客：SharePoint REST Service steps by steps）

注意： 这里我固定单页显示５项，可自行更改。当页面在第一页时，默认左分页隐藏，最后一页时，右分页默认隐藏。在页面加载过程会出现加载图片的效果，页面重新刷新时，不会记录之前用户所在分页，默认回到第一页，有兴趣的朋友，可以把这功能改改。

步骤：

1. 创建一个自定义list，无需创建其他字段， 添加数据即可， 我这里list名称是News

2. 编辑当前list页面， 添加ScriptContent Webpart.

3. 编辑该scriptconten webpart, 加入下列布局代码片段：

 

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="/Style Library/CustomJSLink/news.js"></script>
<link rel="stylesheet" type="text/css" href="/Style Library/CustomJSLink/news.css">


<div>

<div class="news">

<div class = "title">News</div>

<div  class="hidden"  id="newsLink"><a class="manageLink">Manage Link</a></div>

</div>

<div class="btn">

<img id="pre" src="http://dev-sp/Marketing%20Document/pre.JPG">

</div>

<div id="result" ><img   id="load" src="http://dev-sp/Marketing%20Document/busy.gif"></div>

<div class = "btn">

<img id="next" src="http://dev-sp/Marketing%20Document/next.JPG">

</div>

</div>

4. 引入CSS文件和JS文件，保存下列代码到ｓｈａｒｐｏｉｎｔ 站点。

ｎｅｗｓ．ｃｓｓ 文件

 

#result
{
    float: left;
     200px;
    height: 200px;
    text-align: left;
    margin-left: 5px;
    margin-right: 5px;
   
}

.btn
{
    float: left;
     20px;
    height: 20px;
}

.head
{
    font-size: 15px;
    color: #19abef;
    float:left;
    max-150px;
    overflow:hidden;
    text-overflow:ellipsis;
}

.time
{
    clear:both;
    font-size: 15px;
    color: grey;
}

.btn:hover img
{
    border: 1px solid #0000ff;
}

.news
{
     100%;
    float:left;
    clear:both;
    margin-left:10px;
    margin-bottom:10px;
}

.title
{
    font-size: 25px;
     70px;
    float:left;
}

#newsLink
{
      100px;
     font-size: 15px;
     font:#19abef;
     float:left;
     margin-top:10px;
     margin-left:50px;

}

#load
{
    margin-left:70px;
}

.hidden
{
    display:none;
}

ＪＳ文件：

 

var skip = 5;
var count = 0;

function formatDate(date, pattern) {
    var d;
    if ((d = parseDate(date)) == null) {
        return "";
    }
    if (!pattern) {
        pattern = "yyyy-MM-dd";
    }
    var arrWeek = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "Sunday", "Monday", "Tuesday", "Tuesday", "Thursday", "Friday", "Saturday"];
    var value = new Object();
    value["y"] = parseString(date.getFullYear());
    value["M"] = parseString(date.getMonth() + 1);
    value["d"] = parseString(date.getDate());
    value["H"] = parseString(date.getHours());
    value["h"] = parseString(value["H"] > 12 ? (value["H"] - 12) : value["H"]);
    value["m"] = parseString(date.getMinutes());
    value["s"] = parseString(date.getSeconds());
    value["S"] = parseString(date.getMilliseconds());
    value["E"] = arrWeek[date.getDay()];
    value["e"] = arrWeek[date.getDay() + 7];
    value["a"] = (value["H"] > 12 ? "PM" : "AM");
    value["A"] = (value["H"] > 12 ? "下午" : "上午");
    var result = "";
    var i = 0;
    var hasE = false;
    var hasAMPM = false;
    while (i < pattern.length) {
        var c = pattern.charAt(i++);
        var lc = c;
        var tmpStr = c;
        while (i < pattern.length && (c = pattern.charAt(i)) == lc) {
            tmpStr += c;
            i++;
        }
        if (value[lc] != "" && value[lc] != null && value[lc] != "undefined") {
            if ((lc == "E" || lc == "e") && !hasE) {
                result += value[lc];
                hasE = true;
            } else if (lc == "E" || lc == "e") {
                result += tmpStr;
            } else if ((lc == "a" || lc == "A") && !hasAMPM) {
                result += value[lc];
                hasAMPM = true;
            } else if ((lc == "a" || lc == "A")) {
                result += tmpStr;
            } else {
                if (tmpStr == "d" || tmpStr == "M" || tmpStr == "H" || tmpStr == "h" || tmpStr == "m" || tmpStr == "s") {
                    result += value[lc];;
                } else {
                    result += value[lc].fillChar(tmpStr.length);
                }
            }
        } else {
            result += tmpStr;
        }
    }
    return result;
}

function parseDate(value) {
    var date = null;
    if (Date.prototype.isPrototypeOf(value)) {
        date = value;
    } else if (typeof (value) == "string") {
        date = new Date(value.replace(/-/g, "/"));
    } else if (value != null && value.getTime) {
        date = new Date(value.getTime());
    }
    ;
    return date;
};


function parseString(value) {
    if (value == null) {
        return "";
    } else {
        return value.toString();
    }
};
String.prototype.fillChar = function (length, mode, char) {
    if (!char) {
        char = "0";
    }
    if (this.length > length) {
        if (mode == "after") {
            return this.substr(0, length);
        } else {
            return this.substr(this.length - length, length);
        }
    }
    var appendStr = "";
    for (var i = 0; i < (length - this.length) / char.length; i++) {
        appendStr += char;
    }
    if (mode == "after") {
        return this + appendStr;
    }
    else {
        return appendStr + this;
    }
};


function execute(url, type, verb, data, success, error) {
    var host = window.location.protocol + '//' + window.location.host;
    var webUrl = _spPageContextInfo.webServerRelativeUrl;
    var urlFull = host + webUrl;
    $.ajax({
        url: urlFull + "/_api/web/lists/GetByTitle('News')/" + url,
        type: type,
        data: data,
        headers: {
            "Accept": "application/json;odata=verbose",
            "Content-Type": "application/json;odata=verbose",
            "X-RequestDigest": $("#__REQUESTDIGEST").val(),
            "IF-MATCH": "*",
            "X-HTTP-Method": verb
        },
        cache: false,
        success: success,
        error: error
    });
}

function retriveListItem() {
    $("#pre").off("click");
    $("#next").off("click");
    $("#result").html("<img  id="load" src="http://wsscfd/CEC/PublishingImages/busy.gif">");
    var skips = skip * count;
    var numItmes = skip * (count + 1);
    numPlus = numItmes + 1;

    execute(
        "items?$orderby=Created desc&$select=ID,Title,Created&$top=" + numPlus,
        "GET",
        "GET",
        null,
      function (data, status, xhr) {
          $("#result").html("");
          var body = "";
          var length = data.d.results.length;
          if (length > numItmes) {
              $("#next").show();
          }
          else {
              $("#next").hide();
          }
          if (length <= 5) {
              $("#pre").hide();
              $("#next").hide();
          }
          if (length > 6) {
              $("#pre").show();
          }
          else {
              $("#pre").hide();
          }

          for (var i = 0; i < data.d.results.length; i++) {
              if (i >= skips && i < numItmes) {
                  var item = data.d.results[i];
                  var date = new Date(item.Created);
                  var str = date.toDateString();
                  var month = str.substr(4, 3);
                  dateFormat = formatDate(date, "dd yyyy hh:mm a");
                  var host = window.location.protocol + '//' + window.location.host;
                  var webUrl = _spPageContextInfo.webServerRelativeUrl;
                  var itemUrl = host + webUrl + "/Lists/News/DispForm.aspx" + "?ID=" + item.ID;
                  var sourceUrl = window.location.href;
                  if (sourceUrl.indexOf("&Source=") > 0) {
                      var sourceUrlR = sourceUrl.substring(0, sourceUrl.indexOf("&Source="));
                      sourceUrl = sourceUrl.replace(sourceUrlR, "");
                  }
                  else {
                      var sourceUrl = "&Source=" + window.location.href;
                  }
                  $("#result").append("<div class='item'><div class='head'><a  href='" + itemUrl + sourceUrl + "' title = '" + item.Title + "'>" + item.Title + "</a></div>" + "<div class='time'>" + month + " " + dateFormat + "</div>" + "</div>");
              }
          }

          $("#pre").one("click", pre);

          $("#next").one("click", next);
      },
      function (xhr, status, error) {
          $("#result").empty().text(error);
      });
}


function next() {
    count++;
    retriveListItem();
}

function pre() {
    if (count > 0) {
        count--;
        retriveListItem();
    }
}

function CheckPermissionOnWebForSpec() {
    context = new SP.ClientContext.get_current();

    web = context.get_web();

    this._currentUser = web.get_currentUser();

    context.load(this._currentUser);

    context.load(web, 'EffectiveBasePermissions');

    context.executeQueryAsync(Function.createDelegate(this, this.onSuccessMethodForSpec), Function.createDelegate(this, this.onFailureMethodForSpec));
}

function onSuccessMethodForSpec(sender, args) {
    if (web.get_effectiveBasePermissions().has(SP.PermissionKind.manageWeb)) {
        var specAccessManageLink = document.getElementById('newsLink');
        specAccessManageLink.classList.remove('hidden');

        var host = window.location.protocol + '//' + window.location.host;
        var webUrl = _spPageContextInfo.webServerRelativeUrl;
        var allItems = host + webUrl + "/Lists/News/AllItems.aspx";
        $(".manageLink").attr("href", allItems);
    }
}

function onFailureMethodForSpec(sender, args) {
    alert('error' + args.message);
}

$(document).ready(function () {
    ExecuteOrDelayUntilScriptLoaded(CheckPermissionOnWebForSpec, "sp.js");
    ExecuteOrDelayUntilScriptLoaded(retriveListItem, "sp.js");
});

５. 到此，大功告成！如有疑问，相互探讨。。。。