分页：未捕获TypeError：无法将属性’className’设置为null

我正在尝试分页来显示数据。 存在的记录总数是19，我想最初显示3条记录。

这是我的分页代码：

// 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  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 = ' &#171 Prev  | '; for (var page = 1; page <= this.pages; page++) pagerHtml += '' + page + ' | '; pagerHtml += ' Next »'; element.innerHTML = pagerHtml; } } 

这是我的jsFiddle 。

您能告诉我如何解决浏览器控制台中出现的问题吗？

未捕获的TypeError：无法将属性’className’设置为null

Answer 1

这是你的解决方案，希望这有帮助.. 🙂

 // 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 += ''; tableContent += '' + this.information + ''; tableContent += 'View on map'; tableContent += 'In Progress'; tableContent += 'Delete'; tableContent += ''; }); // 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 = ' « Prev  '; for (var page = 1; page <= this.pages; page++) pagerHtml += '' + page + ' '; pagerHtml += ' Next »'; 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; } 

  
 
 
ID
 
Information
 
Status
 
Actions
 
 
 
 

Answer 2

看来document.getElementById('pg' + this.currentPage); 没有回来任何东西。

以下代码似乎不正确：

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

因为在第二个getelementById您正在检索与以前相同的项目