客户端javascript-jquery分页与上一个和下一个功能

时间：2016-06-18 02:35:19

标签： javascript html pagination

我创建了一个简单的JavaScript-jQuery分页，它的工作正常，但我不知道创建该函数以显示下一个和上一个项目的下一个和上一个函数。

假设我们有固定容器，其中包含多个div项目，其中包含固定的和高度。容器有33个项目，但只会显示10个分页项目。

浏览器加载所有项目都添加了类hideme，因此所有项目都隐藏了display: none，然后jquery脚本将removeClass hideme添加到前10项并创建分页按钮。对于我们的示例，我们有33个项目，因此我们创建了4个分页按钮，每个分页按钮在单击后找到10个项目到下一个10项（和剩余项目）。

到目前为止，我已经在下面提出了我的分页脚本：

HTML 

<div id="container">
  <ul class="items">
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li>item 4</li>
    <li>item 5</li>
    <li>item 6</li>
    <li>item 7</li>
    <li>item 8</li>
    <li>item 9</li>
    <li>item 10</li>
    <li>item 11</li>
    <li>item 12</li>
    <li>item 13</li>
    <li>item 14</li>
    <li>item 15</li>
    <li>item 16</li>
    <li>item 17</li>
    <li>item 18</li>
    <li>item 19</li>
    <li>item 20</li>
    <li>item 21</li>
    <li>item 22</li>
    <li>item 23</li>
    <li>item 24</li>
    <li>item 25</li>
    <li>item 26</li>
    <li>item 27</li>
    <li>item 28</li>
    <li>item 29</li>
    <li>item 30</li>
    <li>item 31</li>
    <li>item 32</li>
    <li>item 33</li>
  </ul>
</div>

<div class="pagination_wrapper">
  <div class="pagination">
    <div class="previous button">Previous</div>
    <!-- insert pagination buttons here -->
    <div class="next button insertbeforer">Next</div>
  </div>
</div>

JAVASCRIPT 

$(document).ready(function() {
  // count number of items
  var count_items = $(".items li").length;

  // divide items by 10
  var separate_items = count_items / 10;

  // create empty variable
  var page_division = "";

  // check separate_items if contains decimal if true add additional pagination
  if (separate_items % 1 != 0) {
    page_division = separate_items + 1;
    console.log(page_division);
  } else {
    page_division = separate_items;
    console.log(page_division);
  }

  // iterate then generate links for each items pagination
  for (var items_pagination = 1; items_pagination < page_division; items_pagination++) {
    $(".pagination .insertbeforer").before("<div class='button page" + items_pagination + "'>" + items_pagination + "</div>");
  };

  // hide all items
  $('.items li').addClass('hideme');

  // display first 10 items
  $.each($('.items li'), function(index, value) {
    if (index <= 9) {
      $(this).toggleClass('hideme')
    }
  });

  // display items from 1-10
  $(".page1").click(function() {
    $('.items li').addClass('hideme');
    for (var item = 1; item < 11; item++) {
      $(".items li:nth-of-type(" + item + ")").removeClass('hideme');
    };
  });
  // display items from 11-20
  $(".page2").click(function() {
    $('.items li').addClass('hideme');
    for (var item = 11; item < 21; item++) {
      $(".items li:nth-of-type(" + item + ")").removeClass('hideme');
    };
  });
  // display items from 21-30
  $(".page3").click(function() {
    $('.items li').addClass('hideme');
    for (var item = 21; item < 31; item++) {
      $(".items li:nth-of-type(" + item + ")").removeClass('hideme');
    };
  });
  // display items from 31-33
  $(".page4").click(function() {
    $('.items li').addClass('hideme');
    for (var item = 31; item < 41; item++) {
      $(".items li:nth-of-type(" + item + ")").removeClass('hideme');
    };
  });

});

CSS 

