javascript - How to use "next" and "previous" button instead of numbers in list.js paginatio

admin管理员组

文章数量:1341745

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 next and previous button which I can style individually (or let bootstrap to the job).

<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

New JS-code

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

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

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 next and previous button which I can style individually (or let bootstrap to the job).

<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

New JS-code

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

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

• javascript
• html
• css
• listjs

Share Improve this question Follow edited Dec 29, 2015 at 1:18 user3549524 asked Dec 29, 2015 at 0:04 user3549524user3549524 22711 gold badge33 silver badges1010 bronze badges

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 5

Shure. Reading the documentation you just have to create your buttons and with jquery do the trick

http://www.listjs./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.

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.

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

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

Here i am posting the sample code you can try it,

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Wele</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./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./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

I found the best way by handling the ul with jquery. Please look at the working example:'

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

本文标签：