jQuery Content Scroller

June 26, 2009 by Gnaniyar Zubair

Content Scroller is used to scroll the content very fast. It will convert a set of divs into a scrolling content area and generates pagination links.

See demo

Required Plugin :  Download Zip file of  jquery.contentscroller.js

Example:

<script type=”text/javascript” src=”jquery.js“></script>
<script type=”text/javascript” src=”jquery.contentscroller.js“></script>

<div id=”container1“>

<div class=”example”>

<h1>Content Page 1</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</div>

<div class=”example”>

<h1>Content Page 2</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</div>

<div class=”example”>

<h1>Content Page 3</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</div>

<div class=”example”>

<h1>Content Page 4</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. END!</p>

</div>

<div class=”example”>

<h1>Content Page 5</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</div>
</div>

<script type=”text/javascript”>

jQuery(document).ready(function() {
jQuery(‘#container1′).contentscroller({pages: ‘.example ‘ });
});

</script>

jQuery Alphapets Searching Plugin (ListNav)

June 25, 2009 by Gnaniyar Zubair

This jQuery plugin is a letter-based navigation to any UL or OL list , showing the user the letters A-through-Z.

If Clicking one of the letters (A to Z ) , filters the list to show only the items in the list that start with that letter.

Documentation and Demo Site :

http://www.ihwy.com/labs/jquery-listnav-plugin.aspx

Required Plugin:       jquery.listnav-2.0.js

Here is the example:

HTML File:
<script type=”text/javascript”  language=”javascript”   src=”jquery.listnav-2.0.js“></script>

Alphapets Searching Plugin  : Demo 1

<div id=“demoFour-nav“></div>

<ul id=”demoFour“><li><a href=”#”>Agizzy</a></li><li><a href=”#”>Aiboo</a></li><li><a href=”#”>Avazu</a></li><li><a href=”#”>Babbletype</a></li><li><a href=”#”>BrowseZ</a></li><li><a href=”#”>Camiba</a></li><li><a href=”#”>Centilia</a></li><li><a href=”#”>Centixo</a></li><li><a href=”#”>Chatterbean</a></li><li><a href=”#”>Chatvine</a></li><li><a href=”#”>Dabster</a></li><li><a href=”#”>Dazzleblab</a></li><li><a href=”#”>Dazzleclub</a></li><li><a href=”#”>Demivee</a></li><li><a href=”#”>Devopia</a></li><li><a href=”#”>Eaxo</a></li><li><a href=”#”>Edgedrive</a></li><li><a href=”#”>Edgenation</a></li><li><a href=”#”>Fadeo</a></li><li><a href=”#”>Feedbird</a></li><li><a href=”#”>Fivecat</a></li><li><a href=”#”>Flipspot</a></li><li><a href=”#”>Innobird</a></li><li><a href=”#”>Inte</a></li><li><a href=”#”>Jabberspot</a></li><li><a href=”#”>Jabberverse</a></li><li><a href=”#”>Jumplist</a></li><li><a href=”#”>Kaype</a></li><li><a href=”#”>Meendo</a></li><li><a href=”#”>Meente</a></li><li><a href=”#”>Meetz</a></li><li><a href=”#”>Muba</a></li><li><a href=”#”>Ombee</a></li><li><a href=”#”>Oope</a></li><li><a href=”#”>Podtune</a></li><li><a href=”#”>Quiyo</a></li><li><a href=”#”>Rifffire</a></li><li><a href=”#”>Riffmix</a></li><li><a href=”#”>Tagtube</a></li><li><a href=”#”>Tandu</a></li><li><a href=”#”>Tekpad</a></li><li><a href=”#”>Tekware</a></li><li><a href=”#”>Topbug</a></li><li><a href=”#”>Trunti</a></li><li><a href=”#”>Twitterspot</a></li><li><a href=”#”>Voonte</a></li><li><a href=”#”>Wikible</a></li><li><a href=”#”>Wikidel</a></li><li><a href=”#”>Wikindo</a></li><li><a href=”#”>Yondo</a></li><li><a href=”#”>Yotz</a></li><li><a href=”#”>Zoomworks</a></li><li><a href=”#”>Zigzag</a></li><li><a href=”#”>Zzzzz</a></li><li><a href=”#”>ZW</a></li><li><a href=”#”>ABC</a></li></ul><div></div></div></div>

</div>

<script>
jQuery(‘#demoFour‘).listnav({
includeNums: false
});
</script>

