Here is my code:

populateContent: function (data) {
$("#topPaginationDiv").pagination({
items: data.length,
itemsOnPage: 16,
cssStyle: 'light-theme',
onClick: this.populateInsightsResearchContent(data),
callback: this.populateInsightsResearchContent(data)
});
},

I wanted to call the populateInsightsResearchContent function when user click on the page no. so that I can refresh the page with data to be shown on that page. Also how I will get the page no. click by user? Although the function populateInsightsResearchContent gets called for the very first time when page loads.

Any help will be greatly appreciated.
Thanks in advance.

On the Full Documentation page, please change :

< link rel="stylesheet" src="path_to/simplePagination.css">< /script>

to

< link type="text/css" rel="stylesheet" href="path_to/simplePagination.css" />

Hey, maintainer(s) of flaviusmatis/simplePagination.js!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library flaviusmatis/simplePagination.js is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "flaviusmatis/simplePagination.js",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!

Hi.
Could you please add an ability to display pages in inverted order? I mean display last page number at the beginning of the pagination and first page number at the end?
Thank you!

Hi, am using this pagination in a java search app. The link on page numbers is going as GET. Would like to change it to POST. is that customization possible. ?

Hi,

Is there a way to handle direct links to pages?
For example if a user directly access the page www.example.com/page-2 then the second page should be selected.
I see the currentPage function but how to handle if the page is directly accessed and with a none php compatible link.

Best regards
Sun_Blood

I'm trying to add the simplePagination to 2 tables on the same page but both pagination act on the same table :s Each time I click on a page number from one of the pagination the other change and vice-versa.

How should I do this?

HTML:

<div class="large-100 medium-100 small-100">
    <table id="saquetaTableListar" class="ink-table alternating hover content-left" family="saqueta">
        <thead>
            <tr>
                <th data-sortable="true" width="24%">Nome</th>
                <th>Recepção</th>
                <th>Envio Entidade</th>
                <th>Recepção Entidade</th>
                <th>Envio</th>
                <th>Série</th>
                <th width="10%">Entidade</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
    <div id="saquetaTableListarNav" class="pagination saquetaNav"></div>
</div>
<div class="large-100 medium-100 small-100">
    <table id="saquetaTableListar2" class="ink-table alternating hover content-left" family="saqueta">
        <thead>
            <tr>
                <th data-sortable="true" width="24%">Nome</th>
                <th>Recepção</th>
                <th>Envio Entidade</th>
                <th>Recepção Entidade</th>
                <th>Envio</th>
                <th>Série</th>
                <th width="10%">Entidade</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
    <div id="saquetaTableListar2Nav" class="pagination saquetaNav"></div>
</div>

JS:

$('#saquetaTableListarNav').pagination({
  itemsOnPage: 5,
  displayedPages: 3,
  edges: 1,
  prevText: "Prev",
  nextText: "Next",
  cssStyle: "light-theme",
  selectOnClick: true,
  onPageClick: function(pageNumber) {
    updateTable("saqueta","saquetaTableListar",pageNumber);
  },
  onInit: function() {
    updateTable("saqueta");
  }
});

$('#saquetaTableListar2Nav').pagination({
  itemsOnPage: 5,
  displayedPages: 3,
  edges: 1,
  prevText: "Prev",
  nextText: "Next",
  cssStyle: "light-theme",
  selectOnClick: true,
  onPageClick: function(pageNumber) {
    updateTable("saqueta","saquetaTableListar2",pageNumber);
  },
  onInit: function() {
    updateTable("saqueta");
  }
});

Is it possible to have text labels like 'Item A', 'Item B', etc, instead of numbers like '1', '2', etc? It would probably mean different lengths.

Thanks - nice code.

Here is my code:

populateContent: function (data) {
$("#topPaginationDiv").pagination({
items: data.length,
itemsOnPage: 16,
cssStyle: 'light-theme',
onClick: this.populateInsightsResearchContent(data),
callback: this.populateInsightsResearchContent(data)
});
},

I wanted to call the populateInsightsResearchContent function when user click on the page no. so that I can refresh the page with data to be shown on that page. Also how I will get the page no. click by user? Although the function populateInsightsResearchContent gets called for the very first time when page loads.

Any help will be greatly appreciated.
Thanks in advance.

Excuse me,

I hava one problem, I use this simplePagination.js, but I can't post search form data to this, because I change 2 pages, that form data is empty, how can I do post this search form data, ex: username to this page ?

While calling disable i get the following error
"Uncaught TypeError: Cannot set property 'disabled' of undefined "
I'm calling disable in my document.ready function like this - $('#paging').pagination('disable');

I'm developing a search application and I want to enable paging only after the first search is performed. So I'm disabling it intially and enabling after search. Is this approach right for this pagination plugin? Could you please help?

