#search table

New Post has been published on http://www.htmluse.com/pbtable-jquery-plugin-to-enhance-html-tables/

pbTable - jQuery plugin to enhance HTML tables

Download   Demo

pbTable is a jQuery table manipulation plugin styled with Bootstrap3 that enables the visitor to search, filter, select, and sort an Html table.

Compatibility

Chrome 6+

Firefox 4+

Safari 5+

Opera 11+

Internet Explorer 9+

1. INCLUDE CSS AND JS FILES

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <script src="pbTable.js"></script>

2. HTML

<table id="tablaDatos" class="table table-striped"> <thead> <tr> <th class="col-md-2">Nro</th> <th class="col-md-2">Super-Héroe</th> <th class="col-md-9">Descripción</th> <th hidden>Sexo</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Batman</td> <td>Hombre murcielago. Puede pasar toda la noche sin dormir. Vive en ciudad Gotica</td> <td hidden>Hombre</td> </tr> <tr> <td>2</td> <td>Robin</td> <td>Es el ayudante de Batman.</td> <td hidden>Hombre</td> </tr> <tr> <td>3</td> <td>Superman</td> <td>Es un hombre comun, pero tiene super-poderes. Puede volar. Es novio de Luisa Lane</td> <td hidden>Hombre</td> </tr> <tr> <td>4</td> <td>El Zorro</td> <td>Superheroe latinoamericano. Es en realidad Don Diego de La Vega. Es muy astuto.</td> <td hidden>Hombre</td> </tr> <tr> <td>5</td> <td>Chapulin colorado</td> <td>Más ágil que una tortuga, más noble que una lechuga... su escudo es un corazón.</td> <td hidden>Hombre</td> </tr> <tr> <td>6</td> <td>Wonder Woman</td> <td>Es una chica. Usa culotte muy grande y tiene un lazo.</td> <td hidden>Mujer</td> </tr> </tbody> </table>

3. JAVASCRIPT

$(document).ready(function(e) $('#tablaDatos').pbTable( selectable: true, sortable:true, toolbar: enabled:true, filterBox:true, tags:[ display:'Todos', toSearch:'' , display:'Batman', toSearch:'batman' , display:'CH', toSearch:'Chapulin colorado' , display:'Hombre', toSearch:'Hombre' , display:'Mujer', toSearch:'Mujer' , ], buttons:['view', 'edit', 'delete'] , onView:function() alert('View button was pressed'); , onEdit:function() alert('Edit button was pressed'); , onDelete:function() alert('Delete button was pressed'); ); );

4. OPTIONS

Property Data Default value Description selectable Boolean true Indica si pueden seleccionarse las filas de la tabla sortable Boolean true Indica si pueden ordenarse las filas de la tabla toolbar Object - Contiene las propiedades de la barra superior de la tabla toolbar.enabled boolean true Indica si la barra superior de la tabla esta visible toolbar.filterBox boolean true Indica si la barra superior contiene un cuadro de busquedas toolbar.tags Array de Objetos [display:'Todos', toSearch:''] Contiene las propiedades de los tags rapidos del cuadro de busqueda toolbar.tags.display String - Cadena a mostrar para para el tag correspondiente toolbar.tags.toSearch String - Cadena a buscar para para el tag correspondiente toolbar.buttons Array de Strings ['view', 'edit', 'delete', 'new', 'print', 'receipt'] Lista de botones que se mostraran en la barra superior

5. CALLBACKS

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" ); );