npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

jquery-paginate

v1.0.1

Published

jQuery pagination plugin for tables

Downloads

203

Readme

jQuery paginate

Summary

jquery-paginate is a simple jquery plugin that allows html websites to paginate tables and other kind of containers.

A working example can be found here.

Installation

Install this package as a bower dependecy with:

bower install jquery-paginate

or with:

npm install jquery-paginate

or download the jquery-paginate.min.js file and include it in your website:

<!-- Add it after your jquery file! -->
<script src='jquery.min.js'></script>
<script src='jquery-paginate.min.js'></script>

Basic usage

Imagine the following html table:

<table id="myTable">
  <thead>
    <tr>
      <td>Header 1</td>
      <td>Header 2</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 1 Col 1</td>
      <td>Row 1 Col 2</td>
    </tr>
    <tr>
      <td>Row 2 Col 1</td>
      <td>Row 2 Col 2</td>
    </tr>
    <!-- ... -->
  </tbody>
</table>

You can paginate your table by using the paginate method on your selector object:

$('#myTable').paginate({ limit: 10 });

A navigation bar will be created under the table, and the table will show 10 elements per page. You can style that navigation bar with the your custom css:

.page-navigation a {
  margin: 0 2px;
  display: inline-block;
  padding: 3px 5px;
  color: #ffffff;
  background-color: #70b7ec;
  border-radius: 5px;
  text-decoration: none;
  font-weight: bold;
}

.page-navigation a[data-selected] {
  background-color: #3d9be0;
}

See this working demo. You can see the available options in the Advanced options section.

Advanced options

| Option name | Default value | Description | |--------|--------|--------| | limit | 20 | Elements shown per page. | | initialPage | 0 | Default selected page, being 0 the first one. | | previous | true | Previous button, to move to the previous page. | | previousText | '<' | Text for Previous button. Will be shown only if previous is true. | | next | true | Next button, to move to the next page. | | nextText | '>' | Text for Next button. Will be shown only if next is true. | | first | true | First button, to move to first page. | | firstText | '>' | Text for First button. Will be shown only if first is true. | | last | true | Last button, to move to last page. | | lastText | '>' | Text for Last button. Will be shown only if last is true. | | optional | true | If this option is true, then the pagination menu will be added only if the container has more elements than the limit value. i.e. Will be added only if there are more than 1 page. | | onCreate | null | A callback to be called when the pagination is initialized. Should have the following structure: function(jquery_table_object) {} | | onSelect | null | A callback to be called when any page is selected. Should have the following structure: function(jquery_table_object, current_page_index) {} | | childrenSelector | 'tbody > tr' | A jquery selector string to extract the table children. This can be handy if you are working with divs instead of tables. | | navigationWrapper | null | A jquery object to append the navigation bar to it. This can be used to put your navigation bar on a sticky footer, for example. If null, then it will be added after the table. | | navigationClass | 'page-navigation' | A css class name applied to the navigation menu bar. Can contain multiple classes names, separated with spaces. | | pageToText | function(i) { return (i + 1).toString(); } | A javascript function to transform the current page index (0...N-1) to a string, shown in the navigation menu. |

For example, a working example with all options:

$('#myTable').paginate({
  limit: 10, // 10 elements per page
  initialPage: 1, // Start on second page
  previous: true, // Show previous button
  previousText: 'Previous page', // Change previous button text
  next: true, // Show previous button
  nextText: 'Next page', // Change next button text
  first: true, // Show first button
  firstText: 'First', // Change first button text
  last: true, // Show last button
  lastText: 'Last', // Change last button text
  optional: false, // Always show the navigation menu
  onCreate: function(obj) { console.log('Pagination done!'); } // `onCreate` callback
  onSelect: function(obj, i) { console.log('Page ' + i + ' selected!'); } // `onSelect` callback
  childrenSelector: 'tbody > tr.ugly', // Paginate the rows with the `ugly` class
  navigationWrapper: $('div#myNavWrapper'), // Append the navigation menu to the `#myNavWrapper` div
  navigationClass: 'my-page-navigation', // New css class added to the navigation menu
  pageToText: function(i) { return (i + 1).toString(16); } // Page numbers will be shown on hexadecimal notation
});

Authors

This project has been developed by:

| Avatar | Name | Nickname | Email | | ------- | ------------- | --------- | ------------------ | | | Daniel Herzog | Wikiti | [email protected] |