CODEWITHSUNDEEP
javascriptjqueryhtmlpagination
John Smith
John Smith

Reputation: 73

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

Upvotes: 7

Views: 21157

Answers (5)

Mike O&#39;Connor
Mike O&#39;Connor

Reputation: 2700

Three years have passed since this question was posted. You may find a better answer on this 2014 stackoverflow page. In particular, take a look at the answer by Bilal Akil, and my own contribution that is directly below his.

I too had been utterly befuddled by how to use simplepagination.js and Bill (Bilal) showed me the way. His web article should do the trick for you, but the simple version that I put up on that 2014 stackoverflow article is the one that I'm still using and it still works.

If you use that version, or possibly Bill's current revised version too, you should always affix #page-n to any link URL that you put in your own website to your own page, unless you have target="_blank" implemented--- even though leaving it off will still get users to the page (the necessity being to help the back navigation button work). This is explained in my answer in the 2014 article.

On the humourous side, I found the page we're on now while looking just now for a solution to the back navigation button problem, that I just rencountered during a current site revision. I found the answer in my own 2014 answer! I had forgotten that detail.

Upvotes: 1

tallgirltaadaa
tallgirltaadaa

Reputation: 1834

D.Mac had a really great answer, but if you implement, it does not show the first page automatically, only when another page is clicked and then you go back to one.

so I added this small function to make sure the pagination initiates on the first page

function pageOne() {
    var page_1 = "#page-1";
    $('.selection').hide()
    $(page_1).show()
}



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

        });
    });
    </script>

Upvotes: 5

Staker
Staker

Reputation: 41

I built and shared my own jquery mobile pagination plugin for a project that needed a simple paginated list. Basically the plugin appends a "Show More" button to the end of the list and you can configure the "per page" items to be returned via an Ajax call. Of course you will need to hook the offset and limit on the server side, but overall I think it's pretty straight forward and useful. Give it a try http://listomatic.stakbit.com/

Upvotes: 0

user964769
user964769

Reputation:

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>

Upvotes: 13

Aaron Lee
Aaron Lee

Reputation: 362

$(selector) should be $("#selector")

for selecting IDs in jquery u need a hash tag

Upvotes: 0

Related Questions