Sorry i'm a beginner and i'm confused... i have installed your script and configured the "hrefText" parameter.

When i hover a page numer, the URL link is correctly displayed but when i click on it nothing happens...

How can i make it go to the URL corresponding to hrefText when a page number is clicked ? I just want it to act as normal links to different pages

My page is here:
www.ni-dieu-ni-maitre.com/v2/index_v2.php

I really like your plugin but when I try and use it I get the paging but no table records? Which selector do I need to use from the code below: It looks like the pagination js injects the paging links into the selector but how does it redisplay the table rows?

Here is my html structure:

              </tbody>
</table>

$(function () {
    $('#pagelist').pagination({
        items: 24,
        itemsOnPage: 8,
        cssStyle: 'light-theme'
    });
});

hi. hope someone can help. I'm using the plugin, works GREAT!!! I can simulate a simple click function, but i'm not sure what parameters to pass for this plugin to fire. I need to simulate a click function to a specific page from another script. Can anyone perhaps tell me how? I am using all the defaults for the plugin, page names ("page-#") etc. Your assistance is greatly appreciated!

I am trying to update the total items
$("#Pager").pagination({ items: data.inlineCount });

but instead it is pages, i have have 10 rows. page size is set to 2, so it should create 5 pages, instead it creates 10 pages.

Update: Also noticed that all the previous initialization setting are lost.
the onPageClick does not work, pageszise is lost.

Page number isn't recalculated when you call this method. Adding
o.pages = Math.ceil(o.items / o.itemsOnPage) ? Math.ceil(o.items / o.itemsOnPage) : 1;
in updateItemsOnPage method will solve the problem. Fix it please.

It is a common situation where paging links are generated on the server side. In my case this code would be great except that it destroys the original html returned from the server and recreates it which also destroys my href for the paging links. The script seems to work on an existing set of elements rendered from the server side yet assumes the action to take place when a link is clicked is client side. It would be great if there was an option to preserve my server side generated links within each page element. My website runs within a CMS and I need to be able to use my own links generated from the server side.

I have this code

$(function () {
$('#comments-pagination').pagination({
pages: '@Model.Comments.NumberOfPages',
cssStyle: 'light-theme',
onClick: function () {
$.ajax({
type: 'GET',
url: '@Url.Action("GetCommentsByPage", "Comments", new { area = "Comments" })',
data: {
idSourceTable: '@Model.IdSourceTable',
page: parseInt($('.current').not('.prev, .next').text()), // here is the problem
sortOption: $('#SelectedSortOption').val()
},
success: function (data) {
$('#comment-list').html(data);
}
});
}
});
});

Is there any better way to get clicked page number. Let say i have Prev 1 2 3 4 Next and 2 is opend page. If I click 4 $('.current').not('.prev, .next').text() returns 2 (which is previously opend page). I think it would be cool if there would be easy built in function that returns clicked page number and you can use it in onClick method

Hi
I am using simpalepagination for pagination in my application in mvc

I am binding my pager every time when page post back

But every time it is bind with current page one

so how can I set current page which I am viewing

In my project i have option to delete the record, While delete the record i want to reload the paging fn.

$('.pagination').pagination({
                    items: $count,
                    itemsOnPage: $range,
                    cssStyle: 'light-theme',
                    hrefText: '?page=',
                    currentPage: $cur
                }); 

wasn't working when i had two divs with ".pagination" class.
My solution was:

$rand = rand(0, 99999);
echo "
        

            <script>$(function() {
                $('#pagination_$rand').pagination({
                    items: $count,
                    itemsOnPage: $range,
                    cssStyle: 'light-theme',
                    hrefText: '?page=',
                    currentPage: $cur
                });
            }); </script>";

It works well, both paginations are synchronized but the code seems ugly. Is there any better way? Also there is a very small chance that the rand will result the same number, and that breaks the pagination.

Jquery version: 1.8.3
SimplePagination: v1.2

i need to extract the page number from the URL for processing a database request. I can not get the value because of # value in the URL. kindly suggest to handle this.

I don't understand how to use onPageClick(pageNumber)...

Thanks for help

I attached a screen shot to help show what I'm talking about.
In this case I'm wondering if there is a way to show the number "3" instead of the ellipsis?

may be you can also add another function that would capture the page or next page or event previews page but not really submitting/redirecting the page.

onBeforeSubmit: function(page){
if(imGoingToQueryInAjax(page)){
reInitializePaginationLinks();
}
return false; /* if return false then don't refresh the page because im retrieving my data in Ajax */
}

this would be a big help to query in ajax

