pbTable - jQuery plugin to enhance HTML tables

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

• denizli escort
• denizli escort
• didim escort
• düzce escort
• edirne escort
• edirne escort
• edremit escort

Source: pieroblunda.github.io

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&oacute;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

5. CALLBACKS