如何在 list.js 分页中使用 "next" 和 "previous" 按钮代替数字？

Question

我有一个有很多行的 table。因此我决定使用 list.js （分页）。但是我不希望数字作为页面，而是我可以单独设置样式的 next 和 previous 按钮（或者让 bootstrap 完成工作）。

<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({})]
});

这个库是否可行（我在文档中没有找到任何有用的东西）或者我必须使用其他东西吗？

我尝试了 roll 的解决方案。我现在收到一条错误消息 Cannot read property 'childNodes' of undefined。当我添加 <ul class="pagination"></ul> 时，此错误消失了。但是，当尝试访问列表的显示方法时，我再次收到错误消息：Cannot read property 'show' of undefined

新 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代码

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

Answer 1

舒尔。阅读文档，您只需创建按钮并使用 jquery 完成技巧

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); 
            })

如果有效请告诉我。

Answer 2

Javascript 不是我的强项，可能有点晚了，但这是我放在一起的内容，以防止 next/prev 按钮在不适用时显示。希望有人会发现它有用。

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);
    });
});

Answer 3

// 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>

Answer 4

这里贴出示例代码，大家可以试试，

<!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>

You can refer this link

Answer 5

我找到了用 jquery 处理 ul 的最佳方法。请查看工作示例：'

<------------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>
    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').on('click' , function(){
      $('.pagination').find('.active').next().trigger( "click" );
 });

 $('.previous').on('click' , function(){
       $('.pagination').find('.active').prev().trigger( "click" );
 });

如何在 list.js 分页中使用 "next" 和 "previous" 按钮代替数字？

How to use "next" and "previous" button instead of numbers in list.js pagination?

html

javascript

css

listjs