Estou usando: https://www.dynatable.com/ e com ela estou conseguindo criar a tabela e carregar os dados json. O problema é que não to conseguindo adicionar mais uma coluna com as ações de editar e excluir, por exemplo. Onde seriam 2 botões. O back é com Java.
-
2cara nunca usei esse plugin/API, mas faz o seguinte posta os códigos do que você consegui até agora, dai eu dou uma olhada se consigo te ajudar– SneepS NinjACommented 28/06/2017 às 19:11
-
@SneepSNinjA pelo que to entendendo, é nesse arquivo deles que deveria conseguir fazer essa personalização, que no caso seria adicionar mais 1 coluna com 2 botões, um pra editar e um pra excluir jsfiddle.net/43d0uz9t– IsaCommented 28/06/2017 às 20:25
Adicione um comentário
|
1 Resposta
faz assim:
$('#my-final-table').dynatable({
dataset: {
records:
[
{
"band": "Weezer",
"song": "El Scorcho",
"editar":"<button onclick='javascript:editar();'>editar</button>",
"excluir":"<button onclick='javascript:excluir();'>excluir</button>"
},
{
"band": "Chevelle",
"song": "Family System",
"editar":"<button onclick='javascript:editar();'>editar</button>",
"excluir":"<button onclick='javascript:excluir();'>excluir</button>"
}
]
}
});
Caso você esteja recebendo o json de um ajax, lá onde o json é gerado terá que montar os elementos (botoes do HTML) junto no json como o exemplo acima, ai é só você implementar a parte do javascript para editar/excluir, se tiver dúvidas nessa parte é só sinalizar.
EDIT:
Não pediu mas como no site não tem um exemplo fácil para manipular diretamente o json que já esta em uso pelo plugin achei até necessário postar como fazer para excluir um item, com base nesse exemplo o editar seria na mesma linha de raciocínio, que é editar o json, excluindo ou alterando um registro, depois carregar ele novamente no plugin segue exemplo:
var MeuArray =
[
{
"idx":0,
"band": "Weezer",
"song": "El Scorcho",
"editar": "<button onclick='javascript:editar(0);'>editar</button>",
"excluir": "<button onclick='javascript:excluir(0);'>excluir</button>"
},
{
"idx":1,
"band": "Chevelle",
"song": "Family System",
"editar": "<button onclick='javascript:editar(1);'>editar</button>",
"excluir": "<button onclick='javascript:excluir(1);'>excluir</button>"
}
];
$('#my-final-table').dynatable({ dataset: { records: MeuArray } });
function excluir(index){
for(var i=0; i<MeuArray.length; i++){
var obj = MeuArray[i];
if(obj.idx == index){
MeuArray.splice(i, 1);
break;
}
}
var dynatable = $('#my-final-table').data('dynatable');
dynatable.settings.dataset.originalRecords = MeuArray;
dynatable.process();
}