Javascript 如何使用；“下一步”；及；“以前的”；按钮而不是list.js分页中的数字？_Javascript_Html_Css_Listjs

Javascript 如何使用；“下一步”；及；“以前的”；按钮而不是list.js分页中的数字？

javascript html css

Javascript 如何使用；“下一步”；及；“以前的”；按钮而不是list.js分页中的数字？,javascript,html,css,listjs,Javascript,Html,Css,Listjs,我有一张有许多行的桌子。因此，我决定使用list.js（分页）。但是，我不希望数字作为页面，而是希望有一个next和previous按钮，我可以单独设置样式（或者让引导到作业） HTML代码 <div id="item-table"> <table class="table"> <thead> <tr>

我有一张有许多行的桌子。因此，我决定使用

list.js

（分页）。但是，我不希望数字作为页面，而是希望有一个

next

和

previous

按钮，我可以单独设置样式（或者让引导到作业）

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>

舒尔。阅读文档时，您只需创建按钮，然后使用jquery就可以了

让我知道它是否有效。

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

jQuery（文档）.ready（函数（）{
变量页数量=10，
选项={
ValueName:['title'，'disease'，'source']，
页码：页数
},
articleList=新列表（“tbp-resources”，选项），
list\u count=articleList.items.length，
列表i=0；
//下一页/上一页按钮
jQuery（'.js list next'）。on（'click'，函数（事件）{
event.preventDefault（）；
列表i++；
var新楼层=（列表*页码数量+1）；
如果（（新楼层+页数）>=列表计数）{
jQuery（this.toggleClass（'hide'）；
}
jQuery（'.js list prev.hide'）.toggleClass（'hide'）；
物品清单显示（（清单*页数+1），10）；
});
jQuery（'.js list prev'）。on（'click'，函数（事件）{
event.preventDefault（）；
列表i--；
如果（列表i<1）{
jQuery（this.toggleClass（'hide'）；
}
jQuery（'.js list next.hide'）.toggleClass（'hide'）；
物品清单显示（（清单*页数+1），10）；
});
});

//设置按钮的单击事件监听器（让我使用jQuery）
$（'li'）。在（'click'，function（）上{
//点击上一个按钮
if（li.hasClass（'previous'））{
list.show（list.i-10，list.page）；
}
//点击下一步按钮
if（li.hasClass（'next'））{
list.show（list.i+10，list.page）；
}
});
您的按钮标记





我在这里发布了示例代码，您可以试试，

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


欢迎
.步骤{
显示：无；
}








这是第一步
这是第二步
这是第三步
这是第4步
上
下一个


$（文档）.ready（函数（）{
$（“.step:first”）.show（）；
});
$（“#nextBtn”）。单击（函数（）{
var next_step=$（“.step:visible”）.next（“.step”）；
//警报（下一步）；
如果（下一步步长！=0）{
$（“.step”）.hide（）；
下一步。show（）；
}
});
$（“#prevBtn”）。单击（函数（）{
var prev_step=$（“.step:可见”）.prev（“.step”）；
//警报（上一步）；
如果（上一步长！=0）{
$（“.step”）.hide（）；
上一步显示（）；
}
});

我通过使用jquery处理ul找到了最好的方法。请看工作示例：'

谢谢你的回答。看起来很有希望。然而，我现在面临着其他问题。我编辑了我的帖子。这些错误可能是因为你没有足够的孩子来显示、检查文档和测试、添加虚拟内容并尝试测试listObj。show（I，3），测试是你的朋友。添加一些if条件后，上面的代码正是我想要的！谢谢
    var i = 1;
            $('.next').on('click', function(){
                i++;
                listObj.show(i, 3); 
            })

            $('.prev').on('click', function(){
                i--;
                listObj.show(i, 3); 
            })

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

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

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