Hi, I wanted to use your Simple Pagination plugin, I think it looks great on your demo page and it is just what I need. However, after following your simple 3 steps I could not make it work. I am new to Jquery altogether. I downloaded the zip, uploaded the two scripts, changed the path calls to the two scripts to reflect their location on my server in the file that starts the pagination sequence, and included the function scriptlet on the page where I want the pagination. After doing this I was lost at what I needed to do next. The page just returned the function call instead of the nicely styled CSS pagination on the browser's screen. I know I needed to change things in the .JS file but I do not know where or what. I have 6 pages that need to be called by the pagination script. (index.php, index2.php, index3.php, etc...to index6.php. Any help would be greatly appreciated. You can see the source of my page here: http://funeralservicedvd.com/sendcard/index.php

P.S. If you help me get the function call working, then where do you actually code or tell the JS the pages you want to callup when the buttons are clicked, and how does the script change on the other pages or does it?

Hi,

Found a solution to show 3 items. I changed:

o.halfDisplayed = (o.displayedPages / 2);
removed the Math ceil.

And added the math ceil to the interval start method:

            start: Math.ceil(o.currentPage > o.halfDisplayed ? Math.max(Math.min(o.currentPage - o.halfDisplayed, (o.pages - o.displayedPages)), 0) : 0),

Seems to be working for me.

I have the java and everything set up, but it's not paging. It shows the pagination page links but it doesn't limit it. Here is what I have:

<SCRIPT type="text/javascript">
$(function() {
$('#compact-pagination').pagination({
    edges: 2,
    currentPage: 1,
    hrefText: "#page-",
    prevText: "Prev",
    nextText: "Next",
    items: <?  echo $count; ?>,
    itemsOnPage: 2,
    cssStyle: 'compact-theme'
    });
});
</SCRIPT>

Then my php here.

Hello,

The code:

$(document).ready(function() {
    $('#light-pagination').pagination({
            pages: 200,
    prevText: "<",
    nextText: ">",
    onClick: alert('ok'),
            cssStyle: 'light-theme'
    });
});

alert is called at the loading, never onclick...

TypeError: $(...).pagination is not a function

cssStyle: 'dark-theme'

Is there an option to disable or destroy the pagination with a jQuery command?

Thanks in advance. This is a great plugin.

Mike

Hi,
In step 3 You have mentioned to call the function in the place of pagination holder. How to do that. First of all how to get the pagination component in UI. Plz help

This plugin seemed to work great on a site I'm developing with Jquery Mobile.
After clicking on a number, it loads a URL correctly. The problem is that on other pages the pagination doesn't appear, I've tried to enable and redraw the pagination but it doesn't show.
Don't know if this is a problem with the plugin or compatibility problems with Jquery Mobile.

Here's the start function:

 $(function() {
      $("#light-pagination").pagination({
           pages: 8,
           currentPage: 1,
           cssStyle: "light-theme",
           hrefTextPrefix: "index.php?page="
      });
 });

I've tried to bind to the pageinit event but still the pagination doesn't appear on inner pages:

 $(document).bind("pageinit",function(event){
      console.log("This appears when a number is clicked");
      $("#light-pagination").pagination({
           pages: 8,
           currentPage: 1,
           cssStyle: "light-theme",
           hrefTextPrefix: "index.php?page="
      });
      $("#light-pagination").pagination("enable");
 });

Hi there

Very nice plugin. If there is a minimum version of jQuery that is required for this plugin, can you please specify it in the documentation?

Cheers
Matt

Hello,
Great plugin ))
I have two divs showed alternatively through tabs in the same page, each with each own pagination, but the second pagination doesn't appear. Does the plugin supports that?

Thank you in advance.

Sorry, was my code. Everything works great ))

Here is my code:

populateContent: function (data) {
$("#topPaginationDiv").pagination({
items: data.length,
itemsOnPage: 16,
cssStyle: 'light-theme',
onClick: this.populateInsightsResearchContent(data),
callback: this.populateInsightsResearchContent(data)
});
},

I wanted to call the populateInsightsResearchContent function when user click on the page no. so that I can refresh the page with data to be shown on that page. Also how I will get the page no. click by user? Although the function populateInsightsResearchContent gets called for the very first time when page loads.

Any help will be greatly appreciated.
Thanks in advance.

https://github.com/flaviusmatis/simplePagination.js/blob/master/jquery.simplePagination.js#L185

I have modified that line to include the location.search. For example, in joomla if you have your urls like

blabla.com/?id=12

And the pages url like

page2

When you click you´ll go to the wrong page, blabla.com/#page2

I solved it adding before the prefix,

• window.location.search +

So it adds the ?id=12

It maybe would be better as an optional parameter

Thanks for your work!

I've read the instructions but I don't see how to specify that I want a certain ul.classname with the list items as the content and how many equal a page. Thanks!