#container{width:420px;height:300px;display:block;overflow:hidden;border:1px solid gray}
.items{flex-direction:row;display:flex;flex-wrap:wrap}
.items li{list-style:none;display:block;width:60px;height:60px;background:red;margin:5px;color:#fff}
.pagination_wrapper{width:420px;height:30px;display:block;border:1px solid gray}
.pagination{margin-left:15%}
.pagination .button{background:transparent;color:#000;border:transparent;font-weight:700;margin-left:2px;border-radius:3px!important;padding:1px 10px;line-height:1.8em;border:1px solid #535353;display:inline;cursor:pointer}
.hideme{display:none!important;width:0;height:0}

链接到工作jsfiddle https://jsfiddle.net/jsbrianluna/wctnbbvq/17/

1 个答案:

答案 0 :(得分：1)

他是一个有效的例子：

$(document).ready(function() {
  // count number of items
  var count_items = $(".items li").length;

  // Keep a record of current page.
  var current_page = 1;

  // divide items by 10
  var separate_items = count_items / 10;

  // create empty variable
  var page_division = "";

  if (separate_items % 1 != 0) {
    page_division = separate_items + 1;
    console.log(page_division);
  } else {
    page_division = separate_items;
    console.log(page_division);
  }

  // iterate then generate links for each items pagination
  for (var items_pagination = 1; items_pagination < page_division; items_pagination++) {
    $(".pagination .insertbeforer").before("<div class='button page" + items_pagination + "'>" + items_pagination + "</div>");
  };

  // hide all items
  $('.items li').addClass('hideme');

  // display first 10 items
  $.each($('.items li'), function(index, value) {
    if (index <= 9) {
      $(this).toggleClass('hideme')
    }
  });

  // display items from 1-10
  $(".page1").click(function() {
    current_page = 1;
    $('.items li').addClass('hideme');
    for (var item = 1; item < 11; item++) {
      $(".items li:nth-of-type(" + item + ")").removeClass('hideme');
    };
  });
  // display items from 11-20
  $(".page2").click(function() {
    current_page = 2;
    $('.items li').addClass('hideme');
    for (var item = 11; item < 21; item++) {
      $(".items li:nth-of-type(" + item + ")").removeClass('hideme');
    };
  });
  // display items from 21-30
  $(".page3").click(function() {
    current_page = 3;
    $('.items li').addClass('hideme');
    for (var item = 21; item < 31; item++) {
      $(".items li:nth-of-type(" + item + ")").removeClass('hideme');
    };
  });
  // display items from 31-33
  $(".page4").click(function() {
    current_page = 4;
    $('.items li').addClass('hideme');
    for (var item = 31; item < 41; item++) {
      $(".items li:nth-of-type(" + item + ")").removeClass('hideme');
    };
  });
  $('.next').click(function() {
    //count_items=total
    if ((current_page) * 10 >= count_items) {
      return;
    }
    $('.items li').addClass('hideme');

    for (var item = ((current_page) * 10 + 1); item < ((current_page + 1) * 10 + 1); item++) {
      $(".items li:nth-of-type(" + item + ")").removeClass('hideme');
    };
    current_page += 1;
  })
  $('.previous').click(function() {
   
    
    if (current_page == 1) {
      return;
    }
    $('.items li').addClass('hideme');
    current_page -= 1;
    for (var item = ((current_page - 1) * 10 + 1); item < ((current_page) * 10 + 1); item++) {
      $(".items li:nth-of-type(" + item + ")").removeClass('hideme');
    };

  })

});
#container {
  width: 420px;
  height: 300px;
  display: block;
  overflow: hidden;
  border: 1px solid gray;
}

.items {
  flex-direction: row;
  display: flex;
  flex-wrap: wrap;
}

.items li {
  list-style: none;
  display: block;
  width: 60px;
  height: 60px;
  background: red;
  margin: 5px;
  color: white;
}

.pagination_wrapper {
  width: 420px;
  height: 30px;
  display: block;
  border: 1px solid gray;
}

.pagination {
  margin-left: 15%;
}

.pagination .button {
  background: transparent;
  color: black;
  border: transparent;
  font-weight: 700;
  margin-left: 2px;
  border-radius: 3px !important;
  padding: 1px 10px;
  line-height: 1.8em;
  border: 1px solid #535353;
  display: inline;
  cursor: pointer;
}

.hideme {
  display: none !important;
  width: 0px;
  height: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <ul class="items">
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li>item 4</li>
    <li>item 5</li>
    <li>item 6</li>
    <li>item 7</li>
    <li>item 8</li>
    <li>item 9</li>
    <li>item 10</li>
    <li>item 11</li>
    <li>item 12</li>
    <li>item 13</li>
    <li>item 14</li>
    <li>item 15</li>
    <li>item 16</li>
    <li>item 17</li>
    <li>item 18</li>
    <li>item 19</li>
    <li>item 20</li>
    <li>item 21</li>
    <li>item 22</li>
    <li>item 23</li>
    <li>item 24</li>
    <li>item 25</li>
    <li>item 26</li>
    <li>item 27</li>
    <li>item 28</li>
    <li>item 29</li>
    <li>item 30</li>
    <li>item 31</li>
    <li>item 32</li>
    <li>item 33</li>
  </ul>
</div>

<div class="pagination_wrapper">
  <div class="pagination">
    <div class="previous button">Previous</div>
    <!-- insert pagination buttons here -->
    <div class="next button insertbeforer">Next</div>
  </div>
</div>

您会注意到我添加了当前页面变量并将其添加到您的所有按钮点击定义中。

我还添加了上一个和下一个功能。

相关问题
最新问题