John Smith John Smith - 1 month ago 9
HTML Question

how to get this jquery pagination plugin to work properly

I have been trying to get this jQuery pagination plugin to work. For some reason, it doesn't and I'm really not sure why.

<!doctype html>
<html>
<head>
<link rel="stylesheet" href="css/simplePagination.css" type="text/css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.simplePagination.js"></script>
</head>
<body>

<div id="selector">
<ul class="selector">
<li>
<p>One</p>
</li>
<li>
<p>Two</p>
</li>
<li>
<p>Three</p>
</li>
<li>
<p>Four</p>
</li>
<li>
<p>Five</p>
</li>
<li>
<p>Six</p>
</li>
<li>
<p>Seven</p>
</li>
<li>
<p>Eight</p>
</li>
</ul>
</div>


<script language="javascript">
$(function() {
$(selector).pagination({
items: 8,
itemsOnPage: 1,
cssStyle: 'light-theme'
});
});
</script>

</body>
</html>


The buttons for the pages display, but the content is gone. What am I doing wrong?

Here is a demo: http://jsbin.com/obacig/1/edit

Answer

I've had exactly the same problem. After looking at the documentation it appears the tool is literally just for rendering the pagination tool and we need to take care of how we bind the data ourselves.

first of all you don't need anything inside the selector div - that is where the pagination controls appear:

so leave that empty and have your content sit above it in paragraphs or whatever:

<p class="selection" id="page-1">one</p>
<p class="selection" id="page-2">Two</p>
<p class="selection" id="page-3">Three</p>
<p class="selection" id="page-4">Four</p>
<p class="selection" id="page-5">Five</p>
<p class="selection" id="page-6">Six</p>
<p class="selection" id="page-7">Seven</p>
<p class="selection" id="page-8">Eight</p>


<div id="selector">
</div>

If you are working with a dynamic data you'd have to generate the id's on the fly

then beneath that just before the body closing tag you need this script:

<script language="javascript">
    $(function() {
        $('#selector').pagination({
            items: 10,
            itemsOnPage: 2,
            cssStyle: 'compact-theme',
            onPageClick: function(pageNumber){test(pageNumber)}
        });
    });
</script>

notice I've added the onPageClick function (needs renaming) which will pass the page number to my function.

I've got this in my header section:

<style type="text/css">
    .selection {
        display: none;
    }
</style>


<script>

function test(pageNumber)
{

  var page="#page-"+pageNumber;
  $('.selection').hide()
  $(page).show()

}

</script>


</head>

The css originally hides them all by class, then the function closes any that are currently open and opens the one you want by id.

seems to work okay now for me but it was so frustrating :)

here's the whole script:

<!doctype html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="pager.js"></script>
<link href="style.css" rel="stylesheet" type="text/css" />

<style type="text/css">
    .selection {
        display: none;
    }
</style>


<script>

function test(pageNumber)
{

  var page="#page-"+pageNumber;
  $('.selection').hide()
  $(page).show()

}

</script>


</head>
<body>

<p class="selection" id="page-1">one</p>
<p class="selection" id="page-2">Two</p>
<p class="selection" id="page-3">Three</p>
<p class="selection" id="page-4">Four</p>
<p class="selection" id="page-5">Five</p>
<p class="selection" id="page-6">Six</p>
<p class="selection" id="page-7">Seven</p>
<p class="selection" id="page-8">Eight</p>


<div id="selector">
</div>


    <script language="javascript">
    $(function() {
        $('#selector').pagination({
            items: 10,
            itemsOnPage: 2,
            cssStyle: 'compact-theme',
            onPageClick: function(pageNumber){test(pageNumber)}
        });
    });
    </script>

</body>
</html>