Sharepoint Client-side HTML Table Pagination using JavaScript

Client-side pagination to large Html table that you can specify the number of rows to show per page.

Html Code : 

script src="/**************/New/jquery-1.10.1.min.js">/script>
script src="/*************/Untitled.js">/script>
style>
#table_id{
border:solid 1px #0072C6;
border-collapse: separate;
}
#table_id #tab-head{
background-color:#005C89;
color:#fff;
}
#table_id #tab-head th {
    padding: 5px;
    font-size: 14px;
    font-weight: bold;
}
#table_id #content .loop-quick-links:hover{
background-color:#f5f5f5
}
#table_id #content .loop-quick-links{
/*background:#E1EEF4;*/
font-size:small;
}
#table_id #content .loop-quick-links td {
/*background:#E1EEF4;*/
padding: 5px;    
}
#table_id #content .loop-quick-links #cntrlink{
text-align:center;
}
#table_id #content .loop-quick-links td a {
    background: #8CA2B0;
    padding: 3px;
    color: #fff;
}
#table_id #content .loop-quick-links td a span{
margin:10px;
font-size:14px;
}
.pg-normal {
color: #000000; 
font-size: 15px; 
cursor: pointer; 
background: #D0B389; 
padding: 2px 4px 2px 4px;            
}
.pg-selected {
color: #fff; 
font-size: 15px; 
background: #000000; 
padding: 2px 4px 2px 4px;            
}

/style>
div>
    table id="table_id" class="display" cellspacing="0" width="80%" align="center">  
        thead id="tab-head">  
            tr>  
                th style="display:none">Employee Name/th>  
                th style="width:120px;">Project Name/th>  
                th style="width:120px;">Task Name/th>  
                th style="width:100px;">Created Date/th>  
                th style="width:100px;">Planned Hours/th>  
                th style="width:100px;">Actual Hours/th>
                th style="width:100px;">Notes/th>
th style="display:none;">Billing Status/th>

/tr>             
        /thead> 
        tbody id="content">/tbody> 
        tfoot>        
        /tfoot>  
    /table>   
    div id="pageNavPosition" style="padding-top: 20px" align="center">/div> 
   script>
        var pager = new Pager('table_id', 11);    
  pager.init();
pager.showPageNav('pager', 'pageNavPosition');
pager.showPage(1);
/script>    


JS File Code:

