Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Integração Vraptor + DataTables

Olá a todos, estou testando a integração do Vraptor com o plugin datatables.net, consegui fazer a integração, mas não sei por exemplo como colocar os links de edição e remoção na datatable, como posso colocar esses links e executar as ações de remover e editar?

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Vraptor 4 paginação utilizando DataTables</title>
<link rel="stylesheet" type="text/css"
    href="//cdn.datatables.net/1.10.0/css/jquery.dataTables.css">
<script type="text/javascript"
    src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript"
    src="//cdn.datatables.net/1.10.0/js/jquery.dataTables.js"></script>
<link
    href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.1-rc.1/css/select2.min.css"
    rel="stylesheet" />
<script
    src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.1-rc.1/js/select2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {

    $("#example").dataTable( {
        "bProcessing": false,
        "bServerSide": false,
        "sort": "position",
        "sAjaxSource": '<c:url value="/fornecedores/json"/>',
        "aoColumns": [
            { "mData": "nome" },
            { "mData": "email" },
            { "mData": "telefone" },   
        ]
    } );


    $(".js-example-data-array").select2({
        data: '<c:url value="/fornecedores/json2"/>'
      });

} );
</script>
</head>
<body>
    <h2>
        Vraptor 4 paginação utilizando DataTables<br>
        <br>
    </h2>
    <table width="70%" style="border: 3px; background: rgb(243, 244, 248);">
        <tr>
            <td>
                <table id="example" class="display" cellspacing="0" width="100%">
                    <thead>
                        <tr>
                            <th>Nome</th>
                            <th>Site</th>
                            <th>Telefone</th>
                        </tr>
                    </thead>
                </table>
            </td>
        </tr>
    </table>
    <br />
    <br />
    <select class="js-example-data-array" width="500px"></select>
</body>
</html>
@Controller
public class FornecedorController {


    private static final long serialVersionUID = 1L;
    private int iTotalRecords;
    private int iTotalDisplayRecords;
    private String sEcho;
    private String sColumns;
    private List<Fornecedor> aaData;
    //private List<Fornecedor> personsList = new ArrayList<Fornecedor>();

    @Inject
    private Result result;

    @Inject
    private FornecedorDao dao;

    public FornecedorController() {
    }

    @Get
    public void lista(){}


    @Get("/fornecedores/json")
    public void grupos(){

        List<Fornecedor> personsList = dao.lista();
        FornecedorJsonObject personJsonObject = new FornecedorJsonObject();
        personJsonObject.setAaData(personsList);
        personJsonObject.setiTotalDisplayRecords(personsList.size());
        personJsonObject.setiTotalRecords(personsList.size());
        result.use(Results.json()).withoutRoot().from(personJsonObject).include("aaData").serialize();
    }


    @Get("/fornecedores/json2")
    public void grupos2(){

        List<Fornecedor> personsList = dao.lista();
        result.use(Results.json()).withoutRoot().from(personsList).serialize();
    }

    public List<Fornecedor> getAaData() {
        return aaData;
    }

    public void setAaData(List<Fornecedor> aaData) {
        this.aaData = aaData;
    }

    public int getiTotalRecords() {
        return iTotalRecords;
    }

    public void setiTotalRecords(int iTotalRecords) {
        this.iTotalRecords = iTotalRecords;
    }

    public int getiTotalDisplayRecords() {
        return iTotalDisplayRecords;
    }

    public void setiTotalDisplayRecords(int iTotalDisplayRecords) {
        this.iTotalDisplayRecords = iTotalDisplayRecords;
    }

    public String getsEcho() {
        return sEcho;
    }

    public void setsEcho(String sEcho) {
        this.sEcho = sEcho;
    }

    public String getsColumns() {
        return sColumns;
    }

    public void setsColumns(String sColumns) {
        this.sColumns = sColumns;
    }

}

public class FornecedorJsonObject {


    private int iTotalRecords;

    private int iTotalDisplayRecords;

    private String sEcho;

    private String sColumns;

    private List<Fornecedor> aaData;

    public int getiTotalRecords() {
        return iTotalRecords;
    }

    public void setiTotalRecords(int iTotalRecords) {
        this.iTotalRecords = iTotalRecords;
    }

    public int getiTotalDisplayRecords() {
        return iTotalDisplayRecords;
    }

    public void setiTotalDisplayRecords(int iTotalDisplayRecords) {
        this.iTotalDisplayRecords = iTotalDisplayRecords;
    }

    public String getsEcho() {
        return sEcho;
    }

    public void setsEcho(String sEcho) {
        this.sEcho = sEcho;
    }

    public String getsColumns() {
        return sColumns;
    }

    public void setsColumns(String sColumns) {
        this.sColumns = sColumns;
    }

    public List<Fornecedor> getAaData() {
        return aaData;
    }

    public void setAaData(List<Fornecedor> aaData) {
        this.aaData = aaData;
    }

}
3 respostas

No último app que trabalhei, fiz o plugin configurável através de atributos data, e criei funções para efetuar troca dinâmica de valores. Por exemplo

HTML(twig) da tabela

<table class="datatable table table-hover table-bordered table-striped" id="solucaoListTable" data-url="{{ urlFor('admin_solucao_list') }}">
    <thead>
        <tr role="row" class="heading">
            <th data-property="id" class="hide"></th>
            <th width="45%" data-property="nome">Solução</th>
            <th width="15%" data-property="ordem" data-replace="#ordem">Ordem</th>
            <th width="5%" data-property="inicial" data-replace="#inicial">Inicial</th>
            <th width="5%" data-property="ativo" data-replace="#ativo">Ativo</th>
            <th width="30%" data-property="" data-searchable="false" data-orderable="false" data-replace="#acoes">Ações</th>
        </tr>
    </thead>

    <tbody></tbody>
</table>

HTML(twig) de replace para botões de ações (alterar e excluir)

<div id="acoes" class="hidden">
    <div data-value="">
        <div class="btn-group">        
                <a href="{{ urlFor('admin_solucao_edit', {'id': '#id#'}) }}"
                   class="btn btn-primary btn-xs">
                    <i class="fa fa-edit"></i> Alterar
                </a>
                <a href="{{ urlFor('admin_solucao_destroy', {'id': '#id#'}) }}"
                   class="btn btn-danger btn-xs>
                    <i class="fa fa-trash-o"></i> Excluir
                </a>
        </div>
    </div>
</div>

HTML(twig) de replace para label de ativo ou inativo

<div id="ativo" class="hidden">
    <div data-value="false">
        <span class="label label-default">Não</span>
    </div>
    <div data-value="true">
        <span class="label label-success">Sim</span>
    </div>
</div>

Deu pra sacar mais ou menos ? O javascript entende que o campo 'ações' não existe, e preenche com valor em branco. o Valor em branco é substituído por um HTML com alguns patterns também dinâmicos, Por exemplo, #id# será trocado pela propriedade 'id' de cada linha percorrida, e assim consecutivamente.

Espero ter ajudado,

Abraços!

O exemplo acima foi de um app em PHP, por isto das expressões e funções para o Twig. {{, }}, urlFor(), etc.

Mas pode ser aplicado facilmente para qualquer outro framework de renderização de templates.

solução!

encontrei a solução na documentação do próprio datatables:

http://editor.datatables.net/examples/simple/inTableControls.html