page of li

Question

page of li

Navigation

#1 by (2 votes)

1

I want to page the following li

<ul id="usuarios">
  <li><div id="1">miesha</div></li>
  <li><div id="2">ronda</div></li>
  <li><div id="3">thor</div></li>
  <li><div id="4">superman</div></li>
  <li><div id="5">batman</div></li>
  <li><div id="6">susan</div></li>
  <li><div id="7">minerva</div></li>
  <li><div id="8">pedro</div></li>
  <li><div id="9">diana</div></li>
  <li><div id="10">fedor</div></li>
</ul>

and my js is:

$(function() {
                $("#usuarios").pagination({
                    items: 100,
                    itemsOnPage: 5,
                    cssStyle: 'light-theme'
                });
            });

importing the js and css

script(src="/javascripts/jquery.simplePagination.js")
    link(rel='stylesheet', type='text/css', href='/stylesheets/simplePagination.css')

I'm following this tutorial: link

nothing works on the list, everything disappeared. only the buttons

are displayed

Where am I failing?

javascript html5

asked by hubman 28.02.2017 в 07:11

source

1 answer

How can I implement a friendly function to subtract two numbers m1 and m2? fatal error call to a member function prepare () on boolean in functions.php online 32

score 2 · Answer 1

Hello to do what you want I advise you to review this Example , and you would not need to use the simplePagination.js .

Applying the example that I give to what you propose, your HTML code would be as follows:

 <html>
  <head>
    <link rel="stylesheet" href="css/style.css">
    <script src="js/jquery.min.js"></script>  
    <script src="js/list.min.js"></script>
 </head>
 <body>
    <div id="test-list">
      <input type="text" class="search" />
      <ul class="list" id="usuarios">
      <li><div id="1">miesha</div></li>
      <li><div id="2">ronda</div></li>
      <li><div id="3">thor</div></li>
      <li><div id="4">superman</div></li>
      <li><div id="5">batman</div></li>
      <li><div id="6">susan</div></li>
      <li><div id="7">minerva</div></li>
      <li><div id="8">pedro</div></li>
      <li><div id="9">diana</div></li>
      <li><div id="10">fedor</div></li>
      </ul>
      <ul class="pagination"></ul>
  </div>

In the Body of your page, you must include a small script which I will detail below:

  <script>
     $(document).ready(function(e) {
       var monkeyList = new List('test-list', {
       valueNames: ['name'],
       page: 3,
       pagination: true
     });
    });
   </script>

Include in your style.css:

.pagination li {
   display:inline-block;
   padding:5px;
}

In this way the result of your page would be as follows:

The use of this method, unlike the one you propose (simplePagination.js), does not have any relation with it being much better than the other, it's just a matter of taste, this in particular is part of my experience. Greetings I hope you serve!