Javascript 如何在list.js分页中使用“下一个”和“上一个”按钮而不是数字？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34502583/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use "next" and "previous" button instead of numbers in list.js pagination?
提问by user3549524
I have a table with many rows. Therefore I decided to use list.js(pagination). However I don't want numbers as pages but a nextand previousbutton which I can style individually (or let bootstrap to the job).
我有一个有很多行的表。因此我决定使用list.js（分页）。但是我不想要数字作为页面，而是一个next和previous按钮，我可以单独设置样式（或让引导程序完成工作）。
<ul class="pager">
<li>
<a class="" href="#">Previous</a>
</li>
<li>
<a class="" href="#">Next</a>
</li>
</ul>
var list = new List('item-table', {
valueNames: ['item'],
page: 10,
plugins: [ListPagination({})]
});
Is this possible with the library (I haven't found anything useful in the documentation) or do I have to use something else?
图书馆可以做到这一点（我在文档中没有找到任何有用的东西）还是我必须使用其他东西？
I tried the solution from roll. I get an error now saying Cannot read property 'childNodes' of undefined. This error disappers when I add <ul class="pagination"></ul>. However when trying to access the show method of the list I get an error again: Cannot read property 'show' of undefined
我尝试了 roll 的解决方案。我现在收到一个错误说Cannot read property 'childNodes' of undefined. 当我添加<ul class="pagination"></ul>. 但是，当尝试访问列表的 show 方法时，我再次收到错误消息：Cannot read property 'show' of undefined
New JS-code
新的 JS 代码
$(document).ready(function() {
//var options = {
// valueNames: ['einheit'],
// page: 13,
// plugins: [ListPagination({})]
//}
var list = new List('item-table', {
valueNames: ['item'],
page: 10,
plugins: [ListPagination({})]
});
var i = 1;
$('.next').on('click', function () {
console.log("next");
i++;
list.show(i, 10);
});
$('.prev').on('click', function () {
console.log("prev");
i--;
list.show(i, 10);
});
});
HTML Code
HTML代码
<div id="item-table">
<table class="table">
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody class="list">
<tr class="item">
</tr>
<!-- loads of items here -->
</tbody>
</table>
<ul class="pager">
<li class="next">
<a href="#">Next</a>
</li>
<li class="prev">
<a href="#">Previous</a>
</li>
</ul>
</div>
回答by roll
Shure. Reading the documentation you just have to create your buttons and with jquery do the trick
舒尔。阅读文档，您只需要创建按钮并使用 jquery 即可解决问题
http://www.listjs.com/docs/list-api
http://www.listjs.com/docs/list-api
var i = 1;
$('.next').on('click', function(){
i++;
listObj.show(i, 3);
})
$('.prev').on('click', function(){
i--;
listObj.show(i, 3);
})
Let me know if it works.
让我知道它是否有效。
回答by Matt M.
Javascript isn't exactly my strength and it's probably a little late but here's what I put together to prevent the next/prev buttons from showing up when they aren't applicable. Hopefully somebody will find it useful.
Javascript 并不是我的强项，它可能有点晚了，但这是我放在一起的内容，以防止下一个/上一个按钮在不适用时出现。希望有人会发现它有用。
jQuery(document).ready(function() {
var page_quantity = 10,
options = {
valueNames: ['title', 'disease', 'source'],
page: page_quantity
},
articleList = new List('tbp-resources', options),
list_count = articleList.items.length,
list_i = 0;
// Next/Previous page buttons
jQuery('.js-list-next').on('click', function(event){
event.preventDefault();
list_i++;
var new_floor = (list_i * page_quantity + 1);
if((new_floor + page_quantity) >= list_count){
jQuery(this).toggleClass('hide');
}
jQuery('.js-list-prev.hide').toggleClass('hide');
articleList.show((list_i * page_quantity + 1), 10);
});
jQuery('.js-list-prev').on('click', function(event){
event.preventDefault();
list_i--;
if(list_i < 1) {
jQuery(this).toggleClass('hide');
}
jQuery('.js-list-next.hide').toggleClass('hide');
articleList.show((list_i * page_quantity + 1), 10);
});
});
回答by Athman
// Setup click event listeners for your buttons, (let me use jQuery)
$('li').on('click', function(){
// handle click of previous button
if(li.hasClass('previous')) {
list.show(list.i - 10, list.page);
}
// handle click of next button
if(li.hasClass('next')) {
list.show(list.i + 10, list.page);
}
});YOUR BUTTONS MARKUP
<ul class="pager">
<li>
<a class="previous" href="#">Previous</a>
</li>
<li>
<a class="next" href="#">Next</a>
</li>
</ul>回答by prudhvi259
Here i am posting the sample code you can try it,
我在这里发布示例代码，您可以尝试一下，
<!DOCTYPE html>
<html lang="en">
<head>
<title>Welcome</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<style>
.step{
display:none;
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Logo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</nav>
<br>
<div class="container">
<div class="row">
<div class="form">
<div class="step">This is step 1</div>
<div class="step">This is step 2</div>
<div class="step">This is step 3</div>
<div class="step">This is step 4</div>
<button id="prevBtn">Prev</button>
<button id="nextBtn">Next</button>
</div>
</div>
</div>
<br/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".step:first").show();
});
$("#nextBtn").click(function(){
var next_step = $(".step:visible").next(".step");
//alert(next_step);
if(next_step.length != 0){
$(".step").hide();
next_step.show();
}
});
$("#prevBtn").click(function(){
var prev_step = $(".step:visible").prev(".step");
//alert(prev_step);
if(prev_step.length != 0){
$(".step").hide();
prev_step.show();
}
});
</script>
</body>
</html>
回答by Rizwan Siddiq
I found the best way by handling the ul with jquery. Please look at the working example:'
我通过使用 jquery 处理 ul 找到了最好的方法。请查看工作示例：'
<-------------HTML----------------->
<------HTML----->
<div id="users">
<input class="search" placeholder="Search" />
<ul class="list"></ul>
<!-- Next Prev Button and pagination list in between -->
<ul style="list-style: none; display: inline-block;">
<li class="previous page-item" style="width: fit-content; float: left;"><a class="page-link" >Prev</a></li>
<ul class="pagination" style="float: left;" />
<li class="next page-item" style="width: fit-content; float: left;"><a class="page-link" >Next</a></li>
</ul>
</div>
<----------------SCRIPT--------------------->
<----------------脚本--------------------->
<script>
var options = {
valueNames: [ 'name', 'born' ],
page : 1,
pagination : true,
item: '<li><h3 class="name"></h3><p class="born"></p></li>'
};
var values = [{
name: 'Jonny Str?mberg',
born: 1986
},
{
name: 'Jonas Arnklint',
born: 1985
},
{
name: 'Martina Elm',
born: 1986
}];
var userList = new List('users', options, values);
</script>
<----------------- Next and Previous Buttons --------------------->
<----------------- 下一个和上一个按钮 --------------------->
$('.next').on('click' , function(){
$('.pagination').find('.active').next().trigger( "click" );
});
$('.previous').on('click' , function(){
$('.pagination').find('.active').prev().trigger( "click" );
});
