- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试分页来显示数据。总记录数为 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 < 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;
}
}
这是我的 jsFiddle 。
您能否告诉我如何解决浏览器控制台中出现的问题?
Uncaught TypeError: Cannot set property 'className' of null
最佳答案
这是您的解决方案,希望对您有所帮助......:)
// 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 链接 https://jsfiddle.net/97238eyz/1/
关于jquery - 分页: Uncaught TypeError: Cannot set property 'className' of null,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35777911/
我有一组称为 nets 的整数集,我正在尝试对其进行迭代以确定是否已将来自或来自的整数添加到现有集合中;如果是这样,我将它们添加到现有集合中(这是为了跟踪电网中所有短路的组合)。 但是,我无法让 se
很奇怪:A 是一个集合,B 是一个集合的集合: Set A=new HashSet(); Set > B=new HashSet>(); 我给他们加了东西,输出 System.out.println
在 Agda 中,forall 的类型以这样的方式确定以下所有类型都是Set1 (其中 Set1 是 Set 的类型, A 的类型是 Set ): Set → A A → Set Set → Set
在 haskell 中我可以写一个函数 f where f :: Set a -> Set a -> Set a 如果我采用 Set Int 类型的两组 s1 和 s2,然后执行 f s1 s2 它将
在使用 Spring 时,我遇到了一个奇怪的问题。我有一个类,它接受一个集合作为输入,因为该类是底层框架的,所以我无法更改它。这是它的声明 private Set evaluate; public S
我是流的新手,我想通过将流操作应用于其条目集来修改 map ,但由于编译错误我无法这样做。 下面的代码只是创建了一个新的 map 对象并为其分配了一些整数值。然后它尝试通过在其条目集上应用流操作来删除
无论我看什么,我都会看到集合的输入是这样完成的: Set set = new HashSet(); 但是,我像这样定义我的集合 Set set = new HashSet(); 而且我仍然进行类型检查
我想对于 set -e 我可以捕获信号,但其他的我不知道。 最佳答案 为了完整性: set -e:如果命令失败则退出 set -u:如果在设置之前引用变量,则会出现错误 set -x:显示运行的命令
Set 维护唯一记录,并在尝试复制现有元素时更新现有记录。 考虑以下两种情况。您认为两者之间哪一个代码更快、更高效? 场景 1:使用 addAll() Set uniqueSet = new Hash
我在 Fedora 上做这个 问题: (sandbox)[root@localhost mysite]# django-admin.py runserver Error: Could not impo
https://codeforces.com/contest/1435/submission/96757666->使用set.upper_bound() https://codeforces.com/
使用 MySQL,我已将连接字符集设置为 UTF-8: SET NAMES 'utf8mb4'; SET CHARACTER SET 'utf8mb4'; 这样我就能以 UTF-8 格式返回所有内容,
在 Spring 3 MVC 中,我有一个称为 SettingsController 的 Controller ,它具有用于显示用户列表的 displayUsers()、saveUser() 和 de
我正在创建一个使用语法的程序,并查看该语法是否为 LL (1)。我想使用模块Set,但是我不知道如何进行,当然set的元素的类型是char,你能帮忙吗? 最佳答案 此答案假设您已经知道如何确定语法是否
好的,所以我重新整理了这篇文章,使其更容易理解(对所有的 Pastebin 感到抱歉,但堆栈溢出在代码格式化方面很愚蠢) 请注意,我不打算存储如下所述的大量数据。我使用我所说的数量的主要原因是为了尽可
我有一个密码,我保存在 Settings.settings 文件中并且我希望该部分被加密。 This是我得到的提示,但我真的不知道如何应用它。 谁能给我一个关于如何加密这样的密码的想法? 最佳答案 您
我在网上搜索并找到了如何在设置中添加特定的自定义数据类型。 我自己插入数据,而不是在程序运行时通过代码插入数据。我的问题是如何将自定义数据类型添加到设计器中的组合框。现在我想通了,需要建议,如何添加这
我一直在尝试将自定义类的自定义集合添加到我的 winforms 项目的应用程序设置中,我觉得我已经尝试了六种不同的方法,包括 this way , this way , this way , 和 th
在 Visual Studio 2008 中调试我的项目时,我的 Settings.settings 文件在构建之间不断重置。有没有办法防止这种情况发生? 谢谢。 最佳答案 好的,我找到了我真正想要的
关闭。这个问题不符合 Stack Overflow guidelines 。它目前不接受答案。 想改善这个问题吗?更新问题,以便堆栈溢出为 on-topic。 4年前关闭。 Improve this
我是一名优秀的程序员,十分优秀!