<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-md-3"> <form action="#" method="get"> <div class="input-group"> <!-- USE TWITTER TYPEAHEAD JSON WITH API TO SEARCH --> <input class="form-control" id="system-search" name="q" placeholder="Pesquisar" required> <span class="input-group-btn"> <button type="submit" class="btn btn-default"><i class="glyphicon glyphicon-search"></i></button> </span> </div> </form> </div> </br> <div class="col-md-9"> <table class="table table-list-search table-hover table-condensed" > <thead> <tr> <th>Status</th> <th>UF</th> <th>Sindicato</th> <th>Empresa</th> <th>Editar</th> <th>Excluir</th> </tr> </thead> <tbody id="myTable"> <tr> <td><span class="label label-danger">Danger</span></td> <td>Filter</td> <td>12-11-2011 11:11</td> <td>OK</td> <td><p data-placement="top" data-toggle="tooltip" title="Edit"><button class="btn btn-primary btn-xs" data-title="Edit" data-toggle="modal" data-target="#edit" ><span class="glyphicon glyphicon-pencil"></span></button></p></td> <td><p data-placement="top" data-toggle="tooltip" title="Delete"><button class="btn btn-danger btn-xs" data-title="Delete" data-toggle="modal" data-target="#delete" ><span class="glyphicon glyphicon-trash"></span></button></p></td> </tr> <tr> <td><span class="label label-default">Default</span></td> <td>It</td> <td>11-20-2013 08:56</td> <td>It</td> <td>Works</td> <td>Do some FILTERME</td> </tr> <tr> <td><span class="label label-success">Success</span></td> <td>$</td> <td>%</td> <td>&</td> <td>/</td> <td>!</td> </tr> </tbody> </table> <div class="col-md-12 text-center"> <ul class="pagination pagination-sm" id="myPager"></ul> </div> </div> </div> </div>

body { margin-top: 2% }

$.fn.pageMe = function(opts){ var $this = this, defaults = { perPage: 7, showPrevNext: false, hidePageNumbers: false }, settings = $.extend(defaults, opts); var listElement = $this; var perPage = settings.perPage; var children = listElement.children(); var pager = $('.pager'); if (typeof settings.childSelector!="undefined") { children = listElement.find(settings.childSelector); } if (typeof settings.pagerSelector!="undefined") { pager = $(settings.pagerSelector); } var numItems = children.size(); var numPages = Math.ceil(numItems/perPage); pager.data("curr",0); if (settings.showPrevNext){ $('<li><a href="#" class="prev_link">«</a></li>').appendTo(pager); } var curr = 0; while(numPages > curr && (settings.hidePageNumbers==false)){ $('<li><a href="#" class="page_link">'+(curr+1)+'</a></li>').appendTo(pager); curr++; } if (settings.showPrevNext){ $('<li><a href="#" class="next_link">»</a></li>').appendTo(pager); } pager.find('.page_link:first').addClass('active'); pager.find('.prev_link').hide(); if (numPages<=1) { pager.find('.next_link').hide(); } pager.children().eq(1).addClass("active"); children.hide(); children.slice(0, perPage).show(); pager.find('li .page_link').click(function(){ var clickedPage = $(this).html().valueOf()-1; goTo(clickedPage,perPage); return false; }); pager.find('li .prev_link').click(function(){ previous(); return false; }); pager.find('li .next_link').click(function(){ next(); return false; }); function previous(){ var goToPage = parseInt(pager.data("curr")) - 1; goTo(goToPage); } function next(){ goToPage = parseInt(pager.data("curr")) + 1; goTo(goToPage); } function goTo(page){ var startAt = page * perPage, endOn = startAt + perPage; children.css('display','none').slice(startAt, endOn).show(); if (page>=1) { pager.find('.prev_link').show(); } else { pager.find('.prev_link').hide(); } if (page<(numPages-1)) { pager.find('.next_link').show(); } else { pager.find('.next_link').hide(); } pager.data("curr",page); pager.children().removeClass("active"); pager.children().eq(page+1).addClass("active"); } }; $(document).ready(function(){ $('#myTable').pageMe({pagerSelector:'#myPager',showPrevNext:true,hidePageNumbers:false,perPage:2}); }); $(document).ready(function() { var activeSystemClass = $('.list-group-item.active'); //something is entered in search form $('#system-search').keyup( function() { var that = this; // affect all table rows on in systems table var tableBody = $('.table-list-search tbody'); var tableRowsClass = $('.table-list-search tbody tr'); $('.search-sf').remove(); tableRowsClass.each( function(i, val) { //Lower text for case insensitive var rowText = $(val).text().toLowerCase(); var inputText = $(that).val().toLowerCase(); if(inputText != '') { $('.search-query-sf').remove(); tableBody.prepend('<tr class="search-query-sf"><td colspan="6"><strong>Searching for: "' + $(that).val() + '"</strong></td></tr>'); } else { $('.search-query-sf').remove(); } if( rowText.indexOf( inputText ) == -1 ) { //hide rows tableRowsClass.eq(i).hide(); } else { $('.search-sf').remove(); tableRowsClass.eq(i).show(); } }); //all tr elements are hidden if(tableRowsClass.children(':visible').length == 0) { tableBody.append('<tr class="search-sf"><td class="text-muted" colspan="6">No entries found.</td></tr>'); } }); });