JTable Plugin para criar tabelas em Ajax CRUD

Eu nunca usei esse framework, porém ele é parecido com outro que eu já usei.

E você trafega os dados por json, porém coloca os métodos onde vai fazer as operações de insert, update, delete e get e dai nesses métodos você receberia um json, iria no bd e tal e depois retorna um outro json atualizado do jeito que ele espera.

Teria que ver o tipo de json que tem que ser formado para utilizar com ele.

lele_vader também pensei assim cara , mas no próprio site tem um tutorial passo a passo com JSon : http://www.jtable.org/GettingStarted
estou até pesquisando sobre o funcionamento do Json e tals , e pal a pal com o XML e na maioria dos aspectos sua performace e melhor , mas enfim o ideal para mim seria ultilizando um SGBD a principio vou iniciar aqui utlizando essa logica que você citou … vlw man

Então.
Ele passa um json com os dados, porém tem um local para ir.
Olha só esse exemplo

<script type="text/javascript">
    $(document).ready(function () {
        $('#PersonTableContainer').jtable({
            title: 'Table of people',
            actions: {
                listAction: '/GettingStarted/PersonList',
                createAction: '/GettingStarted/CreatePerson',
                updateAction: '/GettingStarted/UpdatePerson',
                deleteAction: '/GettingStarted/DeletePerson'
            },
            fields: {
                PersonId: {
                    key: true,
                    create: false,
                    edit: false,
                    list: false
                },
                Name: {
                    title: 'Author Name',
                    width: '40%'
                },
                Age: {
                    title: 'Age',
                    width: '20%'
                },
                RecordDate: {
                    title: 'Record date',
                    width: '30%',
                    type: 'date',
                    create: false,
                    edit: false
                }
            }
        });
 
        $('#PersonTableContainer').jtable('load');
    });
</script>

Veja as linhas

listAction: ‘/GettingStarted/PersonList’,
createAction: ‘/GettingStarted/CreatePerson’,
updateAction: ‘/GettingStarted/UpdatePerson’,
deleteAction: ‘/GettingStarted/DeletePerson’

Seriam as suas action, as quais receberiam um json no caso de create, update e delete imagino eu e você iria daí no banco de dados e retornaria um novo json atualizado para a tabela ser atualizada também.

O get iria fazer uma consulta por todos os dados e retornar um json entendeu ?

O json é a forma de trafegar os dados.
Agora a manipulação dos dados daí é você que define nesses actions.

entendi mais ou menos , esse actions seria um caminho onde ele busca as informações ? e isso ?

então posso utilizar metodos ali também ?

E o caminho para as operações de insert, update, delete e get.

E como o framework deve fazer quando você clicar lá no -updateAction para o editar
-listAction deve ser o método que irá trazer a lista de dados do servidor.
-createAction para o insert, passando os dados a serem inseridos
-deleteAction para o delete

Daí por exemplo você abre a página ele vai chamar o que tiver no listAction.
Quando você clicar lá no editar e confirmar o updateAction
Quando clicar na lixeira e confirmar a exclusão o deleteAction
Quando confirmar a inclusão o createAction

Daí você substituiria pelas suas actions.

Opa agora entendi , mas so uma duvida eu baixo o Jtable Zip depois importo como lib para o meu projeto ?

Aqui diz como você prepara o projeto.

http://www.jtable.org/GettingStarted

Tem que importar o jquery e o jquery ui acho que também.

ah beleza , mais aquela estrutura da JTable e uma pasta? tipo Css,Js.core ?

Pelo que vi tem que importar um css e um js.
Se você mudar a localização padrão, talvez tenha que mudar os arquivos para referenciar isso.

lele_ vader

então eu posso fazer assim ?

actions: {
listAction: ‘Select.xhtml’,
createAction: ‘Create.xhtml’,
updateAction: ‘Update.xhtml’,
deleteAction: ‘Delete.xhtml’
},

Não.
Pelo que eu saiba você tem que colocar o métodos dos seus managed beans.

Ahhhh demorow …

lele_ vander estou tendo uma dificuldade aqui em montar a estrututa do projeto , da uma olhada nesse passos abaixo.

1 - Downloads
1.0 Jquery,Jquery UI
1.1 Jtable Plugins
2 - Importar Lib
2.0 Jquery , UI
2.1 Jtable
3 - Unidade de Persistencia
3.0 Criação de conexão
3.1 JPA classes e entidades
3.2 Criação de metodos CRUD
4 - Json
4.0 Interação de Actions Java
4.1 Consulta de Metodos Crud
5 - Index
5.0 Desenvolvimento Interface
5.1 Importa Javascript Function
5.2 Div de interação com javascript

