jQuery Plugin To Search, Filter and Sort Html Table - pbTable

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

How to use it:

1. Include the jQuery javascript library and jQuery pbTable plugin in the document.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="pbTable.min.js"></script>

2. Include Twitter Boostrap 3's CSS in the document.

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

3. Create a standard Html table.

<table id="table-demo" class="table table-striped">
<thead>
<tr>
<th>NO.</th>
<th>Super Heros</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Batman</td>
<td>Batman is a fictional character, a comic book superhero appearing in comic books published by DC Comics.</td>
</tr>
<tr>
<td>2</td>
<td>Robin</td>
<td>Robin is a real boy, a superhero in the DC Comics universe. </td>
</tr>
<tr>
<td>3</td>
<td>Superman</td>
<td>Superman is a fictional character, a superhero that appears in comic books published by DC Comics, and is considered an American cultural icon.</td>
</tr>
<tr>
<td>4</td>
<td>Wonder Woman</td>
<td>Wonder Woman has also regularly appeared in comic books featuring the superhero teams Justice Society (from 1941) and Justice League (from 1960).</td>
</tr>
</tbody>
</table>

4. The javascript.

<script>
$(document).ready(function(e) {
$('#tabla-demo').pbTable({
selectable: true,
sortable:true,
toolbar:{
enabled:true,
filterBox:true,
tags:[
  {
display:'Woman',
toSearch:'woman'
  },
  {
display:'Batman',
toSearch:'batman'
  },
  {
display:'DC Comics',
toSearch:'DC Comics'
  },
],
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');
}
});
});
</script>

Change log:

v2.0 (2015-04-24)

• new version

---

This awesome jQuery plugin is developed by pieroblunda. For more Advanced Usages, please check the demo page or visit the official website.