2

Eu utilizo o plugin JQuery Datatables, e gostaria de exportar os dados (CSV, Excel, PDF...) das tabelas através de botões personalizados, ao invés dos botões que o próprio plugin oferece, será que é possível?

No retângulo vermelho, os botões do próprio Datatables. Gostaria de adicionar um botão ao lado dos botões que estão no retângulo azul e chamar algum método para exportar os dados da tabela.

No retângulo vermelho os botões do próprio Datatables. Gostaria de adicionar um botão ao lado dos botões que estão no retângulo azul

Código que faz os botões nativos do Datatables aparecer:

                <div class="row">
               <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12 btn-acao-grid">
                   <button  class="btn btn-success btn-sm margin-btn" id="add">
                      <span><i class="icon wb-plus-circle" aria-hidden="true"></i> Adicionar</span>
                    </button> 
                </div>
                <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12 btn-acao-grid">
                   <button type="submit" class="btn btn-default btn-sm margin-btn">
                      <span><i class="icon wb-pencil" aria-hidden="true"></i> Alterar</span>
                    </button>
                </div>
                <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12 btn-acao-grid">
                    <button type="submit" class="btn btn-danger btn-sm margin-btn" >
                      <span><i class="icon wb-minus-circle" aria-hidden="true"></i> Remover</span>
                    </button>
                </div>
                <div class="col-lg-1 col-md-1 col-sm-1 col-xs-6 btn-acao-grid pesq-refresh">
                   <button type="submit" class="btn  btn-dark btn-sm margin-btn" id="btn-pesquisa">
                      <span><i class="icon wb-search" aria-hidden="true"></i> </span>
                   </button>
                </div>
                <div class="col-lg-1 col-md-1 col-sm-1 col-xs-6 btn-acao-grid pesq-refresh" >
                   <button type="submit" class="btn  btn-dark btn-sm margin-btn" id="btn-refresh" >
                      <span><i class="icon wb-reload" aria-hidden="true"></i> </span>
                   </button>
                </div>
           </div> 



<table id="example" class="display compact" cellspacing="0" width="100%"> 
    <thead>
        <tr>
            <th></th>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Salary</th>

        </tr>
    </thead>

    <tbody>

        <tr>
            <td></td>
            <td>Colleen Hurst</td>
            <td>Javascript Developer</td>
            <td>San Francisco</td>
            <td>39</td>
            <td>$205,500</td>

        </tr>

        <tr>
            <td></td>
            <td>Shou Itou</td>
            <td>Regional Marketing</td>
            <td>Tokyo</td>
            <td>20</td>
            <td>$163,000</td>
        </tr>
     </tbody>
</table>

       <script>
       $("#example").DataTable( {
                    dom: "Bfrtip",
                    buttons: [
                        "copy", "csv", "excel", "pdf", "print"
                    ],
                    "scrollY": 400,
                    "scrollX": true,
                    "searching": false,
                    columnDefs:[{
                        orderable: false,
                        className: "select-checkbox",
                        targets:   0
                    }],
                  select: {
                      style:    "os",
                      selector: "td:first-child"
                  },
                  order: [
                            [ 1, "asc" ]
                  ]
                }); 
          </script>

Gostaria de exportar os dados deste Datatables não pelos botões nativos dele, mas sim por um botão, que poderia ser adicionado acima do grid com a opção exportar.

O Datatables possui alguma função para exportar seus dados, que poderia ser chamado através dos botões acima do grid (em azul)?

4
  • Carlos, a sua questão é muito abrangente, falta mostar parte de seu código, como tentou resolver isso para podermos te ajudar? Faça o Tour e leia o Ajuda aqui do Soft, depois edite sua questão detalhando mais e sendo mais claro e objetivo. Bem vindo!
    – Leo
    Commented 5/07/2016 às 18:32
  • Eu sou novato aqui. Adicionei os códigos Commented 11/07/2016 às 12:00
  • @CarlosEduardoScheffer antes de uma olhada aqui pt.stackoverflow.com/tour caso já não tenha visto! Commented 11/07/2016 às 12:10
  • Eu só quero saber se o Datatables possui alguma função para exportar seus dados, mas que possa ser chamado através de botões externos, de meu próprio código. É possível ou não? Commented 11/07/2016 às 14:13

1 Resposta 1

1

O Datatables possui alguma função para exportar seus dados, que poderia ser chamado através dos botões acima do grid (em azul)?

Em resumo, sim, mas você possivelmente terá que criar seus próprios botões se a função que você quer ainda não existe.

Se a ideia é controlar a Data Table através de botões externos, há uma série de eventos que você pode usar para criar botões em qualquer lugar da página e disparar comandos para a Data Table usando JavaScript.

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 .