esqueci de alguma coisa? estou no caminho certo ?

obs: Objetico fazer o mesmo que no site Jtable com Crud , ja tenho as 2 tabelas Clientes e Telefones .

lele_ vander estou tendo uma dificuldade aqui em montar a estrututa do projeto , da uma olhada nesse passos abaixo.

1 - Downloads
1.0 Jquery,Jquery UI
1.1 Jtable Plugins
2 - Importar Lib
2.0 Jquery , UI
2.1 Jtable
3 - Unidade de Persistencia
3.0 Criação de conexão
3.1 JPA classes e entidades
3.2 Criação de metodos CRUD
4 - Json
4.0 Interação de Actions Java
4.1 Consulta de Metodos Crud
5 - Index
5.0 Desenvolvimento Interface
5.1 Importa Javascript Function
5.2 Div de interação com javascript

esqueci de alguma coisa? estou no caminho certo ?

obs: Objetico fazer o mesmo que no site Jtable com Crud , ja tenho as 2 tabelas Clientes e Telefones .

Primeiro faz o insert lá no banco cara.
Testa para ver se está funcionando e depois tenta ver a integração com a tabela.
Eu nunca usei esse plugin, dá uma boa olhada no manual lá e você tem que ver como é esse json que ele passa para o backend.

Você está usando o que no backend por sinal ?

vish desculpa a pergunta mas o que seria o backend ? cara procurei em todo canto um exemplo mais ainda nd .

O que você está usando no lado do servidor ?
Servlet ? Algum framework mvc ?

sim MVC man

Não.
Qual o nome do framework mvc ?

Spring Web MVC .
Hibernate

Hibernate não é framework mvc.
Mas tudo bem.
Você conhece json, jquery e ajax ? Pois essa tabela usa isso tudo ?

haha blz , mas em Frameworks utilzados ele ta lá, Jquery que conheço , ajax ja utilizei não sei mt agora Json nunca utilizei .

Saquei.

Primeiro verifique com o hibernate as suas consultas e operações de crud para ver se está sendo realizado os inserts, updates,deletes e get corretamente.

usa sim mais , talvez eu nem precise mecher com ajax ou jquery pois este plugin ja vem com esta tabela pronta , eu apenas vou implementar na Function .eu acho kk

isso ja ta beleza, funcionando !

Dai no método que você apontar lá você vê como vem esse json que ele envia e cria o objeto do seu domínio a partir dele.
Por fim chama o método lá do hibernate.

actions: {
listAction: ‘#{Cliente.ConsultaDAO}’,
createAction: ‘#{Cliente.CadastroDAO}’,
// updateAction: ‘/GettingStarted/UpdatePerson’,
// deleteAction: ‘/GettingStarted/DeletePerson’
},

vish fiz isso mais ele ainda ta se perdendo ah sintaxe e assim mesmo ? não deu nenhum erro … pouts cara vo dar uma lida nos docs Java , por que eu tranpo com Asp … C# , i é pouco diferente as parada aqui kk

Coloque as actions do mesmo jeito que vc dá uma submit para a página no form action.

vish cara agora nd funcionou não aparece nem o plugin =/

Cara não sei onde eu to errando , mas quando eu debugo não aparece nada apenas “Hello from Facelets” rs no IE mostra um erro na leitura da function , pode me ajudar ?

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html">
    <h:head>
        <title>Facelet Title</title>
<!-- Include one of jTable styles. -->
<link href="/Scripts/themes/standard/blue/jtable_blue.css" rel="stylesheet" type="text/css" />
<!-- Include jTable script file. -->  
<script src="/Scripts/jquery.jtable.min.js" type="text/javascript"></script>
    </h:head>
    <script type="text/javascript">
        $(document).ready(function () {
 
            $('#StudentTableContainer').jtable({
                title: 'Teste',
                paging: true,
                sorting: true,
                defaultSorting: 'Nome ASC',
                actions: {
                     listAction:   '/CadastroclienteJpaController/findCadastroclienteEntities',
                     //deleteAction: '/CadastroagendaJpaController/DeleteStudent',
                     // updateAction: '/CadastroagendaJpaController/UpdateStudent',
                     createAction: '/CadastroclienteJpaController/create'
                },
                fields: {
                    IdCliente: {
                        key: true,
                        create: false,
                        edit: false,
                        list: false
                    },
                    Nome: {
                        title: 'Nome',
                        width: '23%'
                    },
                    Idade: {
                        title: 'Idade',
                        list: false
                    }
                   
                }
            });
 
       
        });
 
    </script>
    <h:body>
        Hello from Facelets
        <div id="Teste">
        </div>
    </h:body>
</html>

Onde vc ta importando o jQuery aí pra tua pagina ?