jQuery Plugin To Search, Filter and Sort Html Table - pbTable
File Size: | 18.2 KB |
---|---|
Views Total: | 17903 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.