pagination : Uncaught TypeError: Cannot set property 'className' of null

Question

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"> &#171 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 &#187;</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

Answer 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"> &#171 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 &#187;</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/

Answer 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