jquery admin tables

Benchmark created by Ken on

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<table id="adminTable" border="0" id="ctl00_ContentPlaceHolder1_listAgentes">
                <thead>
                        <tr>
                                <th class="checkBoxes" scope="col">&nbsp;</th><th scope="col">Nome</th><th class="email" scope="col">E-mail</th><th scope="col">Login</th><th class="short" scope="col">Categoria</th><th class="editar" scope="col">Editar</th><th class="excluir" scope="col">Excluir</th>

                        </tr>
                </thead><tbody>
                        <tr>
                                <td class="checkBoxes">8</td><td>Alex</td><td>alex@agenciasalve.com.br</td><td>alex</td><td>Usu&#225;rio</td><td class="editar"><a href="formAgentes.aspx?ID_Agente=8"><img src='../../img/botao_editar_on.gif' /></a></td><td class="excluir"><a href="deleteAgentes.aspx?ID_Agente=8"><img src='../../img/botao_eliminar_on.gif' /></a></td>
                        </tr><tr>
                                <td class="checkBoxes">7</td><td>Anderson</td><td>anderson.rocha@agenciasalve.com.br</td><td>anderson</td><td>Usu&#225;rio</td><td class="editar"><a href="formAgentes.aspx?ID_Agente=7"><img src='../../img/botao_editar_on.gif' /></a></td><td class="excluir"><a href="deleteAgentes.aspx?ID_Agente=7"><img src='../../img/botao_eliminar_on.gif' /></a></td>

                        </tr><tr>
                                <td class="checkBoxes">11</td><td>asdasd</td><td>asdasd</td><td>asdasd</td><td>Usu&#225;rio</td><td class="editar"><a href="formAgentes.aspx?ID_Agente=11"><img src='../../img/botao_editar_on.gif' /></a></td><td class="excluir"><a href="deleteAgentes.aspx?ID_Agente=11"><img src='../../img/botao_eliminar_on.gif' /></a></td>
                        </tr><tr>
                                <td class="checkBoxes">9</td><td>C&#237;cero Louren&#231;o</td><td>cicero@agenciasalve.com.br</td><td>cicero</td><td>Administrador</td><td class="editar"><a href="formAgentes.aspx?ID_Agente=9"><img src='../../img/botao_editar_on.gif' /></a></td><td class="excluir"><a href="deleteAgentes.aspx?ID_Agente=9"><img src='../../img/botao_eliminar_on.gif' /></a></td>

                        </tr><tr>
                                <td class="checkBoxes">3</td><td>Fabiana Rangel</td><td>fabiana@agenciasalve.com.br</td><td>fabiana</td><td>Administrador</td><td class="editar"><a href="formAgentes.aspx?ID_Agente=3"><img src='../../img/botao_editar_on.gif' /></a></td><td class="excluir"><a href="deleteAgentes.aspx?ID_Agente=3"><img src='../../img/botao_eliminar_on.gif' /></a></td>
                        </tr><tr>
                                <td class="checkBoxes">1</td><td>Jefferson Damasio</td><td>jefferson@agenciasalve.com.br</td><td>jdamasio</td><td>Administrador</td><td class="editar"><a href="formAgentes.aspx?ID_Agente=1"><img src='../../img/botao_editar_on.gif' /></a></td><td class="excluir"><a href="deleteAgentes.aspx?ID_Agente=1"><img src='../../img/botao_eliminar_on.gif' /></a></td>

                        </tr><tr>
                                <td class="checkBoxes">5</td><td>Ken Rosaka</td><td>ken_rosaka@hotmail.com</td><td>ken_rosaka</td><td>Administrador</td><td class="editar"><a href="formAgentes.aspx?ID_Agente=5"><img src='../../img/botao_editar_on.gif' /></a></td><td class="excluir"><a href="deleteAgentes.aspx?ID_Agente=5"><img src='../../img/botao_eliminar_on.gif' /></a></td>
                        </tr><tr>
                                <td class="checkBoxes">6</td><td>Ken Zarolis 210</td><td>ken.rosaka@gmail.com</td><td>ken210</td><td>Administrador</td><td class="editar"><a href="formAgentes.aspx?ID_Agente=6"><img src='../../img/botao_editar_on.gif' /></a></td><td class="excluir"><a href="deleteAgentes.aspx?ID_Agente=6"><img src='../../img/botao_eliminar_on.gif' /></a></td>

                        </tr><tr>
                                <td class="checkBoxes">10</td><td>Rodolfo Penteado</td><td>rodolfo@agenciasalve.com.br</td><td>rodolfo</td><td>Usu&#225;rio</td><td class="editar"><a href="formAgentes.aspx?ID_Agente=10"><img src='../../img/botao_editar_on.gif' /></a></td><td class="excluir"><a href="deleteAgentes.aspx?ID_Agente=10"><img src='../../img/botao_eliminar_on.gif' /></a></td>
                        </tr><tr>
                                <td class="checkBoxes">4</td><td>Teste Cadastro de Agente</td><td>teste@agenciasalve.com.br</td><td>testeCadastro</td><td>Usu&#225;rio</td><td class="editar"><a href="formAgentes.aspx?ID_Agente=4"><img src='../../img/botao_editar_on.gif' /></a></td><td class="excluir"><a href="deleteAgentes.aspx?ID_Agente=4"><img src='../../img/botao_eliminar_on.gif' /></a></td>

                        </tr>
                </tbody>
        </table>

 
<script>
  var totalPages = 4,
      table = $("#adminTable");
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
creating elements
// create placeholder
var placeholder = $('<div />').addClass('paginationWrap'),
    
    
    
    
    // create list
    list = $('<ul />').addClass('pagination'),
    
    
    
    
    // create previous and next button
    prev = $('<li />').append(
 $('<a />').addClass('prev').attr('href', '#anterior').html('« Previous')),
    
    
    next = $('<li />').append(
 $('<a />').addClass('next').attr('href', '#proxima').html('Next »'));

for (var i = 1; i <= totalPages; i++) {

 $('<li />').append(
 $('<a />').addClass('pageNumber').attr('href', '#' + i).html(i)).appendTo(list);

}

list.prepend(prev).append(next).appendTo(placeholder);

placeholder.appendTo($(table).closest('div'));
ready
caching them
// create placeholder
var placeholder = $('<div />', {
 addClass: 'paginationWrap'
}),
    
    
    
    
    
    
    
    // create list
    list = $('<ul />', {
  addClass: 'pagination'
 }),
    
    
    
    
    
    
    
    // chaching primary list item
    listItem = $('<li><a></a></li>'),
    
    
    
    
    
    
    
    // create previous and next button
    prev = listItem.find('a').addClass('prev').attr('href', '#previous').html('« Previous'),
    
    
    
    next = listItem.find('a').addClass('next').attr('href', '#next').html('Next »');

for (var i = 1; i <= totalPages; i++) {

 listItem.find('a').addClass('pageNumber').attr('href', '#' + i).html(i).end().appendTo(list);

}

list.prepend(prev).append(next).appendTo(placeholder);

placeholder.appendTo($(table).closest('div'));
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.