A simple jQuery pagination plugin and 3 CSS themes.
flaviusmatis / simplepagination.js Goto Github PK
View Code? Open in Web Editor NEWA simple jQuery pagination plugin.
License: Other
A simple jQuery pagination plugin.
License: Other
A simple jQuery pagination plugin and 3 CSS themes.
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
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
When you click you´ll go to the wrong page, blabla.com/#page2
I solved it adding before the prefix,
So it adds the ?id=12
It maybe would be better as an optional parameter
Thanks for your work!
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?
I have changed on click function to avoid rewrite url
$link.click(function(event){
methods._selectPage.call(self, pageIndex, event);
return false;
});
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.
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
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");
});
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 don't understand how to use onPageClick(pageNumber)...
Thanks for help
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 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 ?
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!
TypeError: $(...).pagination is not a function
cssStyle: 'dark-theme'
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
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 ))
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
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. 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!
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?
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.
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 -
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>
My JS code is:
$(function () {
$('#pagelist').pagination({
items: 24,
itemsOnPage: 8,
cssStyle: 'light-theme'
});
});
Date Created | Library Name | Month | Financial Year | Authority | Visitors | Details | Edit |
---|---|---|---|---|---|---|---|
In my project i have option to delete the record, While delete the record i want to reload the paging fn.
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
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?
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" />
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");
}
});
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 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.
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.
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.
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.
Is there an option to disable or destroy the pagination with a jQuery command?
Thanks in advance. This is a great plugin.
Mike
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.
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, 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.
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!
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
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,
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...
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.
$('.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
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
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
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.
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.