advanced datatables CodeIgniter

1

I'm breaking my head with a little something in CodeIgniter, I need to create an advanced table that extends details about each table item, as you can see in the code below I can not separate a detail line for table item, att;

<div class="col-md-offset-2">
<div class="col-md-10">
    <? //
    $tmpl = array(
        'table_open' => '<table class="table table-striped table-bordered table-hover" id="tabela_poas">',
        'heading_row_start' => '<tr>',
        'heading_row_end' => '</tr>',
        'heading_cell_start' => '<th>',
        'heading_cell_end' => '</th>',

        'row_start' => '<tr data-toggle="collapse" data-target="#demo1">',
        'row_end' => '</tr>',
        'cell_start' => '<td align="center" role="row">',
        'cell_end' => '</td>',

        'row_alt_start' => '<tr>',
        'row_alt_end' => '</tr>',
        'cell_alt_start' => '<td align="center">',
        'cell_alt_end' => '</td>',

        'table_close' => '</table>'
    );

    //        ?>
    <script>
        $(document).ready(function () {
            //                TableAdvanced.init('tabela_poas');
            //                iniciar_tabela('tabela_poas');
            Init_mascaras_jquery();
            TableAdvanced.init('tabela_poas');
        });

        //            jQuery(document).ready(function () {
        //                Metronic.init(); // init metronic core components
        //                Layout.init(); // init current layout
        //                Demo.init(); // init demo features
        //
        //            });

    </script>
    <input type="hidden" id="idquadro" value="<? // echo @$quadro_por_id[0]->IDQUADRO; ?>">

    <div class="row">
        <div class="col-md-12">
            <? //

            $detalhes = '

                    <div class="accordian-body collapse" id="demo1">
                        <table class="table table-striped table-bordered table-hover">
                            <thead>

                            <tr>
                                <th>Access Key</th>
                                <th>Secret Key</th>
                                <th>Status</th>
                                <th> Created</th>
                                <th> Expires</th>

                            </tr>
                            </thead>
                            <tbody >
                           <td class="details" colspan="5">
                           </td>

                           </tr>

                            </tbody>
                        </table>

                    </div>

           ';

            if (isset($dados_produtos[0])) {
                foreach ($dados_produtos as $row) {
                    $cell = array('data' => $detalhes, 'class' => 'highlight', 'colspan' => 7);
                    $this->table->set_template($tmpl);
                    $this->table->set_heading('IdItem', 'Modalidade', 'Área', 'Titulo', 'Beneficiário', 'Valor Aprovado', 'Detalhes');
                    $this->table->add_row(

                        @$row->idpoaitem,
                        @$row->modalidade,
                        @$row->area,
                        @$row->titulo,
                        @$row->beneficiario,
                        @$row->valoraprovado,
                        '  <button class="btn btn-default btn-xs"><span class="glyphicon glyphicon-eye-open"></span>
                    </button>'
                    );

                    $this->table->add_row($cell);
                }
            }
            ?>
        </div>
    </div>
    <? echo $this->table->generate() . '<br><br>'; ?>
</div>

    
asked by anonymous 20.12.2016 / 19:11

1 answer

0

I was curious, and went to research a little about your doubt. I thought your problem would be solved by here . See the application ( you click on the line to expand the details ):

