How to use date table bootstrap

Question

I wanted to use this date table, to search a lot of database data. I could, but it takes 12 seconds to load the page. Because you have a lot of data on file. Someone has an example of how you could do it ?

Follows the code:

Front:

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <span class="titleCadastros">LISTAR FROTA</span>
        </div>
        <div class="col-md-12">
            <div class="row">
                <div class="col-md-6">
                    <span class="titleCadastros botaoCad"><a href="cadastrar-frotas.php">CADASTRAR FROTA</a></span>
                </div>
            </div>
        </div>
        <div class="col-md-12 m-b-50">           
            <table id="example" class="display" style="width:100%">
                <thead>
                    <tr>
                        <th>Nome das colunas</th>
                        <th>Nome das colunas</th>
                        <th>Nome das colunas</th>
                        <th>Nome das colunas</th>
                        <th>Nome das colunas</th>
                        <th>Nome das colunas</th>
                    </tr>
                </thead>
                <tbody>
                // Aqui eu coloquei o Laço de repetição
                <?php
                $read = new Read;
                $read->ExeRead('frota', 'ORDER BY id DESC');

                foreach ($read->getResult() as $v):
                   extract($v);

                ?>
                <tr class="odd">
                    <td>$dadosaqui</td>
                    <td>$dadosaqui</td>
                    <td>$dadosaqui</td>
                    <td>$dadosaqui</td>
                    <td>$dadosaqui</td>
                    <td>$dadosaqui</td>
                </tr>
                <?php
                endforeach;
                ?>
                </tbody>
                <tfoot>
                    <tr>
                        <th>Nome das colunas</th>
                        <th>Nome das colunas</th>
                        <th>Nome das colunas</th>
                        <th>Nome das colunas</th>
                        <th>Nome das colunas</th>
                        <th>Nome das colunas</th>
                    </tr>
                </tfoot>
            </table>

Js:

$(document).ready(function() {
    $('#example').DataTable({
        "processing": true,
        "serverSide": true,
        "ajax": "js/scripts/recebe_frotas.php",
        "deferLoading": 57,
        "oLanguage": {
                    "sProcessing":   "Processando...",
                    "sLengthMenu":   "Mostrar _MENU_ registros",
                    "sZeroRecords":  "Não foram encontrados resultados",
                    "sInfo":         "Mostrando de _START_ até _END_ de _TOTAL_ registros",
                    "sInfoEmpty":    "Mostrando de 0 até 0 de 0 registros",
                    "sInfoFiltered": "",
                    "sInfoPostFix":  "",
                    "sSearch":       "Buscar:",
                    "sUrl":          "",
                    "oPaginate": {
                        "sFirst":    "Primeiro",
                        "sPrevious": "Anterior",
                        "sNext":     "Seguinte",
                        "sLast":     "Último"
                    }
                }
    });    
} );

File that receives Js (received_fleets.php)

/*
 * DataTables example server-side processing script.
 *
 * Please note that this script is intentionally extremely simply to show how
 * server-side processing can be implemented, and probably shouldn't be used as
 * the basis for a large complex system. It is suitable for simple use cases as
 * for learning.
 *
 * See http://datatables.net/usage/server-side for full details on the server-
 * side processing requirements of DataTables.
 *
 * @license MIT - http://datatables.net/license_mit
 */

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * Easy set variables
 */

// DB table to use
$table = 'frota';

// Table's primary key
$primaryKey = 'id';

// Array of database columns which should be read and sent back to DataTables.
// The `db` parameter represents the column name in the database, while the `dt`
// parameter represents the DataTables column identifier. In this case simple
// indexes
$columns = array(
    array( 'db' => 'id', 'dt' => 0 ),
    array( 'db' => 'seguradora_id',  'dt' => 1 ),
    array( 'db' => 'rastreador_id',   'dt' => 2 ),
    array( 'db' => 'placacavalo',     'dt' => 3 )    
);

// SQL server connection information
$sql_details = array(
    'user' => 'root',
    'pass' => '',
    'db'   => 'sistema_frota',
    'host' => '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.
 */

require( 'ssp.class.php' ); // na documentação tem esse arquivo, mas não sei o que seria!

echo json_encode(
    SSP::simple( $_GET, $sql_details, $table, $primaryKey, $columns )
);

Answer 1

Guys, I managed to fix the error, I simply include the file (ssp.class.php), which I downloaded here: https://github.com/DataTables/DataTables/blob/master/examples/server_side/scripts/ssp.class.php

And in the array fields, you have to have the same amount of columns as your table:

Stayed like this:

$Columns = array( array( 'db' => 'id', 'dt' => 0 ), array( 'db' => 'cliente_id', 'dt' => 1 ), array( 'db' => 'insurer', 'dt' => 2 ), array( 'db' => 'tracker_id', 'dt' => 3 ), array( 'db' => 'placacavalo', 'dt' => 4 ), array( 'db' => 'tag', 'dt' => 5 ), array( 'db' => 'model', 'dt' => 6 ), array( 'db' => 'data', 'dt' => 7 ), array( 'db' => 'chassis', 'dt' => 8 ) );

BUT NOW THE QUESTION IS, HOW TO PUT TWO BUTTON, EDIT AND DELETE AT THE END OF THE TABLE, AND IF YOU PUT BUTTON AT THE END, THE TABLE DOESN’T WORK :(