I am trying to pagination to display data. The total number of records present are 19, I wanted to display 3 records initially.
This is my pagination code:
// Instantiate pagination after data is available pager = new Pager('results', 3); pager.init(); pager.showPageNav('pager', 'pageNavPosition'); pager.showPage(1); // pagination object codes. 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 = total_records; // i starts from 1 to skip table header row 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); } this.next = function () { if (this.currentPage < this.pages) { this.showPage(this.currentPage + 1); } } this.init = function () { var rows = total_records; 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; } } This is my jsFiddle.
Could you please let me know how to resolve the issue coming in browser console?
Uncaught TypeError: Cannot set property 'className' of null
2 Answers
Answers 1
Here is your solution, hope this helps..:)
// For each item in our JSON, add a table row and cells to the content string var total_records = 19; var data = [{ id: 1, name: 'cell1', information: 'First Row' }, { id: 2, name: 'cell2', information: 'Second Row' }, { id: 1, name: 'cell1', information: 'First Row' }, { id: 2, name: 'cell2', information: 'Second Row' }, { id: 1, name: 'cell1', information: 'First Row' }, { id: 2, name: 'cell2', information: 'Second Row' }, { id: 1, name: 'cell1', information: 'First Row' }, { id: 2, name: 'cell2', information: 'Second Row' }, { id: 2, name: 'cell2', information: 'Second Row' }, { id: 1, name: 'cell1', information: 'First Row' }, { id: 2, name: 'cell2', information: 'Second Row' }, { id: 2, name: 'cell2', information: 'Second Row' }, { id: 1, name: 'cell1', information: 'First Row' }, { id: 2, name: 'cell2', information: 'Second Row' }, { id: 1, name: 'cell1', information: 'First Row' }, { id: 2, name: 'cell2', information: 'Second Row' }, { id: 1, name: 'cell1', information: 'First Row' }, { id: 2, name: 'cell2', information: 'Second Row' }, { id: 2, name: 'cell2', information: 'Second Row' } ]; var tableContent = ""; $.each(data, function() { tableContent += '<tr>'; tableContent += '<td><a href="#" class="linkshowuser" rel="' + this.name + '" title="Show Details">' + this.information + '</a></td>'; tableContent += '<td><button onclick="viewLocationOnMap()">View on map</button></td>'; tableContent += '<td>In Progress</button></td>'; tableContent += '<td><a href="#" class="linkdeleteitem" rel="' + this._id + '">Delete</a></td>'; tableContent += '</tr>'; }); // Inject the whole content string into our existing HTML table $('#results').append(tableContent); // Instantiate pagination after data is available pager = new Pager('results', 3); pager.init(); pager.showPageNav('pager', 'pageNavPosition'); pager.showPage(1); // pagination object codes. 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('results').rows; // i starts from 1 to skip table header row 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); } this.next = function() { if (this.currentPage < this.pages) { this.showPage(this.currentPage + 1); } } this.init = function() { var rows = total_records; var records = (rows - 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; } }table { border: 1px solid lightgray; } th { border: 1px solid #2196F3; padding: 5px; background: #03A9F4; color: #fff; } th, td { border: 1px solid lightgray; padding: 5px; } .pg-normal { color: black; font-weight: normal; text-decoration: none; cursor: pointer; } .pg-selected { color: black; font-weight: bold; text-decoration: underline; cursor: pointer; } div#pageNavPosition { display: inline-block; user-select: none; -moz-user-select: none; -webkit-user-select: none; margin-top: 10px; } div#pageNavPosition span { padding: 5px 9px; background: #E0E0E0; margin: 1px; display: inline-block; color: #eee; border-radius: 5px; text-transform: capitalize; } div#pageNavPosition span.pg-normal { color: #404040; font-weight: normal; text-decoration: none; cursor: pointer; } div#pageNavPosition span.pg-normal:hover { color: white; background: #9E9E9E; text-decoration: underline; cursor: pointer; } div#pageNavPosition span.pg-selected { color: white; font-weight: normal; cursor: pointer; background: #1C78C1; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" <!-- Latest compiled and minified CSS --> < link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity = "sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin = "anonymous" > <!-- Optional theme --> < link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity = "sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin = "anonymous" > <!-- Latest compiled and minified JavaScript --> < script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity = "sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin = "anonymous" > </script> <table id="results"> <tr> <th>ID</th> <th>Information</th> <th>Status</th> <th>Actions</th> </tr> </table> <div id="pageNavPosition"></div>Fiddle Link https://jsfiddle.net/97238eyz/1/
Answers 2
It seems that document.getElementById('pg' + this.currentPage); isn't returning anything.
And the following piece of code doesn't seem to be correct:
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'; Because in the second getelementById you are retrieving the same item as before
0 comments:
Post a Comment