First let me say this is great work and a very clean design. I like it quite a bit. However the one issue I see that precludes us from implementing it, is the width changes when next/prev is clicked. The problem is most apparent when pressing next after a fresh page load. The number and size of the pages increases until eventually the last item is in the place of the next button causing the user to inadvertently click the last item. For example, this could cause them to jump from 10 to 100 when they are expecting 11. This can be very confusing. They also have to click the first item and start clicking next to find their original location which can be very frustrating. Contributing to this is the number of digits present in the page number. The width of the

Hi there,

I'm paginating pet tiles on the home page of my application, and for each pet tile, I attach a click handler to open a dialog for more information regarding that pet. On load of the page, I attach the pagination with my options onto the two elements that float on the top and bottom of the page, like so:

        //Setup PetReport Pagination here.
        $(".pagination").pagination({
            items:PETREPORT_COUNT,
            itemsOnPage:50,
            cssStyle:"light-theme",
            onPageClick: function(pageNum){
                fetch_PetReports(pageNum);
            }
        }); 

When I flip through pages, I go and fetch more pets from the server, and I also call this helper function to redraw and readjust pagination width:

86  function update_pagination(){
87      //It's important to adjust pagination width for centering.
88      var numPages = $(".pagination").pagination("getPagesCount");
89      numPages = (numPages > 10) ? 10 : numPages;
90      $(".pagination_container").css("width", 110 + 35 * numPages);
91      $(".pagination").pagination("redraw");      
92  }

So that's background on the problem. The problem itself comes up when the click handler for a pet tile gets triggered and the pet dialog is shown. When I go to close that dialog and then try to flip through pages, I get an error like this:

epm-base.js:88: Uncaught TypeError: Object [object Object] has no method 'pagination'

which refers to the line where my two pagination elements are trying to access their pagination attribute, but yet it doesn't exist.

Any ideas here? I initially thought that loading simplePagination JS and CSS on the pet dialog page might be causing the issue, but after removing them, I'm still getting the error. I'm also not doing anything after the dialog close callback, besides just destroying the dialog div.

I have a table that I need to apply the pagination to it. I was wondering if there was an installation document on existing tables.
Thanks

Can I implement simple pagination paging along with additional links oto fist and last pages. Currently when I click on Prev or Next links it go to next page not to last page

I have changed on click function to avoid rewrite url
$link.click(function(event){
     methods._selectPage.call(self, pageIndex, event);
     return false;
});

When the first element is clicked, not only the '1' element, but also the 'prev' element is marked as 'active' and a span class assigned. This is confusing for the end-users, as 'prev' is not 'active' at that moment - better is to disable the 'prev' element.

Note : Similar behaviour when clicking the last element.

When item '1' is clicked :

<li class="active">
<span class="current prev">Prev</span>
</li>
<li class="active"><span class="current">1</span></li>
<li><a class="page-link" href="#page-2">2</a></li>

When item '2' is clicked :

<li><a class="page-link prev" href="#page-1">Prev</a></li>
<li><a class="page-link" href="#page-1">1</a></li>
<li class="active"><span class="current">2</span></li>

What is the best way to prevent class 'active' and the span being assigned to the buttons, and disabling them instead?

This is the below scenario that issue occurs,
TotalNoofRecords: 19
NoofRecords in Page: 9
Paging: 3 Pages (9+9+1).
Deleted NoofRecords: 1

After Deleting the Records we have only 2 pages only, but it will shows 3 pages, once if i choose the page:3 then custom error occurs.

I m completely new to jquery. i have copied your code simplepagination.js and simplePagination.css in my project directory. in my jsp i included these two files. and i included the function that you have given in ur tutorial in my jsp. But i am getting empty page when i run that jsp.. Should i need to do anything other than this?? please help me

I had need of using page's url hash for more than just page number, but this plugin would overwrite what was already there.

For now I changed the link click handler to this:
$link.click(function(){
//return methods._selectPage.call(self, pageIndex);
methods._selectPage.call(self, pageIndex);
return false;
});

The hash is changing dynamically so I couldn't just use the href options

Now I can still get the onPageClick callback and put the page number in there myself. Would be nice to have an option to prevent this. Thanks

the instruction bind the plugin to the navigation panel ok,
but it consumes everything - can't see the contents!
tia,
:)
--load jquery
--include css
--include plugin
make container -

<li...
$(function() {
$('ul#pagi').pagination({
items: data.results.length, //data set (json) parsed into li
itemsOnPage: 2,
cssStyle: 'compact-theme' //light-theme dark-theme compact-theme
});
});

I have tried the implementation of simplePagination. It works fine.
Thanks for sharing the code with us

But in my site the display area is too small.So we need implementation like only "Previous" ,"Next" buttons.I have tried displayedPages options .But it have no effect.
Can you suggest any method for that ?