<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"> </p> <div class="row"> <div class="col-sm-10 col-sm-offset-1"> <h3>Lista de chamada</h3> <table id="zipTable" class="table"> <tr> <th>Turma</th> <th>Nome do Aluno</th> <th>Data de Nascimento</th> <th>Presença</th> </tr> <tr> <td>A</td> <td>Diogo</td> <td>19/02/2014</td> <td> <select id="selectbasic" name="selectbasic" class="form-control"> <option value="0">Escolha</option> <option value="1">Presente</option> <option value="2">Faltou</option> <option value="3">Inativo</option> </select> </div> </div></td> <td></td> </tr> <tr> <td>A</td> <td>Isabelly</td> <td>25/09/2015</td> <td> <select id="selectbasic" name="selectbasic" class="form-control"> <option value="0">Escolha</option> <option value="1">Presente</option> <option value="2">Faltou</option> <option value="3">Inativo</option> </select> </div> </div></td> </tr> <tr> <td>A</td> <td>Pedro</td> <td>15/06/2015</td> <td> <select id="selectbasic" name="selectbasic" class="form-control"> <option value="0">Escolha</option> <option value="1">Presente</option> <option value="2">Faltou</option> <option value="3">Inativo</option> </select> </div> </div></td> <tr> <td>A</td> <td>Diego</td> <td>22/02/2014</td> <td> <select id="selectbasic" name="selectbasic" class="form-control"> <option value="0">Escolha</option> <option value="1">Presente</option> <option value="2">Faltou</option> <option value="3">Inativo</option> </select> </div> </div></td> <tr> <td>A</td> <td>Ana</td> <td>29/11/2015</td> <td> <select id="selectbasic" name="selectbasic" class="form-control"> <option value="0">Escolha</option> <option value="1">Presente</option> <option value="2">Faltou</option> <option value="3">Inativo</option> </select> </div> </div></td> <tr> <td>A</td> <td>Jefferson</td> <td>15/09/2015</td> <td> <select id="selectbasic" name="selectbasic" class="form-control"> <option value="0">Escolha</option> <option value="1">Presente</option> <option value="2">Faltou</option> <option value="3">Inativo</option> </select> </div> </div></td> <tr> <td>A</td> <td>Bruno</td> <td>15/02/2015</td> <td> <select id="selectbasic" name="selectbasic" class="form-control"> <option value="0">Escolha</option> <option value="1">Presente</option> <option value="2">Faltou</option> <option value="3">Inativo</option> </select> </div> </div></td> </tr> </table> <br /> <form class="form-horizontal"> <fieldset> <!-- Button --> <div class="form-group"> <label class="col-md-4 control-label" for="singlebutton"></label> <div class="col-md-4"> <button id="singlebutton" name="singlebutton" class="btn btn-primary">Enviar</button> </div> </div> </fieldset> </form> </div> </div> </div>

//Beginning of plugin (function ($) { $.fn.page = function (PageSize) { $(this).addClass("page-table") var tableId = $(this).attr("id"); //if id is not defined for table. Do Nothing. if (typeof tableId == 'undefined') { return this; }; //Check for controls for this table and remove $('.pagination[for="' + tableId + '"]').remove(); //Check for valid variable for pageSize if not set to default of 10 if (typeof PageSize == 'number') { PageSize = parseInt(PageSize); } else if (typeof PageSize == 'string') { if ($.isNumeric(PageSize) == true) { PageSize = parseInt(PageSize); } else { PageSize = 10; } } else { PageSize = 10; } //Add pagination <ul> to hold controls $(this).after('<ul class="pagination" for="' + tableId + '"></ul>'); //Add a pager control for each page var currpage = 1; var item = 1; $(this).find('tr:has(td)').each(function () { $(this).attr('data-page', currpage); if ((item % PageSize) == 0) { currpage = currpage + 1; $('.pagination[for="' + tableId + '"]').append('<li><a href="#" data-page="' + currpage + '" for="' + tableId + '">' + currpage + '</a></li>') } else if (item == 1) { $('.pagination[for="' + tableId + '"]').append('<li><a href="#" class="active" data-page="' + currpage + '" for="' + tableId + '">' + currpage + '</a></li>') } item = item + 1; }); //load 1st page pageNumber(1, tableId); $(this).next('.pagination[for="' + tableId + '"]').find('a').on('click', function (e) { e.preventDefault(); pageNumber($(this).attr('data-page'), this); }); return this; } // Private function page change function pageNumber(iPage, element) { if (typeof element == 'string') { var target = element; } else { var target = $(element).attr("for"); } if (typeof target == 'undefined') { $('.page-table tr:has(td)').hide(); $('.page-table tr[data-page="' + iPage + '"]').show(); } else { $('#' + target + ' tr:has(td)').hide(); $('#' + target + ' tr[data-page="' + iPage + '"]').show(); } }; })(jQuery); //End of plugin Beginning of Initialization //if no page size is passed default is 10. Below we are setting page size to 20 $('#zipTable').page(20); //Changes page size from select value $('select[for="zipTable"]').on('change', function () { $('#zipTable').page($(this).val()); });