advanced datatables Codeigniter

Asked

Viewed 233 times

1

I’m racking my brain with a little something in Codeigniter, I need to create an advanced table that expands details on each item of the table, as you can see in the code below I can’t separate a detail row 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>

  • I can tell you you won’t be able do something like this using the native class of CodeIgniter because it does not allow changing the attributes of the generated table rows (which is unfortunate because it allows changing the cells). The solution is to extend or replace. Extend is better because you do not touch the base of the framework.

1 answer

0

I was curious, and went to research a little about your doubt. I thought your problem would be solved with this 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>
  <link href="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>Tabela Accordion</title>
</head>

<body>
  <div class='container'>
    <br>
    <table class="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>

Only, to do it with CodeIgniter you have to extend the class. The problem is that the framework (as a rule) does not allow passing parameters to the table composition. Thus, for example, it would not be possible to determine attributes for her lines.

Like you’re already wearing Bootstrap, and should already have the CodeIgniter properly installed, we will extend the class CI_Table in order to modify the attributes of <tr> and <td>:

  1. access https://github.com/dalehurley/codeigniter-table-rows/archive/master.zip and unpack MY_Table.php for application/libraries of its application;
  2. Create a method in your controller with that 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);
    }
    
  3. Your VIEW you’ll get 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>
    

Browser other questions tagged

You are not signed in. Login or sign up in order to post.