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;
width: 200px;
height: 200px;
text-align: left;
margin-left: 5px;
margin-right: 5px;

}

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

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

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

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

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

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

#newsLink
{
width: 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");
});

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