Skip to main content
4 de 6
adicionou 126 caracteres ao conteúdo
Tiago
  • 91
  • 1
  • 9

Datatables lento

Estou usando o datatables, mas ele demora muito para carregar com muitos registros. É possível melhorar esse carregamento de 5,985 registros?

Veja meu código:

    <div class="row">
          <div class="col-xs-12">
            <div class="table-responsive">
              <table id="tabela-agenda" class="table table-striped table-bordered table-hover">
                <thead>
                  <tr>
                    <th>Foto</th>
                    <th>Badge</th>
                    <th>Nome</th>
                    <th>E-mail</th>
                    <th class="hidden-480">Telefone</th>
                    <th class="hidden-480">Status</th>
                    <th></th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td><div class="visible-md visible-lg hidden-sm hidden-xs action-buttons"> 
                    
                    <?php if ($row_rs['badge'] != ""){?>
                    <a class="purple" href="carteirinha.php?badge=<?php echo $row_rs['badge']; ?>" onclick="return hs.htmlExpand(this, {objectType: 'iframe', width: 800, height:400 } )" title="Carteirinha"> <i class="icon-print bigger-130"></i> </a> 
                    <?php }?>
                    
                    <a class="blue" href="cadastroPerfil.php?id=<?php echo $row_rs['ID']; ?>&i=2a" title="Perfil"> <i class="icon-zoom-in bigger-130"></i> </a> 
                    <a class="green" href="cadastroEditar.php?id=<?php echo $row_rs['ID']; ?>&i=2a" title="Editar" onclick="return hs.htmlExpand(this, {objectType: 'iframe', width: 800, height: 600 } )"> <i class="icon-pencil bigger-130"></i> </a> 
                    <a class="red delete-event" href="cadastroApagar.php?id=<?php echo $row_rs['ID']; ?>&foto=<?php echo $row_rs['foto']; ?>&i=2a" title="Apagar" data-title="Apagar" data-content="Deseja apagar esse membro?" onClick="return false;"> <i class="icon-trash bigger-130"></i> </a> </div>
                      <div class="visible-xs visible-sm hidden-md hidden-lg">
                        <div class="inline position-relative">
                          <button class="btn btn-minier btn-yellow dropdown-toggle" data-toggle="dropdown"> <i class="icon-caret-down icon-only bigger-120"></i> </button>
                          <ul class="dropdown-menu dropdown-only-icon dropdown-yellow pull-right dropdown-caret dropdown-close">
                            <li> <a href="#" class="tooltip-info" data-rel="tooltip" title="Ver"> <span class="blue"> <i class="icon-zoom-in bigger-120"></i> </span> </a> </li>
                            <li> <a href="#" class="tooltip-success" data-rel="tooltip" title="Editar"> <span class="green"> <i class="icon-edit bigger-120"></i> </span> </a> </li>
                            <li> <a href="#" class="tooltip-error" data-rel="tooltip" title="Apagar"> <span class="red"> <i class="icon-trash bigger-120"></i> </span> </a> </li>
                          </ul>
                        </div>
                      </div></td>
                  </tr>
                </tbody>
              </table>
            </div >
          </div>
        </div>

Javascript que carrega:

<script src="assets/js/jquery.dataTables.js"></script>
<script src="assets/js/jquery.dataTables.bootstrap.js"></script>
<script type="text/javascript">
            var oTable1 = $('#tabela-agenda').dataTable({
                "bProcessing": true,
                "bServerSide": true,
                "sAjaxSource": "cadastroCarregaRegistros.php",
                columns: [
                    {
                        data: "foto", //Nome do campo no JSON, que contem a url da foto
                        render: function(value) {
                            return '<img src="/images/fotos/' + value + '" height="50" alt=""/>';
                        }
                    }, 
                    null,  
                    null, 
                    null, 
                    null, 
                    {
                        data: "status", //Nome do campo no JSON, retorna o status do cadastro
                        render: function(value) {
                            switch (value) {
                                case "N":
                                    return '<span class="label label-warning">Aguardando aprovação</span>';
                                    break; 
                                case "A":
                                    return '<span class="label label-success">Ativo</span>';
                                    break; 
                                case "V":
                                    return '<span class="label label-danger">Vencido</span>';
                                    break; 
                                case "B":
                                    return '<span class="label label-inverse">Banido</span>';
                                    break; 
                                case "FP":
                                    return '<span class="label label-purple">Falta Pagar</span>';
                                    break; 
                            }
                        }
                    }, 
                    null
                ]
            });
</script>

cadastroCarregaRegistros.php