ExecuteOrDelayUntilScriptLoaded(Getdata, "sp.js"); function Getdata() { var Userid = _spPageContextInfo.userId; var siteUrl = _spPageContextInfo.siteAbsoluteUrl+'/***************/TimeSheet/'; //Subsite URL var context = new SP.ClientContext(siteUrl); var web = context.get_web(); var list = web.get_lists().getByTitle('TimeSheetTranscation'); //List Name var myquery = new SP.CamlQuery(); myquery.set_viewXml('View>Query>Where>Eq>FieldRef Name=\'EmpID\'/>Value Type=\'Number\'> '+ Userid +'/Value>/Eq>/Where> OrderBy>FieldRef Name=\'ID\' Ascending=\'False\'/>/OrderBy>/Query>RowLimit>1000000/RowLimit>/View>'); myItems = list.getItems(myquery); context.load(myItems); context.executeQueryAsync(Function.createDelegate(this, this.success_Getdata), Function.createDelegate(this, this.failed_Getdata)); } function success_Getdata() { try{ var ListEnumerator = this.myItems.getEnumerator(); var text = 'tr>th style="display:none">input type="text" id="txtEmployeeId">input type="text" id="txtEmployee">/th>th>select id="ProjectName" onchange="ProjectChange()">/select>/th>' + 'th>select id="TaskName" onchange="TaskChange()">/select>/th>' + 'th>input type="text" id="txtdate" style="width:70px;">/td>' + 'th align="center">select id="PlnHours" style="width:30px;">/select>/th>' + 'th align="center">input type="number" id="txtah" min="0" max="24" style="width:30px;">/th>' + 'th>input type="text" id="txtNotes" style="width:70px; height:30px;">/th>' + 'th style="display:none">select id="BillingStatus">option>Non Billable/option>option>Billable/option>/select>/th>/tr>'; while (ListEnumerator.moveNext()) { var currentItem = ListEnumerator.get_current(); var EmployeeName = currentItem.get_item('EmployeeName'); var ProjectName= currentItem.get_item('ProjectName'); var TaskName= currentItem.get_item('TaskName'); var DateCreated= new Date(currentItem.get_item('DateCreated')); var date=DateCreated.getDate(); var month = DateCreated.getMonth() + 1; var year=DateCreated.getFullYear(); var DateCreated=month+'/'+date+'/'+year; //var PlannedHours= currentItem.get_item('PlannedHours'); var ActualHours= currentItem.get_item('ActualHours'); var BillingStatus= currentItem.get_item('BillingStatus'); var Notes = currentItem.get_item('Notes'); var id=currentItem.get_item('ID'); text += 'tr class="loop-quick-links" id='+ id +'>'; text += ('td style="display:none">' + EmployeeName + '/td>' + 'td id ="PN">' + ProjectName + '/td>' + 'td id="TN">' + TaskName+ '/td>' + 'td id="DC">' + DateCreated+ '/td>' + 'td align="center">' + ActualHours+ '/td>' + 'td>'+ Notes +'/td>' + 'td style="display:none">' + BillingStatus+ '/td>' + 'td>input type="button" id="btn_update" value="Update" onclick="divshow('+ id +');">input type="button" id="btn_delete" value="Delete" onclick="getConfirmation('+ id +');">/td>/tr>'); } fieldNameElement = document.getElementById('content'); fieldNameElement.innerHTML = text; pager.init(); pager.showPageNav('pager', 'pageNavPosition'); pager.showPage(1); } catch(err) { alert(err.message); } } function failed_Getdata(sender, args) { alert("failed. Message:" + args.get_message()); } function Pager(tableName, itemsPerPage) { this.tableName = tableName; this.itemsPerPage = itemsPerPage; this.currentPage = 1; this.pages = 0; this.inited = false; this.showRecords = function(from, to) { var rows = document.getElementById(tableName).rows; for (var i = 1; i rows.length; i++) { if (i from || i > to) rows[i].style.display = 'none'; else rows[i].style.display = ''; } } this.showPage = function(pageNumber) { if (! this.inited) { alert("not inited"); return; } var oldPageAnchor = document.getElementById('pg'+this.currentPage); oldPageAnchor.className = "pg-normal"; this.currentPage = pageNumber; var newPageAnchor = document.getElementById('pg'+this.currentPage); newPageAnchor.className = "pg-selected"; var from = (pageNumber - 1) * itemsPerPage + 1; var to = from + itemsPerPage - 1; this.showRecords(from, to); } this.prev = function() { if (this.currentPage > 1) this.showPage(this.currentPage - 1); else{ alert('There is no Previous Item'); } } this.next = function() { if (this.currentPage this.pages) { this.showPage(this.currentPage + 1); } else{ alert('There is no next Item'); } } this.init = function() { var rows = document.getElementById(tableName).rows; var records = (rows.length - 1); this.pages = Math.ceil(records / itemsPerPage); this.inited = true; } this.showPageNav = function(pagerName, positionId) { if (! this.inited) { alert("not inited"); return; } var element = document.getElementById(positionId); var pagerHtml = 'span onclick="' + pagerName + '.prev();" class="pg-normal"> Prev /span> '; for (var page = 1; page = this.pages; page++) pagerHtml += 'span id="pg' + page + '" class="pg-normal" onclick="' + pagerName + '.showPage(' + page + ');">' + page + '/span> '; pagerHtml += 'span onclick="'+pagerName+'.next();" class="pg-normal"> Next /span>'; element.innerHTML = pagerHtml; } }