- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
<强> PAGINATION DEMO
我正在使用handlebars.js 和 simplePagination.js 开发分页
数据从 JSON 加载并使用handlebars.js 显示
现在我必须将 JSON 数据映射到分页,在哪里进行?除此之外,官方网站上没有太多文档“http://flaviusmatis.github.io/simplePagination.js”
请求您的帮助。非常感谢任何意见/建议。
JS 代码:
$(function () {
function loadPosts(posts) {
$('#posts').empty();
posts.each(function () {
var source = $("#post-template").html();
var template = Handlebars.compile(source);
var context = {
author: this.data.author,
domain: this.data.domain,
id: this.data.id,
ups: this.data.ups,
downs: this.data.downs,
num_comments: this.data.num_comments,
subreddit: this.data.subreddit,
title: this.data.title,
url: this.data.url,
permalink: this.data.permalink,
};
var html = template(context);
$('#posts').append(html);
});
}
$.ajax({
dataType: 'json',
url: "https://www.reddit.com/.json",
success: function (response_json) {
// data = $(response_json.records.page);
data = $(response_json.data.children);
dataCount = data.length;
//console.log(data);
/* if (dataCount > opts.pageMax) {
paginate(pageCount);
posts = data.slice(0, opts.pageMax);
console.log(posts)
} else {
posts = data;
}*/
//loadPosts(posts);
loadPosts(data);
$('.pagination').pagination({
items: dataCount, // json length count
itemsOnPage: 4
});
$('.pagination').pagination('selectPage', 1);
//$('.pagination').pagination('prevPage', dataCount);
//$('.pagination').pagination('nextPage', dataCount);
//$('.pagination').pagination('getPagesCount', dataCount);
//$('.pagination').pagination('getCurrentPage', dataCount);
$('.pagination').pagination('updateItems', dataCount);
}
});
});
最佳答案
在设置分页
之前,只需隐藏其他项目items.slice(4).hide();
$("#light-pagination").pagination({
items: 25,
itemsOnPage: 4,
cssStyle: "light-theme",
// This is the actual page changing functionality.
onPageClick: function(pageNumber) {
// We need to show and hide `tr`s appropriately.
var showFrom = 4 * (pageNumber - 1);
var showTo = showFrom + 4;
items.hide()
.slice(showFrom, showTo).show();
}
});
下面是工作示例
$(function() {
function loadPosts(posts) {
$('#posts').empty();
posts.each(function() {
var source = $("#post-template").html();
var template = Handlebars.compile(source);
var context = {
author: this.data.author,
domain: this.data.domain,
id: this.data.id,
ups: this.data.ups,
downs: this.data.downs,
num_comments: this.data.num_comments,
subreddit: this.data.subreddit,
title: this.data.title,
url: this.data.url,
permalink: this.data.permalink,
};
var html = template(context);
$('#posts').append(html);
});
}
$.ajax({
dataType: 'json',
url: "https://www.reddit.com/.json",
success: function(response_json) {
// data = $(response_json.records.page);
data = $(response_json.data.children);
dataCount = data.length;
loadPosts(data);
var items = $(".score-right");
items.slice(4).hide();
$("#light-pagination").pagination({
items: 25,
itemsOnPage: 4,
cssStyle: "light-theme",
// This is the actual page changing functionality.
onPageClick: function(pageNumber) {
// We need to show and hide `tr`s appropriately.
var showFrom = 4 * (pageNumber - 1);
var showTo = showFrom + 4;
// We'll first hide everything...
items.hide()
// ... and then only show the appropriate rows.
.slice(showFrom, showTo).show();
}
});
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>
<script src="https://flaviusmatis.github.io/simplePagination.js/jquery.simplePagination.js"></script>
<link href="https://flaviusmatis.github.io/simplePagination.js/simplePagination.css" rel="stylesheet">
<div id="light-pagination" class="pagination light-theme simple-pagination"></div>
<div id="posts"></div>
<script id="post-template" type="text/x-handlebars-template">
<div class="score-structural score-column2-wideright search-listings post">
<div class="score-right">
<h4>{{record_count}}</h4>
<h5 style="z-index: 1;">
<a href="#"> {{ title }} </a>
</h5>
<p style="z-index: 1;"> {{ desc }} </p>
</div>
</div>
</script>
您需要隐藏初始数据
关于javascript - 使用 simplePagination.js 显示 json 数据?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45209262/
如何使用 simplePagination.js jQuery plugin与服务器端?我的页面(不是表格)加载了很多 div,并且我正在对这些“div”进行分页。但是,在某些情况下,我会分页很多内容
我正在尝试使用 simplePagination在我的代码上。 (我正在使用 MVC4 C# 进行开发) 假设我有这一堆代码
函数 simplePaginate() 在直接调用 where() 函数后开始工作: $posts = $userA->Posts()->simplePaginate(10)->get(); User
函数 simplePaginate() 在直接调用 where() 函数后开始工作: $posts = $userA->Posts()->simplePaginate(10)->get(); User
我已经按照作者页面的说明进行操作: http://flaviusmatis.github.io/simplePagination.js/ 从这里: How to use SimplePaginatio
这是我的 html 和 php 代码: One
var search; var searchdiv = $("#searchdiv"); var perPage = 3; searchdiv.pagination({ itemsOnPage:
PAGINATION DEMO 我正在使用handlebars.js 和 simplePagination.js 开发分页 数据从 JSON 加载并使用handlebars.js 显示 现在我必须将
使用表单在 header.php 文件中创建 MySQL 数据库的 php 搜索。尝试将 simplePagination.js 与 php 一起使用。我能够正确计算结果数量并显示适当数量的页面链接。
我是一名优秀的程序员,十分优秀!