|
|
|
- Learning jQuery - Sorting
In this chapter, we will use jQuery to apply techniques for increasing the readability, usability, and visual appeal of tables, though we are not dealing with tables used for layout and design. In fact, as the web standards movement has become more pervasive in the last fe...
|
|
|
|
|
|
- Learning jQuery - JavaScript Sorting
There are times, though, when we either don't want to wait for server responses when sorting, or don't have a server-side scripting language available to us. A viable alternative in this case is to perform the sorting entirely on the browser using JavaScript cli...
|
|
|
|
|
|
- Learning jQuery - Basic Alphabetical Sorting
Now let's perform a sort on the Title column of the table. We'll need a class on the table header cell so that we can select it properly:
|
|
|
|
|
|
- Learning jQuery - The Power of Plug-ins
The alternateRowColors() function that we wrote is a perfect candidate to become a jQuery plug-in. In fact, any operation that we wish to apply to a set of DOM elements can easily be expressed as a plug-in. In this case, we only need to modify our existing fu...
|
|
|
|
|
|
- Learning jQuery - Finessing the Sort Keys
Now we want to apply the same kind of sorting behavior to the Author(s) column of our table. By adding the sort-alpha class to its table header cell, the Author(s) column can be sorted with our existing code. But ideally authors should be sorted by last nam...
|
|
|
|
|
|
- Learning jQuery - Sorting Other Types of Data
Our sort routine should be able to handle not just the Title and Author columns, but the Publish Dates and Price as well. Since we streamlined our comparator function, it can handle all kinds of data, but the computed keys will need to be adjusted for o...
|
|
|
|
|
|
- Learning jQuery - Column Highlighting
It can be a nice user interface enhancement to visually remind the user of what has been done in the past. By highlighting the column that was most recently used for sorting, we can focus the user's attention on the part of the table that is most likely to be ...
|
|
|
|
|
|
- Learning jQuery - Pagination
Sorting is a great way to wade through a large amount of data to find information. We can also help the user focus on a portion of a large data set by paginating the data. Pagination can be done in two ways—Server-Side Pagination and JavaScript Pagination.
|
|
|
|
|
|
- Learning jQuery - JavaScript Pagination
Let's examine how we would add JavaScript pagination to the table we have already made sortable in the browser. First, we'll focus on displaying a particular page of data, disregarding user interaction for now:
|
|
|
|
|
|
- Learning jQuery - Enabling the Pager Buttons
To make these new buttons actually work, we need to update the currentPage variable and then run our pagination routine. At first blush, it seems we should be able to do this by setting currentPage to page, which is the current value of the iterator that...
|
|
|
|
|
|
- Learning jQuery - Marking the Current Page
Our pager can be made more user-friendly by highlighting the current page number. We just need to update the classes on the buttons every time one is clicked:
|
|
|
|
|
|
- Learning jQuery - The Finished Code
The completed sorting and paging code in its entirety follows:
|
|
|
|
|
|
- Learning jQuery - Advanced Row Striping
As we saw earlier in the chapter, row striping can be as simple as two lines of code to alternate the background color:
|
|
|
|
|
|
- Learning jQuery - Three-color Alternating Pattern
There may be times when we want to apply more complex striping. For example, we can apply a pattern of three alternating row colors rather than just two. To do so, we first need to define another CSS rule for the third row. We'll also reuse the odd ...
|
|
|
|
|
|
- Learning jQuery - Alternating Triplets
Suppose we want to use two colors, but have each one display three rows at a time. For this, we can employ the odd and even classes again, as well as the modulus operator. But we'll also reset the class each time we're presented with a row containing elements...
|
|
|
|
|
|
- jQuery Row Highlighting
Another visual enhancement that we can apply to our news article table is row highlighting based on user interaction. Here we'll respond to clicking on an author's name by highlighting all rows that have the same name in their author cell. Just as we did with the row stripin...
|
|
|
|
|
|
- jQuery Tooltips
Although the row highlighting might be a useful feature, so far it's not apparent to the user that the feature even exists. We can begin to remedy this situation by giving all author cells a clickable class, which will change the cursor to a pointer when a user hovers the mouse curs...
|
|
|
|
|
|
- jQuery Collapsing and Expanding Table Rows
When large sets of data are grouped in tables, as each year's set of articles are in our News page, collapsing, or hiding, a section's contents can be a convenient way to get a broad view of all of the table's data without having to scroll so much.
|
|
|
|
|
|
- jQuery Table Row Filtering
Earlier we examined sorting and paging as techniques for helping users focus on relevant portions of a table's data. We saw that both could be implemented either with server-side technology or with JavaScript. Filtering completes this arsenal of data arrangement strategie...
|
|
|
|
|
|
- jQuery Collecting Filter Options from Content
Now we need to expand the filter options to cover the range of available topics in the table. Rather than hard-coding all of the topics, we can gather them from the text that has been entered in the table. We can change the definition of keywords to re...
|
|
|
|
|
|
- jQuery Interacting with Other Code
We learned with our sorting and paging code that we can't treat the various features we write as islands. The behaviors we build can interact in sometimes surprising ways; for this reason, it is worth revisiting our earlier efforts to examine how they coexist with...
|
|
|
|
|
|
- jQuery Expanding and Collapsing Table Rows
The expanding and collapsing behavior added earlier also conflicts with our filters. If a section is collapsed and a new filter is chosen, then the matching items are displayed, even if in the collapsed section. Conversely, if the table is filtered and a s...
|
|
|
|
|
|
- jQuery Table Row Finished Code
The Finished Code
Our second example page has demonstrated table row striping, highlighting, tooltips, collapsing/expanding, and filtering. Taken together, the JavaScript code for this page is:
|
|
|
|
|
|
- jQuery Reference Guide
by Jonathan Chaffer and Karl Swedberg A Comprehensive Exploration of the Popular JavaScript Library
|
|
|
|