Alphapets Searching Plugin  : Demo 2


<div id=”demoThree-nav“></div>

<ol id=”demoThree“><li><a href=”#”>411 Services</a></li><li><a href=”accountants.aspx”>Accountants</a></li><li><a href=”accounting-bookkeeping_general-service.aspx”>Accounting & Bookkeeping – General Service</a></li><li><a href=”acupuncture.aspx”>Acupuncture</a></li><li><a href=”advertising.aspx”>Advertising</a></li><li><a href=”advertising_agencies-counselors.aspx”>Advertising – Agencies & Counselors</a></li><li><a href=”advertising_computer.aspx”>Advertising – Computer</a></li><li><a href=”advertising_promotional.aspx”>Advertising – Promotional</a></li><li><a href=”attorneys_service-bureaus.aspx”>Attorneys – Service Bureaus</a></li><li><a href=”auctioneers.aspx”>Auctioneers</a></li><li><a href=”audio-visual-consultants.aspx”>Audio Visual Consultants</a></li><li><a href=”audio-visual-production-service.aspx”>Audio Visual Production Service</a></li><li><a href=”automobile_renting.aspx”>Automobile – Renting</a></li><li><a href=”automobile_repair-service.aspx”>Automobile – Repair & Service</a></li><li><a href=”cabinet-makers.aspx”>Cabinet Makers</a></li><li><a href=”cabinets.aspx”>Cabinets</a></li><li><a href=”cafeterias.aspx”>Cafeterias</a></li><li><a href=”calligraphers.aspx”>Calligraphers</a></li><li><a href=”campgrounds.aspx”>Campgrounds</a></li><li><a href=”dancing-instruction.aspx”>Dancing Instruction</a></li><li><a href=”data-communications-equipment-systems_networks.aspx”>Data Communications Equipment & Systems – Networks</a></li><li><a href=”deck-builders.aspx”>Deck Builders</a></li><li><a href=”drywall-insulation-contractors.aspx”>Drywall & Insulation Contractors</a></li><li><a href=”earthquake-products-services.aspx”>Earthquake Products & Services</a></li><li><a href=”e-commerce.aspx”>E-Commerce</a></li><li><a href=”education-centers.aspx”>Education Centers</a></li><li><a href=”educational-consultants.aspx”>Educational Consultants</a></li><li><a href=”educational-service_business.aspx”>Educational Service – Business</a></li><li><a href=”electric-contractors.aspx”>Electric Contractors</a></li><li><a href=”electric-transmission-equipment-manufacturers.aspx”>Electric Transmission Equipment (Manufacturers)</a></li><li><a href=”electrolysis.aspx”>Electrolysis</a></li><li><a href=”erosion-control.aspx”>Erosion Control</a></li><li><a href=”gas_liquefied-petroleum_bottled-bulk-wholesale.aspx”>Gas – Liquefied Petroleum – Bottled & Bulk (Wholesale)</a></li><li><a href=”guide-service.aspx”>Guide Service</a></li><li><a href=”gymnastic-instruction.aspx”>Gymnastic Instruction</a></li><li><a href=”halls-auditoriums.aspx”>Halls & Auditoriums</a></li><li><a href=”handyman-services.aspx”>Handyman Services</a></li><li><a href=”hardware_retail.aspx”>Hardware – Retail</a></li><li><a href=”hardwood.aspx”>Hardwood</a></li><li><a href=”jewelers_retail.aspx”>Jewelers – Retail</a></li><li><a href=”jewelry_designers.aspx”>Jewelry – Designers</a></li><li><a href=”laboratories.aspx”>Laboratories</a></li><li><a href=”laboratories_research-development.aspx”>Laboratories – Research & Development</a></li><li><a href=”land-companies.aspx”>Land Companies</a></li><li><a href=”landfills_sanitary.aspx”>Landfills – Sanitary</a></li><li><a href=”lumber-manufacturers.aspx”>Lumber (Manufacturers)</a></li><li><a href=”lumber_retail.aspx”>Lumber – Retail</a></li><li><a href=”machine-shops.aspx”>Machine Shops</a></li><li><a href=”parking-area-lots-maintenance-marking.aspx”>Parking Area & Lots Maintenance & Marking</a></li><li><a href=”parks.aspx”>Parks</a></li><li><a href=”party-supplies.aspx”>Party Supplies</a></li><li><a href=”patio-deck-cleaning-restoration.aspx”>Patio & Deck Cleaning & Restoration</a></li><li><a href=”paving-contractors.aspx”>Paving Contractors</a></li><li><a href=”pumps-wholesale.aspx”>Pumps (Wholesale)</a></li><li><a href=”roofing_service-consultants.aspx”>Roofing – Service Consultants</a></li><li><a href=”sand-gravel-wholesale.aspx”>Sand & Gravel (Wholesale)</a></li><li><a href=”school-supplies-wholesale.aspx”>School Supplies (Wholesale)</a></li><li><a href=”schools-educational-services.aspx”>Schools & Educational Services</a></li><li><a href=”schools_nursery-kindergarten-academic.aspx”>Schools – Nursery & Kindergarten Academic</a></li><li><a href=”schools_universities-colleges-academic.aspx”>Schools – Universities & Colleges Academic</a></li><li><a href=”shoe-boot-repairing.aspx”>Shoe & Boot Repairing</a></li><li><a href=”shoes_retail.aspx”>Shoes – Retail</a></li><li><a href=”shopping-centers-malls.aspx”>Shopping Centers & Malls</a></li><li><a href=”shower-doors-enclosures.aspx”>Shower Doors & Enclosures</a></li><li><a href=”tutoring.aspx”>Tutoring</a></li><li><a href=”ultrasonic-equipment-supplies-wholesale.aspx”>Ultrasonic Equipment & Supplies (Wholesale)</a></li><li><a href=”upholsterers.aspx”>Upholsterers</a></li><li><a href=”windows_repairing.aspx”>Windows – Repairing</a></li><li><a href=”wineries.aspx”>Wineries</a></li><li><a href=”wines_consultants.aspx”>Wines – Consultants</a></li><li><a href=”wines_retail.aspx”>Wines – Retail</a></li><li><a href=”woodworkers.aspx”>Woodworkers</a></li></ol></div>

