“What exactly is jQuery anyway?” Well simply put jQuery is an extensive and vast JavaScript library that offers a tier of functions that are meant to ease and simplify normally complicated JavaScript development. Learning jQuery: Better Interaction Design and Web Development with Simple JavaScript Techniques is a wonderful introduction to JQuery framework. The book offers many informative code samples and extremely helpful tutorials about how to make JQuery work for you and how to deal with common issues as well as not so common issues such as; acquiring information with the use of AJAX and manipulating tubular data.
Learning jQuery - Table Manipulation By Karl Swedberg Jonathan Chaffer Better Interaction Design and Web Development with Simple JavaScript Techniques Learning jQuery http www.packtpub.com jQuery book Authors Jonathan Chaffer Jonathan Chaffer is the Chief Technology Officer of Structure Interactive an interactive agency located...
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 few years table-based layout has increasingly been abandoned...
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 client-side scripting. For example suppose we have...
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 geshibot lang html" Title Author s Publish Date Price geshibot To perform the actual sort...
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 function a little bit geshibot lang php" jQuery.fn.alternateRowColors...
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 name not first. Since some books have multiple authors...
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 other data types. For example in the case of prices...
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 relevant. Fortunately since we ve already determined...
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. Server-Side Pagination Much like sorting 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 geshibot lang php" document .ready function table.paginated .each function...
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 creates the buttons geshibot lang php" document .ready function...
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 geshibot lang php" var pager ; for var page 0; page numPages; page page 1 .bind click...
Learning jQuery - The Finished Code The completed sorting and paging code in its entirety follows geshibot lang php" .fn.alternateRowColors function tbody tr odd this .removeClass even .addClass odd ; tbody tr even this .removeClass odd .addClass even ; return this; ; document .ready function...
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 geshibot lang php" document .ready function table.sortable tbody tr odd .addClass odd ; table.sortable tbody tr even .addClass even ; ; geshibot If...
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 and even styles for the other two but add more appropriate...
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 th> elements. If we don t reset the alternating row...
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 striping we can modify the appearance of these highlighted...
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 cursor over them geshibot lang php" document .ready function...
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. To make the sections of the news article table collapsible...
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 strategies. By displaying to the user only the table rows that...
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 read geshibot lang php" var keywords...
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 the new filtering capabilities we have added. Row...
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 section is expanded then all items in the expanded...
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 geshibot lang php" document .ready function var highlighted ; var column 3; var positionTooltip...
jQuery Reference Guide by Jonathan Chaffer and Karl Swedberg A Comprehensive Exploration of the Popular JavaScript Library jQuery Reference Guide http www.packtpub.com jquery-reference-guide-Open-Source book Anatomy of a jQuery Script He s got a brand new start Now he s a happy guy...