help to write code to create dynamic paging by javascript / CSS

If you are using bootstrap pagination, there is a jquery plugin available at:
http://botmonster.com/jquery-bootpag/#.XCMq0lwzaUk

Hi,

You can go for this- http://flaviusmatis.github.io/simplePagination.js/ or http://pagination.js.org/?_sm_au_=iVV4Ztsk7sQjSpW6

Both have explained documentation also.

Hi,
 I tried to follow documentation but some reason it did not work out. I have total number of records , Items per page in a variable. Now my requirement is to add pagination based on those variable.

Can you please help me with sample code in html file?

What version of Jquery/bootstrap/css are you using?

Miguel,
  Currently for this request i am not using jquery/bootstrap but i am willing to use and will add source to t he page. Currently i have this function with TotalItems and itemPerPage.

function pagingControl(ctx)
 {

    var itemPerPage =10;
   
    var totalItems = $('tr#aggWPQ2 td.ms-vb2 b').html();
        totalItems = Number(totalItems.replace('Count= ', '') );
    var totalPages = Math.round(totalItems / itemPerPage );
      
      
  var html = "";

       html +="<div class='Paging'>";
      // Code here for pagination
        html += "</div>";

      }
  }  
   
    return html;

You could use simple pagination instead of constructing your own one.

In the HTML part add a new div for the pagfination, something like :

<div id="pagination-div" class="pagination"></div>

Select allOpen in new window

And in your JS part something like :

$('#pagination-div').pagination({
    pages: 10,
    cssStyle: 'light-theme',
    currentPage: 5
  });

Select allOpen in new window

They have more many options under the available options section :

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

The library requires the jQuery so you could include both jQuery and the simplePagination js files in the head section like :

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
<script src="https://flaviusmatis.github.io/simplePagination.js/jquery.simplePagination.js"></script>

Select allOpen in new window

If you're interested in the use of bootstrap them just let me know to provide a custom fiddle.

Hi Zakaria
 Here is my code to populate dynamic paging number without formatting. Now i have to formatting with any plug in or any script. I am new with jquery so will need more time to understand. I am attaching my current code and output  .

<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>

Select allOpen in new window

Output
Desire Output

Zakaria Acharki,
 Thank you so much for you help. I am able to add this style. I have couples of questions for you.
  1. As you know that i have to populate hyperlink dynamically , is it possible to use any plug in so i don't have to use any manually code for disable page or highlight current page or limit page number per page?
2. Is it possible to achieve the same functionality which other plugin has like (1 2 3 4 5 ....29 31), Highlight current page etc.

Hi brother,

Yes, that could be achieved with some adjustments using the simplePagination library, take a look to this simple :

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

The adjusted code is :

$(function() {
  var totalNumber = 1200;
  var itemsPerpage = 5;
  var view = "f0e50c0f-5f49-46f0-890d-fb6039528edd";

  $('#light-pagination').pagination({
    items: totalNumber,
    itemsOnPage: itemsPerpage,
    edges: 2,
    onPageClick: function(){
    	event.preventDefault();
      
      var page_number = event.target.href.split('#page-')[1];
      var p_ID = page_number===1?0:(itemsPerpage*page_number)-itemsPerpage;
      var pageFirstRow = page_number===1?1:((itemsPerpage*page_number)-itemsPerpage)+1;
      var href = "/?Paged=TRUE&p_ID="+p_ID+"&PageFirstRow="+pageFirstRow+"&View="+view;
      
      window.location.href = href;
    }
  });
});

Select allOpen in new window

Brother,
 First of all thanks a lot for your help and quick support. I will take look this code and implement. Can we merge all code together in js file with all required reference so i can add to script editor or content editor webpart? i am also attaching my current code which i added to sharepoint page by  script editor webpart you suggested. I would like to use your code (http://jsfiddle.net/z_acharki/ezch5wfj/) for pagination style.
 

<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=2f1013be-289f-414b-a3e4-9e2f7836fb3e";   
              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>

<style>
.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;
}
</style>

Select allOpen in new window

Current Output

Thanks Again.

Thank you Zakaria. Your solution worked.

You're welcome bro, happy to help.