Skip to main content
Maior clareza na pergunta e alinhamento do HTML e JavaScript
Fonte Link

Possuo uma base de dados com 5.985 registros. Estou usando o datatablesdataTables, mas ele demora muito para carregar com muitos registros. É

É possível melhorar esse carregamento de 5,985 registros?

    <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></td>
      <td>
              <td><div<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>div>
                  </tr>td>
                </tbody>tr>
        </tbody>
      </table>
            </div >div>
          </div>
        </div>
<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>

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

    <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>
<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>

Possuo uma base de dados com 5.985 registros. Estou usando o dataTables, mas ele demora muito para carregar.

É possível melhorar esse carregamento?

<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>
<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>
Pergunta fechada como "Muito ampla" por Bruno Augusto, CesarMiguel, gmsantos, Erlon Charles, Jorge B.
adicionou 126 caracteres ao conteúdo
Fonte Link
Tiago
  • 91
  • 1
  • 9
    <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><img src="images/fotos/<?php echo $row_rs['foto']; ?>" height="50" alt=""/><<td></td>
                    <td><?php echo $row_rs['badge']; ?></td>
                    <td><?php echo $row_rs['nome']; ?></td>
                    <td><?php echo $row_rs['email']; ?></td>
                    <td><?php echo $row_rs['tel_celu']; ?></td>
                    <td>
                    
                    <?php   
                    switch ($row_rs['status']) {
                        case "N":
                            echo '<span class="label label-warning">Aguardando aprovação</span>';
                            break;
                        case "A":
                            echo '<span class="label label-success">Ativo</span>';
                            break;
                        case "V":
                            echo '<span class="label label-danger">Vencido</span>';
                            break;
                        case "B":
                            echo '<span class="label label-inverse">Banido</span>';
                            break;
                        case "FP":
                            echo '<span class="label label-purple">Falta Pagar</span>';
                            break;
                    }
                    ?>
                    
                    <<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>
<script src="assets/js/jquery.dataTables.js"></script>
<script src="assets/js/jquery.dataTables.bootstrap.js"></script>
<script type="text/javascript">
            jQueryvar 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) {
                var oTable1 = $         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('#tabela-agenda'value).dataTable {
                            switch (value) {
                    "bProcessing"            case "N": 
 true,                                   return '<span class="label label-warning">Aguardando aprovação</span>';
                    "bServerSide"                break; 
                                case "A": 
 true,                                   return '<span class="label label-success">Ativo</span>';
                    "sAjaxSource"                break; 
                                case "V": 
 "cadastroCarregaRegistros.php"                                   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>
<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><img src="images/fotos/<?php echo $row_rs['foto']; ?>" height="50" alt=""/></td>
                    <td><?php echo $row_rs['badge']; ?></td>
                    <td><?php echo $row_rs['nome']; ?></td>
                    <td><?php echo $row_rs['email']; ?></td>
                    <td><?php echo $row_rs['tel_celu']; ?></td>
                    <td>
                    
                    <?php   
                    switch ($row_rs['status']) {
                        case "N":
                            echo '<span class="label label-warning">Aguardando aprovação</span>';
                            break;
                        case "A":
                            echo '<span class="label label-success">Ativo</span>';
                            break;
                        case "V":
                            echo '<span class="label label-danger">Vencido</span>';
                            break;
                        case "B":
                            echo '<span class="label label-inverse">Banido</span>';
                            break;
                        case "FP":
                            echo '<span class="label label-purple">Falta Pagar</span>';
                            break;
                    }
                    ?>
                    
                    </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>
<script src="assets/js/jquery.dataTables.js"></script>
<script src="assets/js/jquery.dataTables.bootstrap.js"></script>
<script type="text/javascript">
            jQuery(function($) {
                var oTable1 = $('#tabela-agenda').dataTable({
                    "bProcessing": true,
                    "bServerSide": true,
                    "sAjaxSource": "cadastroCarregaRegistros.php"
                });
</script>
    <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>
<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>
adicionou 7972 caracteres ao conteúdo
Fonte Link
Tiago
  • 91
  • 1
  • 9
Carregando
adicionou 1224 caracteres ao conteúdo
Fonte Link
Tiago
  • 91
  • 1
  • 9
Carregando
Fonte Link
Tiago
  • 91
  • 1
  • 9
Carregando