</div>

<script>

jQuery(‘#demoThree‘).listnav();

</script>

CSS

<style>

.listNav { margin:0 0 10px; }

.ln-letters { overflow:hidden; }
.ln-letters a { font-size:0.9em; display:block; float:left; padding:2px 6px; border:1px solid silver; border-right:none; text-decoration:none; }
.ln-letters a.ln-last { border-right:1px solid silver; }
.ln-letters a:hover,
.ln-letters a.ln-selected { background-color:#eaeaea; }
.ln-letters a.ln-disabled { color:#ccc; }
.ln-letter-count { text-align:center; font-size:0.8em; line-height:1; margin-bottom:3px; color:#336699; }

#demoThree-nav .ln-letters a { border:none; border-top:2px solid pink; color:red; }
#demoThree-nav .ln-letters a.ln-last { border-right:none; }
#demoThree-nav .ln-letters a:hover,
#demoThree-nav .ln-letters a.ln-selected { border-top:2px solid red; background-color:pink; color:White !important; }
#demoThree-nav .ln-letters a.ln-disabled { color:pink; }
#demoThree-nav .ln-letters a.ln-disabled:hover { color:white; }
#demoThree-nav .ln-letter-count { color:red; }

#demoThree li { color:pink; }
#demoThree li a { color:red; text-decoration:none; }
#demoThree li a:hover { text-decoration:underline; }

#demo4 #listWrapper { width:650px }
#demoFour li { float:left; }
#demoFour a { display:block; text-align:center; width:85px; border:1px solid silver; padding:10px; margin:0 10px 10px 0; text-decoration:none }
#demoFour a:hover { background-color:#eee }

</style>

listnav

jQuery Autocomplete

June 25, 2009 by Gnaniyar Zubair

Autocomplete is a common feature available in lot of web tools and services. You will find lots of implementation of autocomplete features.

Autocomplete is an input field to enable users quickly finding and selecting some value.

When we type character/ word in textbox, it will search matching values and will display in small division as dropdown.

Let us see how can we implement a simple Autocomplete feature in JSP page.

Required Files :

Download file :        ui.autocomplete.js

(or)  from here

jQuery’s autocomplete plugin

JSP Page:

<html>

<head>
<script src=”jquery.js“  type=”text/javascript”></script>
<script src=”ui.autocomplete.js“  type=”text/javascript”></script>

(or)

<script src=”jquery.autocomplete.js”  type=”text/javascript”></script>
</head>

<form>

<%  String names=”Testing,Catch,Test,Welcome”;  %>
<input type=”hidden” id=’ac‘ value=”<%=names%>”/>
<input type=”text” id=’acbox‘ />

</form>

<script type=”text/javascript”>

jQuery(document).ready(function(){
var itemNames= jQuery(‘#ac’).val();
var mydata = itemNames.split(“,”);
jQuery(‘#acbox’).autocomplete({
data:mydata,
autoFill: true
});

});

</script>

if you use plugin jquery.autocomplete.js, just give script  like this:

<script type=”text/javascript”>
jQuery(document).ready(function() {
var itemNames= jQuery(‘#ac’).val();
var mydata = itemNames.split(“,”);
jQuery(“#acbox“).autocomplete(mydata);
});
</script>

</html>

Output:

autocomplete

Table Sorter with Paging

June 18, 2009 by Gnaniyar Zubair

I have found another jQuery plugin for sorting and pagination create by      Mr. Christian Bach.

Tablesorter is a jQuery plugin for turning a standard HTML table  into a Sortable and Pagination table without page refreshes.

As i have mentioned in my last post regarding Datatables, this plugin is also same like that. Css and Js files are changed instead of that.

Code Snippets:

Required Files :

1.   jquery.tablesorter.js

2.  jquery.tablesorter.pager.js

3.  jquery.tablesorter.pager.css

4. style.css

download tablesorting-paging document

images:

bg.gif,  asc.gif ,  desc.gif,  first.png, prev.png,  next.png,  last.png

ascbgdesclastfirstnextprev

Html Table:

<script type=”text/javascript” language=”javascript” src=”/html/testing/myUser/jquery.tablesorter.js”></script>
<link rel=”stylesheet” type=”text/css” href=”/html/testing/myUser/style.css“>
<script type=”text/javascript” language=”javascript” src=”/html/testing/myUser/jquery.tablesorter.pager.js“></script>
<link rel=”stylesheet” type=”text/css” href=”/html/testing/myUser/jquery.tablesorter.pager.css“>

<table cellspacing=”1″   id=”myTable”   class=”tablesorter“>

<thead>

<tr>

<th>Name</th>

<th>Major</th>

<th>Sex</th>

<th>English</th>

<th>Japanese</th>

<th>Calculus</th>

<th>Geometry</th>

</tr>

</thead>

<tbody>

<tr>

<td>Student01</td>

<td>Languages</td>

<td>male</td>

<td>80</td>

<td>70</td>

<td>75</td>

<td>80</td>

</tr>

<tr>

<td>Student02</td>

<td>Mathematics</td>

<td>male</td>

<td>90</td>

<td>88</td>

<td>100</td>

<td>90</td>

</tr>

<tr>

<td>Student03</td>

<td>Languages</td>

<td>female</td>

<td>85</td>

<td>95</td>

<td>80</td>

<td>85</td>

</tr>

<tr>

<td>Student04</td>

<td>Languages</td>

<td>male</td>

<td>60</td>

<td>55</td>

<td>100</td>

<td>100</td>

</tr>

<tr>

<td>Student05</td>

<td>Languages</td>

<td>female</td>

<td>68</td>

<td>80</td>

<td>95</td>

<td>80</td>

</tr>

<tr>

<td>Student06</td>

<td>Mathematics</td>

<td>male</td>

<td>100</td>

<td>99</td>

<td>100</td>

<td>90</td>

</tr>

<tr>

<td>Student07</td>

<td>Mathematics</td>

<td>male</td>

<td>85</td>

<td>68</td>

<td>90</td>

<td>90</td>

</tr>

<tr>

<td>Student08</td>

<td>Languages</td>

<td>male</td>

<td>100</td>

<td>90</td>

<td>90</td>

<td>85</td>

</tr>

<tr>

<td>Student09</td>

<td>Mathematics</td>

<td>male</td>

<td>80</td>

<td>50</td>

<td>65</td>

<td>75</td>

</tr>

<tr>

<td>Student10</td>

<td>Languages</td>

<td>male</td>

<td>85</td>

<td>100</td>

<td>100</td>

<td>90</td>

</tr>

<tr>

<td>Student11</td>

<td>Languages</td>

<td>male</td>

<td>86</td>

<td>85</td>

<td>100</td>

<td>100</td>

</tr>

<tr>

<td>Student12</td>

<td>Mathematics</td>

<td>female</td>

<td>100</td>

<td>75</td>

<td>70</td>

<td>85</td>

</tr>

<tr>

<td>Student13</td>

<td>Languages</td>

<td>female</td>

<td>100</td>

<td>80</td>

<td>100</td>

<td>90</td>

</tr>

<tr>

<td>Student14</td>

<td>Languages</td>

<td>female</td>

<td>50</td>

<td>45</td>

<td>55</td>

<td>90</td>

</tr>

<tr>

<td>Student15</td>

<td>Languages</td>

<td>male</td>

<td>95</td>

<td>35</td>

<td>100</td>

<td>90</td>

</tr>

<tr>

<td>Student16</td>

<td>Languages</td>

<td>female</td>

<td>100</td>

<td>50</td>

<td>30</td>

<td>70</td>

</tr>

<tr>

<td>Student17</td>

<td>Languages</td>

<td>female</td>

<td>80</td>

<td>100</td>

<td>55</td>

<td>65</td>

</tr>

<tr>

<td>Student18</td>

<td>Mathematics</td>

<td>male</td>

<td>30</td>

<td>49</td>

<td>55</td>

<td>75</td>

</tr>

<tr>

<td>Student19</td>

<td>Languages</td>

<td>male</td>

<td>68</td>

<td>90</td>

<td>88</td>

<td>70</td>

</tr>

<tr>

<td>Student20</td>

<td>Mathematics</td>

<td>male</td>

<td>40</td>

<td>45</td>

<td>40</td>

<td>80</td>

</tr>

<tr>

<td>Student21</td>

<td>Languages</td>

<td>male</td>

<td>50</td>

<td>45</td>

<td>100</td>

<td>100</td>

</tr>

<tr>

<td>Student22</td>

<td>Mathematics</td>

<td>male</td>

<td>100</td>

<td>99</td>

<td>100</td>

<td>90</td>

</tr>

<tr>

<td>Student23</td>

<td>Languages</td>

<td>female</td>

<td>85</td>

<td>80</td>

<td>80</td>

<td>80</td>

</tr>

</tbody> </table>

<%– For Pagination –%>

<div id=”pager”  class=”pager”>

<form>

<img src=”/html/images/first.png”  class=”first”/>

<img src=”/html/images/prev.png” class=”prev”/>

<input type=”text”  class=”pagedisplay”/>

<img src=”/html/images/next.png”  class=”next”/>

<img src=”/html/images/last.png”  class=”last”/>

<select  class=”pagesize”>

<option selected=”selected”  value=”10″>10</option>

<option value=”20″>20</option>

<option value=”30″>30</option>

<option  value=”40″>40</option>

</select>

</form>

</div>

<%– javascript –%>

<script>

jQuery(document).ready(function() {

jQuery(“#myTable”)

.tablesorter({widthFixed: true, widgets: ['zebra']})

.tablesorterPager({container: jQuery(“#pager”)});

});

</script>

Output:

tablesorter

DataTable with Pagination , Search & Sorting

June 13, 2009 by Gnaniyar Zubair

DataTables is a plug-in for the jQuery Javascript library.

It is a highly flexible tool which has all the advanced features like Pagination, Sorting & Filter in HTML tables.

This plugin is created by Mr. Allan Jardine
——————————————————————————————————————————
Download these files:

1 .  jquery.dataTables

2.  demos.css

[ download images: click here to download sort_both imagesort_ascsort_descback_disabledback_enabledforward_disabledforward_enabled ]

——————————————————————————————————————————

Here is the Step by step example :

1. Create table in your HTML File:

<script type=”text/javascript” language=”javascript” src=”/html/js/jquery/jquery.js”></script>
<script type=”text/javascript” language=”javascript” src=”/html/testing/zubair/jquery.dataTables.js”></script>
<link rel=”stylesheet” type=”text/css” href=”/html/testing/zubair/demos.css”>

<table  id=”example”  class=”display”>
<thead>
<th>First Name </th>
<th>Last Name</th>
<th> Country</th>
<th> Phone</th>
<th>Grade</th>
</thead>

<tbody>

<tr>
<td>Allan </td>
<td>Jardine</td>
<td>America</td>
<td>42345</td>
<td>X</td>
</tr>

<tr>
<td>Gnaniyar</td>
<td>Zubair</td>
<td>India</td>
<td>52123</td>
<td>C</td>
</tr>

<tr>
<td>Zahid</td>
<td>Khan</td>
<td>Bangalore</td>
<td>6784</td>
<td>A</td>
</tr>

<tr>
<td>Musarath</td>
<td>Ahmed</td>
<td>Dubai</td>
<td>61111</td>
<td>A</td>
</tr>

<tr>
<td>Faisal</td>
<td>K</td>
<td>Kerela</td>
<td>712121</td>
<td>A</td>
</tr>

<tr>
<td>Mohammed</td>
<td>Ali</td>
<td>Salem</td>
<td>612121</td>
<td>A</td>
</tr>

<tr>
<td>Abdur</td>
<td>Rasheed</td>
<td>Eruvadi</td>
<td>12347</td>
<td>A</td>
</tr>

<tr>
<td>Masroor</td>
<td>Khan</td>
<td>Bangalore</td>
<td>12228</td>
<td>A</td>
</tr>

<tr>
<td>Arun</td>
<td>Kumar</td>
<td>Bangalore</td>
<td>32428</td>
<td>A</td>
</tr>

<tr>
<td>Vijayan</td>
<td>C</td>
<td>Salem</td>
<td>90138</td>
<td>D</td>
</tr>

</tbody>

<tfoot>
<tr>
<th><input type=”text”  name=”firstName”   value=”First Name”  class=”search_init” /></th>
<th><input type=”text”  name=”lastName”   value=”Last Name”  class=”search_init” /></th>
<th><input type=”text” name=”location”  value=”Location” class=”search_init” /></th>
<th><input type=”text”  name=”Phone”   value=”phone”  class=”search_init” /></th>
<th><input type=”text”  name=”Grade”   value=”grade”  class=”search_init” /></th>
</tr>
</tfoot>

</table>
<%–  jQueryscript –%>

<script type=”text/javascript” charset=”utf-8″>
var oTable;
var asInitVals = new Array();

jQuery(document).ready(function() {

oTable = jQuery(‘#example’).dataTable( {
“sPaginationType”: “full_numbers”,
“iDisplayLength”: 5,
“sDom”: ‘tfpli<”clear”>’
} );
/*
* This is for  individual Column Filter in Footer text box
*/
jQuery(“tfoot input”).keyup( function () {
/* Filter on the column (the index) of this element */
oTable.fnFilter( this.value, jQuery(“tfoot input”).index(this) );
} );

jQuery(“tfoot input”).each( function (i) {
asInitVals[i] = this.value;
} );

jQuery(“tfoot input”).focus( function () {
if ( this.className == “search_init” )
{
this.className = “”;
this.value = “”;
}
} );

jQuery(“tfoot input”).blur( function (i) {
if ( this.value == “” )
{
this.className = “search_init”;
this.value = asInitVals[jQuery("tfoot input").index(this)];
}
} );
} );
</script>

<%– Css style  –%>
<style>

div.dataTables_paginate span.paginate_button {
background-color:#DDDDDD;
}
div.dataTables_paginate span.paginate_button, .example_alt_pagination div.dataTables_paginate span.paginate_active {
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
border:1px solid #AAAAAA;
cursor:pointer;
margin:0 3px;
padding:2px 5px;
}
.dataTables_paginate {
line-height:22px;
}
.dataTables_paginate {
text-align:left;
}
</style>

Output:

table

Customization:

You can change the pagination style by changing  this line “sPaginationType”: “full_numbers”,

to

sPaginationType”: “two_button”

this two_button pagination is default pagination.  it will be looking like this :

Output 1:

table1

- Gnaniyar  Zubair

Introduction

June 13, 2009 by Gnaniyar Zubair

I am Gnaniyar Zubair, finished MCA in Manonmanium Sundranar University, Tirunelveli. After a long journey, i just enter into IT field on 2006.

I dont have that much knowledge in programming but i just want to share the new technology / new concept / tricking functionalities from my projects and expect the same from users who visits this blog.

Actually, this is for my self reference also. because i have a very less memory power.

To acquire knowledge, one must study; but to acquire wisdom, one must observe. I am studying and observing.

- Gnaniyar Zubair