Category Archives: Javascript

Tablesorter Pager: Options

In my last post, I talked about tablesorter and tablesorter pager, and how to acquire and initialize them. Now, we will talk about the configuration options available for tablesorter pager.

Configuration

Tablesorter pager is configured by passing values in its constructor in JSON format.

$('table').tablesorter().tablesorterPager({option:"value"});

The most commonly used option in Tablesorter Pager is the container option, which defines where the Pager would be rendered. In fact, it is required to show the pager itself.

Configuration Options

The following are all the available options used by Tablesorter Pager, as written in its source code.

Option Description Default
size Defines the number of rows to display per page. 10
offset 0
page Defines the offset of the table “page” shown by default. (currentpage+page) 0
totalRows 0
totalPages 0
container Defines where the pager would be displayed. null
cssNext Defines the CSS class of the ‘next’ image. .next
cssPrev Defines the CSS class of the ‘prev’ image. .prev
cssFirst Defines the CSS class of the ‘first image. .first
cssLast Defines the CSS class of the ‘last’ image. .last
cssPageDisplay Defines the CSS class of the page display. .pagedisplay
cssPageSize Defines the CSS class of the ‘prev’ image. .pagesize
seperator Defines the separator for the current page and total number of pages. /
positionFixed Determines if position of pager is fixed or relative to the table to which it is attached. true
appender Defines the appender function for the pager. this.pager

Some notes:

  • I really don’t know what the options offset, totalRows and totalPages are for. If someone discovers their use, please post it in the comments section.
  • Notice that seperator is spelled with an ‘e’.

These are the only options Tablesorter Pager uses. In the next entries, I will post on how to apply your styles to the pager, among other things.

Mag-iwan ng puna

Filed under Codes, Javascript, Tablesorter Pager

Tablesorter Pager: Acquisition and Initialization

jQuery has a popular plugin known as Tablesorter, used to sort tabular data via JavaScript. It does its job well, and is easily (and highly) configurable, both its settings via JSON and the resulting table styles via CSS.

Tablesorter has a plugin called the Pager, designed to paginate tables via jQuery. The pager, just like the sorter, also works well, and is in itself also easily (and highly) configurable.

However, the difference between the two lie in the documentation: though Tablesorter is highly documented, the Pager’s official documentation is very scant, consisting only of an example in the Tablesorter page.

Thus, in thus series, I will try to address what the official documentation lacks: usage of the said companion plugin.

I would like first to emphasize that this series do not intend to replace the one in the official site (nor the very numerous helpful tips in StackOverflow or from other websites/blogs/forums shown by Google). Rather, my goal is to (somewhat) centralize all those knowledge out there, and (maybe) to add some of what I know. This will also serve as my notes for the said plugin.

To be honest, I really don’t know the version of Tablesorter I am using, so sorry (and feel free to correct) if anything is wrong here.

Acquisition

Tablesorter Pager is bundled with Tablesorter. You can download a copy (and read the documentation) in its official website, http://tablesorter.com/docs

According to the documentation, you need jQuery v. 1.2.1 or higher in order for the plugin to run correctly. jQuery can be downloaded from here: http://jquery.com/

After uploading the necessary files to your server, we are now ready to include the scripts in our HTML code.

NOTE: It is highly recommended to use the minified version of the scripts, for they are lesser in size. Less size => less space taken up in server => less data to transmit to users => less bandwidth consumption => faster page loads.

Initialization

To include the script in your HTML file, you can copy-paste the following codes in the head section of your HTML file:

<link rel='stylesheet' href='path/to/jqueryfile.min.js' type='text/css' />
<link rel='stylesheet' href='path/to/jquery.tablesorter.min.js' type='text/css' />
<link rel='stylesheet' href='path/to/jquery.tablesorter.pager.js' type='text/css' />

Next, attach the Tablesorter to a table:

$("table").tablesorter();

After attaching the sorter to a table, we then attach the pager to it:

$("table").tablesorterPager({container: $("pager")});

Or you may opt to do both things in one line:

$("table").tablesorter().tablesorterPager({container: $("pager")});

If you run the script at this point, you will see that the pager will not render. As is evident in the code, we have to define a place to “render” the pager itself.

You can use the following template to define your “rendering” area:

<div class="pager">
<img src="path/to/images/firstarr.png"/>
<img src="path/to/images/prevarr.png"/>
<input type="text"/>
<img src="path/to/images/nextarr.png"/>
<img src="path/to/images/lastarr.png"/>
<select>
<option value="10">10 per page</option>
<option value="25">25 per page</option>
<option value="50">50 per page</option>
</select>
</div>

Where:

  • firstarr.png: image to be clicked to get the first “page” of the table
  • prevarr.png: image to be clicked to go back a “page” of the table
  • nextarr.png: image to be clicked to go to the next “page” of the table
  • lastarr.png: image to be clicked to get the last “page” of the table
  • input field: where the “page number” of the table will be displayed
  • options: number of fields to be displayed “per page”
    Format:
    <option value=”pagesize”>Description</option>

Of course, you may insert other elements as you wish inside the div. You may even change the container type of the pager (e.g., div to form tag). However, the bulleted elements above MUST be present in order for the pager to work as expected.

Now, when you render the page, you will now see the plugin like the one demonstrated in the docs.

In the next entry, we will talk about how to configure the tablesorter plugin, and what options are available that we can manipulate to do certain interesting things.

1 Puna

Filed under Codes, Javascript, Tablesorter Pager