Add buttons in table rows

Asked

Viewed 532 times

1

I’m using: https://www.dynatable.com/ and with it I am able to create the table and upload the json data. The problem is that I can’t add another column with the edit and delete actions, for example. Where would be 2 buttons. The back is with Java.

jquery html5 json
  • 2

    guy never used this plugin/API, but does the following post the codes of what you got so far, so I take a look if I can help you

  • @Sneepsninja as far as I understand, it is in this file of them that I should be able to do this customization, which in this case would be to add another column with 2 buttons, one to edit and one to delete https://jsfiddle.net/43d0uz9t/

1 answer

2


do so:

$('#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>"
                }
            ]
}
});

In case you are receiving the json from an ajax, where the json is generated you will have to assemble the elements (HTML buttons) together in the json as the example above, then you just have to implement the javascript part to edit/delete, if you have questions in that part just signal.

EDIT:

You did not ask but since there is not an easy example to directly manipulate the json that is already in use by the plugin I found it necessary to post how to delete an item, based on this example the edit would be in the same line of reasoning, which is to edit the json, deleting or changing a record, then load it again in the plugin follows example:

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();    
}

Browser other questions tagged jquery html5 json

You are not signed in. Login or sign up in order to post.