1

Estou usando um simples plugin: http://www.jquery-bootgrid.com/

Como eu posso deixar última coluna fixada ?

Aqui tem um exemplo de uma coluna fixada: https://datatables.net/extensions/fixedcolumns/examples/initialisation/left_right_columns.html

Estou tentando deixa a última coluna fixado, porem nada certo. Segue o código em jsfiddle: https://jsfiddle.net/DTcHh/30996/

Segue o código:

<div class="table-responsive">
  <table id="grid-command-buttons" class="table table-condensed table-hover table-striped bootgrid-table" aria-busy="false">

...

  </table>
</div>

Alguma solução ?

1 Resposta 1

1

Eu usei css para tentar congelar essa última coluna. Para isso, criei as seguintes classes:

.bootgrid-wrapper {
  width: 90%; // 100% menos o tamanho da ".fixed-column-right"
  overflow-x: scroll;
  overflow-y: visible;
}

.fixed-column-right {
  position: absolute;
  width: 10%;
  right: 0;
}

Daí na sua <div> onde está a <table> dentro, você adiciona a primeira classe bootgrid-wrapper:

<div class="table-responsive bootgrid-wrapper">
  <table id="grid-command-buttons" class="table table-condensed table-hover table-striped bootgrid-table" aria-busy="false">
    ...
  </table
</div>

...e depois precisa adicionar a classe fixed-column-right na <th> e na <td> da última coluna. No caso do bootgrid, isso é feito adicionando dois atributos na <th>:

  • data-header-css-class="fixed-column-right": o bootgrid irá adicionar na classe da própria <th>
  • data-css-class="fixed-column-right": o bootgrid irá adicionar na classe de cada <td> dessa coluna.

Tentar adicionar diretamente o atributo class="alguma-classe" na <td> ou na <th> nao vai funcionar, pois quando o bootgrid é montado, ele recria tudo, excluindo seus atributos.


No final, seu HTML completo fica assim:

<div class="table-responsive bootgrid-wrapper">
  <table id="grid-command-buttons" class="table table-condensed table-hover table-striped bootgrid-table" aria-busy="false">
    <thead>
      <tr>
        <th data-column-id="id" data-identifier="true" data-type="numeric">ID</th>
        <th data-column-id="sender">Sender</th>
        <th data-column-id="received" data-order="desc">Received</th>
        <th data-column-id="sender1">Sender</th>
        <th data-column-id="sender2">Sender</th>
        <th data-column-id="sender3">Sender</th>
        <th data-column-id="sender4">Sender</th>
        <th data-column-id="sender5">Sender</th>
        <th data-column-id="sender6">Sender</th>
        <th data-column-id="sender7">Sender</th>
        <th data-column-id="sender8">Sender</th>
        <th data-column-id="sender9">Sender</th>
        <th data-column-id="received" data-order="desc">Received</th>
        <th data-column-id="commands" data-header-css-class="fixed-column-right" data-css-class="fixed-column-right" data-formatter="commands" data-sortable="false">Coluna</th>
      </tr>
    </thead>
  </table>
</div>

Segue seu JSFiddle atualizado.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .