Share your knowledge

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>

<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>

<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>

<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>

<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>

<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>

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

</script>

Tags: contentscroller, jQuery
Posted in jQuery | Leave a Comment »

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

<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

<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>

Tags: jQuery
Posted in jQuery | Leave a Comment »

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>

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:

Tags: jQuery
Posted in jQuery | 1 Comment »

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

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“>

<thead>

<tr>

<th>Major</th>

<th>English</th>

<th>Japanese</th>

<th>Calculus</th>

<th>Geometry</th>

</tr>

</thead>

<tbody>

<tr>

<td>Student01</td>

<td>Languages</td>

</tr>

<tr>

<td>Student02</td>

<td>Mathematics</td>

</tr>

<tr>

<td>Student03</td>

<td>Languages</td>

<td>female</td>

</tr>

<tr>

<td>Student04</td>

<td>Languages</td>

</tr>

<tr>

<td>Student05</td>

<td>Languages</td>

<td>female</td>

</tr>

<tr>

<td>Student06</td>

<td>Mathematics</td>

</tr>

<tr>

<td>Student07</td>

<td>Mathematics</td>

</tr>

<tr>

<td>Student08</td>

<td>Languages</td>

</tr>

<tr>

<td>Student09</td>

<td>Mathematics</td>

</tr>

<tr>

<td>Student10</td>

<td>Languages</td>

</tr>

<tr>

<td>Student11</td>

<td>Languages</td>

</tr>

<tr>

<td>Student12</td>

<td>Mathematics</td>

<td>female</td>

</tr>

<tr>

<td>Student13</td>

<td>Languages</td>

<td>female</td>

</tr>

<tr>

<td>Student14</td>

<td>Languages</td>

<td>female</td>

</tr>

<tr>

<td>Student15</td>

<td>Languages</td>

</tr>

<tr>

<td>Student16</td>

<td>Languages</td>

<td>female</td>

</tr>

<tr>

<td>Student17</td>

<td>Languages</td>

<td>female</td>

</tr>

<tr>

<td>Student18</td>

<td>Mathematics</td>

</tr>

<tr>

<td>Student19</td>

<td>Languages</td>

</tr>

<tr>

<td>Student20</td>

<td>Mathematics</td>

</tr>

<tr>

<td>Student21</td>

<td>Languages</td>

</tr>

<tr>

<td>Student22</td>

<td>Mathematics</td>

</tr>

<tr>

<td>Student23</td>

<td>Languages</td>

<td>female</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 –%>

jQuery(document).ready(function() {

jQuery(“#myTable”)

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

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

});

</script>

Output:

Tags: jQuery, table sorter
Posted in jQuery | Leave a Comment »

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: ]

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

Here is the Step by step example :

1. Create table in your HTML File:

<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>

</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:

Customization:

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

sPaginationType”: “two_button”

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

Output 1:

- Gnaniyar Zubair

Tags: jQuery
Posted in jQuery | 1 Comment »

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

Tags: Introduction
Posted in Introduction | Leave a Comment »

	Gnaniyar Zubair on Create Struts Action Portlet i…
	Divya on Create Struts Action Portlet i…
	Divya on jQuery Autocomplete
	RRaveen on jQuery DatePicker
	Gnaniyar Zubair on jQuery Loading Indicator

Share your knowledge

jQuery Content Scroller

See demo

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

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

jQuery Alphapets Searching Plugin (ListNav)

HTML File:

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

Alphapets Searching Plugin : Demo 1

Alphapets Searching Plugin : Demo 2

jQuery Autocomplete

<head>

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

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

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

</head>

Table Sorter with Paging

<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“>

DataTable with Pagination , Search & Sorting

Output:

Output 1:

Introduction

Select Category

Blogroll

Blog Stats

Recent Posts

All Posts

Recent Comments

Tags