如何在Sharepoint 2013中按客户端代码更改Share of Ppoint of Sharepoint列表视图？ [英] How to change the Paging of Sharepoint list view by client side code in Sharepoint 2013?

问题描述

b

 我们有sharepoint 2013和OOB sharepoint列表视图。 我们想用客户端编码更改列表视图的分页。我附加了之前和之后的图像。我想
使用脚本编辑器/内容编辑器Web部件来实现这一点。你可以帮我提供示例代码。

< p style ="margin-bottom：0px; padding-right：0px; font-size：15px">

解决方案

您需要覆盖默认的分页  并在 上使用此功能
页脚来呈现分页。

    （  function    （）    {  
   VAR  <跨度类=" PLN "风格=" 保证金：0像素;填充：0像素;边框：0像素;字体风格：继承;字体变：继承;字体重量：继承;行高：继承; FONT-FAMILY：继承;垂直对齐：基线;颜色：＃303336"> overrideCtx   =     {};   
 overrideCtx  。 模板    =     {};   
 overrideCtx  。 模板 。 项目    =     ItemOverrideFun  ;   
 overrideCtx  。 模板 。 页脚    =   pagingControl  ;   
   SPClientTemplates  。  TemplateManager  。  RegisterTemplateOverrides  （  overrideCtx  ）;   
  }）（）;   
 
  功能  pagingControl  （  ctx  ） < span class ="pln"style ="margin：0px;填充：0像素;边框：0像素;字体风格：继承;字体变：继承;字体重量：继承;行高：继承; FONT-FAMILY：继承;垂直对齐：基线;颜色：＃303336"> 
   {  
   VAR  <跨度类=" PLN "风格=" 保证金：0像素;填充：0像素;边框：0像素;字体风格：继承;字体变：继承;字体重量：继承;行高：继承; FONT-FAMILY：继承;垂直对齐：基线;颜色：＃303336"> firstRow   =   ctx  。  ListData  。  FirstRow  ;   
   VAR  <跨度类=" PLN "风格=" 保证金：0像素;填充：0像素;边框：0像素;字体风格：继承;字体变：继承;字体重量：继承;行高：继承; FONT-FAMILY：继承;垂直对齐：基线;颜色：＃303336"> lastRow   =   ctx  。  ListData  。  LastRow  ;   
   VAR  <跨度类=" PLN "风格=" 保证金：0像素;填充：0像素;边框：0像素;字体风格：继承;字体变：继承;字体重量：继承;行高：继承; FONT-FAMILY：继承;垂直对齐：基线;颜色：＃303336">上一页  =   ctx  。  ListData  。  PrevHref  ;   
   VAR  <跨度类=" PLN "风格=" 保证金：0像素;填充：0像素;边框：0像素;字体风格：继承;字体变：继承;字体重量：继承;行高：继承; FONT-FAMILY：继承;垂直对齐：基线;颜色：＃303336">  下一个    =   ctx  。  ListData  。  NextHref  ;   
   VAR  <跨度类=" PLN "风格=" 保证金：0像素;填充：0像素;边框：0像素;字体风格：继承;字体变：继承;字体重量：继承;行高：继承; FONT-FAMILY：继承;垂直对齐：基线;颜色：＃303336"> html   =    ""  ;   
  如果   （  firstRow  ！=     undefined     ||   lastRow  ！=    未定义    ||  上一页 ！=    未定义    ||    下一个   ！=    未定义 ）  
   {  
 html   + =  "< div class ='Paging'>"  ;   
 html   + =  上一页 ？   "< a class ='ms-commandLink ms-promlink-button ms-promlink-button-enabled'href ='"     +  上一页  +    "'>< span class ='ms-promlink-button-image'>< img class ='ms-promlink-button-left'src ='/ _ layouts / 15 / images /spcommon.png?rev=23'/>< / span>< / a>"    ：   ""  ;   
 html   + =    "< span class ='ms-paging'>< span class ='First'>"     +   firstRow   +    "< / span>  - < span class ='Last'>"     +   lastRow   +    "< / span>< / span>"  ;   
 html   + =    下一个   ？   "< a class ='ms-commandLink ms-promlink-button ms-promlink-button-enabled'href ='"     +    下一个    +    "'>< span class ='ms-promlink-button-image'>< img class ='ms-promlink-button-right'src ='/ _ layouts / 15 / images /spcommon.png?rev=23'/></span></a>"  ：   ""  ;   
 html   + =    "< / div>"  ;   
  }   
  返回  html  ;   
  }   
  功能    ItemOverrideFun  （  ctx  ） < span class ="pln"style ="margin：0px;填充：0像素;边框：0像素;字体风格：继承;字体变：继承;字体重量：继承;行高：继承; FONT-FAMILY：继承;垂直对齐：基线;颜色：＃303336">   {  
  }   

请参阅以下链接获取更多信息......

https://sharepoint.stackexchange.com/questions/239372/how-do-you-enable-paging-in-a-sharepoint-list-view-webpart-using-client-side-ren

希望这有帮助......

-------------------------------------------- -------------------------------------------------- -----------

请不要忘记"标记回复作为答案 "
如果他们帮助，还设置"喜欢"，这对我们来说是一个促进博客$ b的推动力$ b J

Hi,

 We have sharepoint 2013 with OOB sharepoint list view.  We would like to change the paging for list view with client side coding. I am attaching the after and before image. I would like to use script editor/content editor web part to implemented this. Can you please help me with sample code.

解决方案

Hi,

You need to Override the default Paging  and use this on the  footer to render the paging.

 (function () {
var overrideCtx = {};
overrideCtx.Templates = {};
overrideCtx.Templates.Item = ItemOverrideFun;
overrideCtx.Templates.Footer = pagingControl;
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
})();

 function pagingControl(ctx) 
 {
    var firstRow = ctx.ListData.FirstRow;
    var lastRow = ctx.ListData.LastRow;
    var prev = ctx.ListData.PrevHref;
    var next = ctx.ListData.NextHref;
    var html = "";
    if (firstRow != undefined || lastRow != undefined || prev != undefined || next != undefined) 
    {
        html +="<div class='Paging'>";
        html += prev ? "<a class='ms-commandLink ms-promlink-button ms-promlink-button-enabled' href='" + prev + "'><span class='ms-promlink-button-image'><img class='ms-promlink-button-left' src='/_layouts/15/images/spcommon.png?rev=23' /></span></a>" : "";
        html += "<span class='ms-paging'><span class='First'>" + firstRow + "</span> - <span class='Last'>" + lastRow + "</span></span>";
        html += next ? "<a class='ms-commandLink ms-promlink-button ms-promlink-button-enabled' href='" + next + "'><span class='ms-promlink-button-image'><img class='ms-promlink-button-right' src='/_layouts/15/images/spcommon.png?rev=23'/></span></a>" : "";
        html += "</div>";
    }
    return html;
}
function ItemOverrideFun(ctx) {
}

Please refer the below link for more info ...

https://sharepoint.stackexchange.com/questions/239372/how-do-you-enable-paging-in-a-sharepoint-list-view-webpart-using-client-side-ren

Hope this helps...

---------------------------------------------------------------------------------------------------------

Please don't forget to "mark the replies as answers" if they helped, also set "like" it’s a boost for us to keep blogging J

这篇关于如何在Sharepoint 2013中按客户端代码更改Share of Ppoint of Sharepoint列表视图？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！