<?php
    /*
     * Script:    DataTables server-side script for PHP and MySQL
     * Copyright: 2010 - Allan Jardine
     * License:   GPL v2 or BSD (3-point)
     */
    
    /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
     * Easy set variables
     */
    
    /* Array of database columns which should be read and sent back to DataTables. Use a space where
     * you want to insert a non-database field (for example a counter or static image)
     */
    $aColumns = array('ID', 'foto', 'badge', 'nome', 'email', 'tel_celu', 'status' );
    
    /* Indexed column (used for fast and accurate table cardinality) */
    $sIndexColumn = "ID";
    
    /* DB table to use */
    $sTable = "cadastro";
    
    /* Database connection information */
    $gaSql['user']       = "";
    $gaSql['password']   = "";
    $gaSql['db']         = "";
    $gaSql['server']     = "localhost";
    
    
    /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
     * If you just want to use the basic configuration for DataTables with PHP server-side, there is
     * no need to edit below this line
     */
    
    /* 
     * MySQL connection
     */
    $gaSql['link'] =  mysql_pconnect( $gaSql['server'], $gaSql['user'], $gaSql['password']  ) or
        die( 'Could not open connection to server' );
    
    mysql_select_db( $gaSql['db'], $gaSql['link'] ) or 
        die( 'Could not select database '. $gaSql['db'] );
    
    
    /* 
     * Paging
     */
    $sLimit = "";
    if ( isset( $_GET['iDisplayStart'] ) && $_GET['iDisplayLength'] != '-1' )
    {
        $sLimit = "LIMIT ".mysql_real_escape_string( $_GET['iDisplayStart'] ).", ".
            mysql_real_escape_string( $_GET['iDisplayLength'] );
    }
    
    
    /*
     * Ordering
     */
    if ( isset( $_GET['iSortCol_0'] ) )
    {
        $sOrder = "ORDER BY  ";
        for ( $i=0 ; $i<intval( $_GET['iSortingCols'] ) ; $i++ )
        {
            if ( $_GET[ 'bSortable_'.intval($_GET['iSortCol_'.$i]) ] == "true" )
            {
                $sOrder .= $aColumns[ intval( $_GET['iSortCol_'.$i] ) ]."
                    ".mysql_real_escape_string( $_GET['sSortDir_'.$i] ) .", ";
            }
        }
        
        $sOrder = substr_replace( $sOrder, "", -2 );
        if ( $sOrder == "ORDER BY" )
        {
            $sOrder = "";
        }
    }
    
    
    /* 
     * Filtering
     * NOTE this does not match the built-in DataTables filtering which does it
     * word by word on any field. It's possible to do here, but concerned about efficiency
     * on very large tables, and MySQL's regex functionality is very limited
     */
    $sWhere = "";
    if ( $_GET['sSearch'] != "" )
    {
        $sWhere = "WHERE (";
        for ( $i=0 ; $i<count($aColumns) ; $i++ )
        {
            $sWhere .= $aColumns[$i]." LIKE '%".mysql_real_escape_string( $_GET['sSearch'] )."%' OR ";
        }
        $sWhere = substr_replace( $sWhere, "", -3 );
        $sWhere .= ')';
    }
    
    /* Individual column filtering */
    for ( $i=0 ; $i<count($aColumns) ; $i++ )
    {
        if ( $_GET['bSearchable_'.$i] == "true" && $_GET['sSearch_'.$i] != '' )
        {
            if ( $sWhere == "" )
            {
                $sWhere = "WHERE ";
            }
            else
            {
                $sWhere .= " AND ";
            }
            $sWhere .= $aColumns[$i]." LIKE '%".mysql_real_escape_string($_GET['sSearch_'.$i])."%' ";
        }
    }
    
    
    /*
     * SQL queries
     * Get data to display
     */
    $sQuery = "
        SELECT SQL_CALC_FOUND_ROWS ".str_replace(" , ", " ", implode(", ", $aColumns))."
        FROM   $sTable
        $sWhere
        $sOrder
        $sLimit
    ";
    $rResult = mysql_query( $sQuery, $gaSql['link'] ) or die(mysql_error());
    
    /* Data set length after filtering */
    $sQuery = "
        SELECT FOUND_ROWS()
    ";
    $rResultFilterTotal = mysql_query( $sQuery, $gaSql['link'] ) or die(mysql_error());
    $aResultFilterTotal = mysql_fetch_array($rResultFilterTotal);
    $iFilteredTotal = $aResultFilterTotal[0];
    
    /* Total data set length */
    $sQuery = "
        SELECT COUNT(".$sIndexColumn.")
        FROM   $sTable
    ";
    $rResultTotal = mysql_query( $sQuery, $gaSql['link'] ) or die(mysql_error());
    $aResultTotal = mysql_fetch_array($rResultTotal);
    $iTotal = $aResultTotal[0];
    
    
    /*
     * Output
     */
    $output = array(
        "sEcho" => intval($_GET['sEcho']),
        "iTotalRecords" => $iTotal,
        "iTotalDisplayRecords" => $iFilteredTotal,
        "aaData" => array()
    );
    
    while ( $aRow = mysql_fetch_array( $rResult ) )
    {
        $row = array();
        for ( $i=0 ; $i<count($aColumns) ; $i++ )
        {
            if ( $aColumns[$i] == "version" )
            {
                /* Special output formatting for 'version' column */
                $row[] = ($aRow[ $aColumns[$i] ]=="0") ? '-' : $aRow[ $aColumns[$i] ];
            }
            else if ( $aColumns[$i] != ' ' )
            {
                /* General output */
                $row[] = $aRow[ $aColumns[$i] ];
            }
        }
        $output['aaData'][] = $row;
    }
    
    $obj = json_encode( $output );
    echo $obj;
?>
Tiago
  • 91
  • 1
  • 9