.hiddenRow {
  padding: 0 !important;
}
<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet" />
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script><title>TabelaAccordion</title></head><body><divclass='container'><br><tableclass="table table-bordered">
      <thead>
        <tr>
          <th>#ID</th>
          <th>Access Key</th>
          <th>Secret Key</th>
          <th>Status</th>
          <th>Created</th>
          <th>Expires</th>
        </tr>
      </thead>
      <tbody>
        <tr class='accordion-toggle' data-target='#line_0_details' data-toggle='collapse'>
          <td align="center">0</td>
          <td align="center">#Access Key0</td>
          <td align="center">#Secret Key0</td>
          <td align="center">#Status0</td>
          <td align="center">#Created0</td>
          <td align="center">#Expires0</td>
        </tr>
        <tr>
          <td colspan="6" class="hiddenRow">
            <div id="line_0_details" class="accordian-body collapse">Detalhes da line 0</div>
          </td>
        </tr>
        <tr class='accordion-toggle' data-target='#line_1_details' data-toggle='collapse'>
          <td align="center">1</td>
          <td align="center">#Access Key1</td>
          <td align="center">#Secret Key1</td>
          <td align="center">#Status1</td>
          <td align="center">#Created1</td>
          <td align="center">#Expires1</td>
        </tr>
        <tr>
          <td colspan="6" class="hiddenRow">
            <div id="line_1_details" class="accordian-body collapse">Detalhes da line 1</div>
          </td>
        </tr>
        <tr class='accordion-toggle' data-target='#line_2_details' data-toggle='collapse'>
          <td align="center">2</td>
          <td align="center">#Access Key2</td>
          <td align="center">#Secret Key2</td>
          <td align="center">#Status2</td>
          <td align="center">#Created2</td>
          <td align="center">#Expires2</td>
        </tr>
        <tr>
          <td colspan="6" class="hiddenRow">
            <div id="line_2_details" class="accordian-body collapse">Detalhes da line 2</div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</body>

</html>

But to do this with CodeIgniter you have to extend the class. The problem is that the framework (as a rule) does not allow passing of parameters to the composition of the table. So, for example, you would not be able to determine attributes for the lines.

Since you are already using Bootstrap , and you already have CodeIgniter properly installed, we will extend the CI_Table class in order to modify the attributes of <tr> and <td> :

  • Visit link and unzip MY_Table.php to application/libraries da your application;
  • Create a method in your controller with this code:

     function tabela(){
        // Carregando a biblioteca e setando os parâmetros genéricos
        $this->load->library('table');
        $this->table->set_empty("&nbsp;"); //->Células vazias
        $this->table->set_heading(array('#ID','Access Key','Secret Key','Status','Created','Expires'));//->Cabeçalho
        // Dados principais
        $data = array(
            array('0','#Access Key0','#Secret Key0','#Status0','#Created0','#Expires0'),
            array('1','#Access Key1','#Secret Key1','#Status1','#Created1','#Expires1'),
            array('2','#Access Key2','#Secret Key2','#Status2','#Created2','#Expires2'),
        );
        // Loop de criação da tabela
        foreach ($data as $i => $row){
            // Insere cada item dos dados principais em uma linha
            $rows[] = [
                'data' => $row,
                'data-toggle' => 'collapse',
                'data-target' => "#line_{$i}_details",
                'class' => 'accordion-toggle'
            ];
            // Cria uma linha oculta com os detalhes de cada linha principal
            $rowData = ['<div id="line_'.$i.'_details" class="accordian-body collapse">Detalhes da line '.$i.'</div>'];
            $rows[]=['data' => $rowData];//->Acrescentando os dados ao ARRAY
            // Este é o estilo da tabela. Só altere o que precisar alterar
            $tmpl = [
                'table_open' => '<table class="table table-bordered">',
                'cell_start' => '<td align="center">',
                'cell_alt_start' => '<td colspan="6" class="hiddenRow">'
            ];
        }
        // Aplicando o estilo definido
        $this->table->set_template($tmpl);
        // Capturando a string gerada
        $data['tabela'] = $this->table->generate($rows);
        // Carregando dados na VIEW
        $this->load->view('tabela', $data);
    }
    
  • Your VIEW will have the following:

    <!DOCTYPE html>
        <html>
        <head>
        <title>Tabela Accordion</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
        <script src="https://code.jquery.com/jquery-2.2.4.min.js"integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>
        <style>
            .hiddenRow {
                padding: 0 !important;
            }
        </style>
        </head>
        <body>
        <div class='container'>
            <br>
            <?= $tabela ?>
        </div>
        </body>
        </html>
    
  • 23.12.2016 / 19:08