Need help to develop dynamic paging with javascript and Html

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

sharepoint0520Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Zakaria AcharkiAnalyst DeveloperCommented:
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 DeveloperCommented:
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.
sharepoint0520Author 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.
Active Protection takes the fight to cryptojacking

While there were several headline-grabbing ransomware attacks during in 2017, another big threat started appearing at the same time that didn’t get the same coverage – illicit cryptomining.

Zakaria AcharkiAnalyst DeveloperCommented:
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/
sharepoint0520Author 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 DeveloperCommented:
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

Zakaria AcharkiAnalyst DeveloperCommented:
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
sharepoint0520Author 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 DeveloperCommented:
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/
sharepoint0520Author 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.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Microsoft SharePoint

From novice to tech pro — start learning today.