#jquery plugin interactive

New Post has been published on http://www.htmluse.com/sieve-search-tables-blocks-anything/

Sieve - Search tables, blocks, anything

Download   Demo

Sieve is a jQuery plugin allows you to quickly add an interactive search filter to any block of content.

1. INCLUDE CSS AND JS FILES

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> <script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script> <script src="dist/jquery.sieve.min.js" type="text/javascript"></script>

2. HTML

<table class="table table-hover table-bordered table-sieve"> <thead> <tr> <th>President</th> <th>Birthplace</th> </tr> </thead> <tbody> <tr><td>Zachary Taylor</td><td>Barboursville, Virginia</td></tr> <tr><td>Warren G. Harding</td><td>Blooming Grove, Ohio</td></tr> <tr><td>John Quincy Adams</td><td>Braintree, Massachusetts</td></tr> <tr><td>John F. Kennedy</td><td>Brookline, Massachusetts</td></tr> <tr><td>Grover Cleveland</td><td>Caldwell, New Jersey</td></tr> <tr><td>William Henry Harrison</td><td>Charles City County, Virginia</td></tr> <tr><td>John Tyler</td><td>Charles City County, Virginia</td></tr> <tr><td>William Howard Taft</td><td>Cincinnati, Ohio</td></tr> <tr><td>James Buchanan</td><td>Cove Gap, Pennsylvania</td></tr> <tr><td>Rutherford B. Hayes</td><td>Delaware, Ohio</td></tr> <tr><td>Dwight D. Eisenhower</td><td>Denison, Texas</td></tr> <tr><td>Chester A. Arthur</td><td>Fairfield, Vermont</td></tr> <tr><td>Franklin Pierce</td><td>Hillsborough, New Hampshire</td></tr> <tr><td>Barack Obama</td><td>Honolulu, Hawaii</td></tr> <tr><td>Bill Clinton</td><td>Hope, Arkansas</td></tr> <tr><td>Franklin D. Roosevelt</td><td>Hyde Park, New York</td></tr> <tr><td>Martin Van Buren</td><td>Kinderhook, New York</td></tr> <tr><td>Harry S. Truman</td><td>Lamar, Missouri</td></tr> <tr><td>Andrew Jackson</td><td>Lancaster County, South Carolina</td></tr> <tr><td>George H. W. Bush</td><td>Milton, Massachusetts</td></tr> <tr><td>James A. Garfield</td><td>Moreland Hills, Ohio</td></tr> <tr><td>George W. Bush</td><td>New Haven, Connecticut</td></tr> <tr><td>Theodore Roosevelt</td><td>New York City, New York</td></tr> <tr><td>William McKinley</td><td>Niles, Ohio</td></tr> <tr><td>Abraham Lincoln</td><td>Nolin Creek, Kentucky</td></tr> <tr><td>Benjamin Harrison</td><td>North Bend, Ohio</td></tr> <tr><td>Gerald Ford</td><td>Omaha, Nebraska</td></tr> <tr><td>James K. Polk</td><td>Pineville, North Carolina</td></tr> <tr><td>Jimmy Carter</td><td>Plains, Georgia</td></tr> <tr><td>Calvin Coolidge</td><td>Plymouth, Vermont</td></tr> <tr><td>Ulysses S. Grant</td><td>Point Pleasant, Ohio</td></tr> <tr><td>James Madison</td><td>Port Conway, Virginia</td></tr> <tr><td>John Adams</td><td>Braintree, Massachusetts</td></tr> <tr><td>Andrew Johnson</td><td>Raleigh, North Carolina</td></tr> <tr><td>Thomas Jefferson</td><td>Shadwell, Virginia</td></tr> <tr><td>Lyndon B. Johnson</td><td>Stonewall, Texas</td></tr> <tr><td>Woodrow Wilson</td><td>Staunton, Virginia</td></tr> <tr><td>Millard Fillmore</td><td>Moravia, New York</td></tr> <tr><td>Ronald Reagan</td><td>Tampico, Illinois</td></tr> <tr><td>Herbert Hoover</td><td>West Branch, Iowa</td></tr> <tr><td>George Washington</td><td>Westmoreland County, Virginia</td></tr> <tr><td>James Monroe</td><td>Westmoreland County, Virginia</td></tr> <tr><td>Richard Nixon</td><td>Yorba Linda, California</td></tr> </tbody> </table>

3. JAVASCRIPT

var searchTemplate = "<div class='row form-inline'><label style='float: right;'>Search: <input type='text' class='form-control' placeholder='(start typing)'></label></div>" $(".table-sieve").sieve( searchTemplate: searchTemplate );

  In the simplest case, you can add a search filter to any table. By default, this example will filter all rows in the <tbody> section of a <table class=”sieve”>.

$(document).ready(function() $("table.sieve").sieve(); );

To filter a list of paragraphs, override the itemSelector option. This example will filter all <p> elements within the <section class=”sieve”> container.

$(document).ready(function() $("section.sieve").sieve( itemSelector: "p" ); );