Need help to develop dynamic paging with javascript and Html

sharepoint0520
sharepoint0520 used Ask the Experts™
on
Experts,
 I am looking for some help here as i am new in sharepoint client side developing. I have one page with sharepoint list view and i need to display
customize paging on the page footer. i have override the current paging with client side coding.
Now i have to use some logic with html/css to create dynamic paging by total and number of raw . Below screenshot is the example of paging. Any help is really appreciated.
 Proposed Paging
Here is the code.
 
<script type="text/javascript">
   (function () {
var overrideCtx = {};
overrideCtx.Templates = {};
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;
 // Getting Total number of records
    var count = $('tr#aggWPQ2 td.ms-vb2 b').html();
    count = count.replace('Count=&nbsp;','');
	

    
  
    var html = "";
    if(firstRow = 1)
  {
    if(lastRow < count)
 	 {
		 
          var a=(count % lastRow) + 1;
		   html +="<div class='Paging'>";
		    html +="Previous 1 ";
		 
          for(var i=2;i<a;i++)
          {
			  
            html+= "<a href='" + next + "'>i </a>";
			
          }  
            html += "</div>";		  
 	 }
     else
	{
        console.log("S");
        html +="<div class='Paging'>";
        html += "<a href='1'></a>";
        html += "</div>";

	}
  }  
    
    return html;
}
</script>

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Zakaria AcharkiAnalyst Developer
Distinguished Expert 2018

Commented:
Hi, I have zero knowledge in SharePoint but I'll try to help you in the JS code, the first thing it will be better to parse the count if you want to use it in conditions so you need to use `Number()` function like :

count = Number( count.replace('Count=&nbsp;', '') );

Open in new window


And I see that you have got a small typo in the first conditional `if` where you must use more than one equal like :

if(firstRow == 1)

Open in new window

Zakaria AcharkiAnalyst Developer
Distinguished Expert 2018

Commented:
Could you please explain more what firstRow and lastRow are? and where's the information that holds the limit per page (I mean how many rows in every page)?

And let me know if you're able to use any pagination JS library.

Author

Commented:
Zakaria Acharki,
 Don't worry about sharepoint for now.  I have total number of items and total items per page set up in a veritable. Now i need to create dynamic paging with js code or using any plug in.

 function pagingControl()
 {
    var firstRow = 1;
    var totalNumber = 1200;
    var itemsPerpage = 20;

 
    var html = "";
     // Code
   
    return html;
}

Let me know if you need more information. Thank you so much for your help.
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Zakaria AcharkiAnalyst Developer
Distinguished Expert 2018

Commented:
Hi, here is a sample using jquery.simplePagination.js library with the bootstrap style :

$(function() {
  $('#light-pagination').pagination({
    pages: 40,
    cssStyle: 'light-theme',
    currentPage: 5,
    onPageClick: function(){
      $('#light-pagination ul').closest('ul').addClass('pagination');
    },onInit: function(){
      $('#light-pagination ul').closest('ul').addClass('pagination');
    }
  });
})

Open in new window


Take a look at the available options :

http://flaviusmatis.github.io/simplePagination.js/

And here is a live working fiddle to  play with :

http://jsfiddle.net/z_acharki/u15r06gc/

Author

Commented:
Hi,
 Thank you.I will try those link. Here is my full code to create dynamic links. I will need to apply some style or plug in.

 
<script type="text/javascript">
   (function () {
var overrideCtx = {};
overrideCtx.Templates = {};
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 totalItems = $('tr#aggWPQ2 td.ms-vb2 b').html();
        totalItems = Number(totalItems.replace('Count=&nbsp;', '') );
    var totalPages = (totalItems / 5) +1;  // Mod function 
	
	
	// "?Paged=TRUE&p_ID=10&PageFirstRow=11&View=f0e50c0f-5f49-46f0-890d-fb6039528edd"

  var html = "";
		 
          html +="<div class='Paging'>";
          html += prev ? "<a href='" + prev + "'><span><&nbsp;Previous Page</span></a>" : "<a href='" + prev + "'>Previous Page</a>";
	
          var pageID =  0;
          var pageFirstRow = pageID + 1;
          for(var i=1;i<=totalPages;i++)
          {               
              
              var nextPage =  "?Paged=TRUE&p_ID="+pageID+"&PageFirstRow=" +pageFirstRow+"&View=f0e50c0f-5f49-46f0-890d-fb6039528edd";   
              html+= "<a href='" + nextPage + "'>" +i+ "</a>";
              pageID+= 5;  
       	      pageFirstRow = pageID + 1; 
			
          } 
           
html += next ? "<a href='" + next + "'><span>Next Page&nbsp;></span></a>" : "<a href='" + prev + "'>Next Page</a>";

             html += "</div>";		  
    return html;
}
</script>

Open in new window

Zakaria AcharkiAnalyst Developer
Distinguished Expert 2018

Commented:
Since you're generating your own format you need an adjusted CSS for it, you can't use the of style another pagination library. Here is a bootstrap-like style :

https://jsfiddle.net/z_acharki/sxbf8jqh/

Adjusted CSS :

.Paging {
  margin: 10px;
}

.Paging>a:first-child{
  margin-left: 0;
  border-bottom-left-radius: 4px;
  border-top-left-radius: 4px;
}
.Paging>a:last-child{
  margin-left: 0;
  border-bottom-right-radius: 4px;
  border-top-right-radius: 4px;
}

.Paging a{
  display: inline-block;
  position: relative;
  float: left;
  padding: .5rem .75rem;
  margin-left: -1px;
  color: #0275d8;
  text-decoration: none;
  background-color: #fff;
  border: 1px solid #ddd;
}

.Paging a:focus,
.Paging a.active,
.Paging a.active:focus,
.Paging a.active:hover {
  z-index: 2;
  color: #fff;
  cursor: pointer;
  background-color: #428bca;
  border-color: #428bca;
}

.Paging a:hover{
  background-color: #eee;
}

Open in new window

Analyst Developer
Distinguished Expert 2018
Commented:
You could try this style too:

http://jsfiddle.net/z_acharki/a3n4uk5t/

CSS :

.Paging a{
  display: inline-block;
  position: relative;
  float: left;
  padding: .5rem .75rem;
  margin-left: -1px;
  color: #0275d8;
  text-decoration: none;
  background-color: #eee;
  border: 0px solid #ddd;
  line-height: 20px;
}

.Paging>a i{
    font-size: 20px;
    vertical-align: text-top;
    line-height: 19px;
}
    
.Paging>a:first-child i{
    margin-right: 5px;
}

.Paging>a:last-child i {
    margin-left: 5px;
}

.Paging a:focus,
.Paging a.active,
.Paging a.active:focus,
.Paging a:hover {
  z-index: 2;
  cursor: pointer;
  background-color: #e6e6e6;
  border-color: #428bca;
}

Open in new window

Author

Commented:
Hi,
 I have reviewed your link (http://jsfiddle.net/z_acharki/u15r06gc/). That's what i am looking for. Is it possible to achieve this with my code? Or is it possible use your code with update hyperlink to the page number?

Please advice. Thank you so much for your help.
Zakaria AcharkiAnalyst Developer
Distinguished Expert 2018
Commented:
Hi, you're welcome,

Here is an update of the fiddle trying to adjust the hyperlinks to your custom format :

http://jsfiddle.net/z_acharki/ezch5wfj/

Author

Commented:
Zakaria Acharki,
 Thank you so much. As i am new in this world and since i am using sharepiont script editor web part is it possible to add all this code to js or txt file with all reference needed? I am also trying to figure it out to use separate files.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial