Not default Edit Button

victorvidigal

Hello All, It's my first question.

I have a datatabe that loads data from restful service. I want insert a Edit Button (maybe a .gif image) in the last column, and when the user click in this button, the system should redirect to another page sending the id (its a column from datatable) to another page.
It is possible? How could I do that?

Javascript from my datatable:

 $(document).ready(function() {
            $('#dtEventList').DataTable({
                responsive: true,
                "ajax": "/xxx/event/listAll",
                "sAjaxDataProp": "",
                "aoColumns": [
                              { "mDataProp": "id" },
                              { "mDataProp": "name" }
                          ]
                });
            });

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

allan

Yes - quite possible. Have a look at this example - it is for Editor, but I'm sure you can see how columns.defaultContent is being used to show the editing controls in the table and how you can then use that method yourself.

You might find it useful to read the renderers manual page as well, as that allows dynamic content to be put into a column.

Allan

victorvidigal

First, thank you for help me.
I'm trying diffenret solutions you recomended me, but nothing works.
I guess the main problem is when I set different fields amount from datatable and JSON result. My JSON return 2 fields (id, name). Every thing that I try do not work if I set datatable with amount of fields different from JSON result.
For example, if I set the follow code I get the erro: "Uncaught TypeError: Cannot read property 'style' of undefined"

$(document).ready(function() {
    var table = $('#dtEventList').DataTable( {
        "ajax": "/m1kbackend/m1kserv/event/listAll",
        "sAjaxDataProp": "",
        "columns": [
                      {"data": "id"}, 
                      {"data": "name"},
                      {data: null,
                        render: function ( data, type, row ) {
                            return 'test';
                        }
                      }
                  ]
    });
 
} );

Could you help me?

allan

Please link to a test case show I can help to debug the issue. it sounds like your columns array defines a different number of columns from the HTML, but really I need a page that shows the issue in order to be able to offer any help here.

Allan

victorvidigal

Thank you again!
I user live.datatables.net, but I cannot load my JSON from there. There is a way to put a file with json result in live.datatables?

http://live.datatables.net/luxeqifo/2/edit?html,js,output

victorvidigal

Thak you allan, I got it! With your help, of course.
The problem was I was not defining three columns in HTML code. So now, my code works. Thak you very much.

HTML

 <table class="table table-striped table-bordered table-hover dataTables-example" name="dtEventList" id="dtEventList" >
                    <thead>
                    <tr>
                        <th>Id</th>
                        <th>Nome</th>
                        <th></th>
                    </tr>
                    </thead>
                    <tbody>
                    </tbody>
                    <tfoot>
                    <tr>
                        <th>Id</th>
                        <th>Nome</th>
                        <th></th>
                    </tr>
                    </tfoot>
                    </table>

Javascript

$(document).ready(function() {
    var table = $('#dtEventList').DataTable( {
        "ajax": "/m1kbackend/m1kserv/event/listAll",
        "sAjaxDataProp": "",
        "columns": [
                      {"data": "id"}, 
                      {"data": "name"},
                      {data: null,
                        render: function ( data, type, row ) {
                            return data.id;
                        }
                      }
                  ]
    });
 
} );

allan

Good to hear you've got it working - thanks for posting back!

Allan