datatables getting 'undefined' from the json object

Question

I need to get an id from the json object in the button's function. If I try to access directly the id I get undefined (not the error/warning) but If I try to access the object I can see it without problem (the id and the rest of the data).

var table = $('#example').DataTable( {
    serverSide: true,
    dom: 'Bfrtip',
    ajax: '/get?op=2',
    columns: [
        { data: 'id' },
        // more columns
    ],
    buttons: [
        {
            text: 'New',
            action: function ( e, dt, node, config ) {
                window.location.href = '/url?op=new'
            }
        },
        {
            text: 'Modify',
            action: function ( e, dt, node, config ) {
                window.location.href = '/url?op=modify&id=' + dt.row( { selected: true } ).id() )
            },
            enabled: false
        },
        {
            text: 'Delete',
            action: function ( e, dt, node, config ) {
            },
            enabled: false
        }
    ],
    select: true
} );

I can access the json object doing this:

alert( JSON.stringify(dt.row( { selected: true } ).data()) );
// {"id":1,"key":"value","etc":"etc"}

That's working, I can see the object in the alert.

alert( dt.row( { selected: true } ).id() );  // undefined
alert( JSON.stringify(dt.row( { selected: true } ).id()) );  // "undefined"
alert( JSON.stringify(dt.row( { selected: true } ).data()[0]) );  // undefined

This is not working, I can see undefined instead of the integer in the alert.

I tried many more things that I can't even remember but none is working...

What Am I doing wrong?

I don't understand how you are selecting a row. I have not found an example that uses {selected:true}. — Bindrid, Jan 06 '16 at 02:33
I didn't do that, someone gave me that code as example http://stackoverflow.com/questions/34573773/datatables-buttons-enable-disable-example-not-working/34573906?noredirect=1#comment56893128_34573906 . Do you know how can I get the id value from the selected row? — Chazy Chaz, Jan 06 '16 at 03:23
Once you set the DT_RowId as I did in the other post, you will be able to get the row Id with the .id() function as you tried to do here. — Bindrid, Jan 06 '16 at 04:38

score 1 · Accepted Answer · answered Jan 06 '16 at 05:43

I think this is what you are trying to do. Look at my modify button, the one I added after yours. I am using the extn but if your data has an id field, you should be able to change the name to match. Made some other changes so it would run inside my local environment, but it should work if you set in up in jsfiddle or locally to play with.

Note: this assumes that only one row can be selected at a time.

    <!DOCTYPE html>

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <link href="https://cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css " rel="stylesheet" type="text/css" />
        <link href="https://cdn.datatables.net/buttons/1.1.0/css/buttons.dataTables.min.css" rel="stylesheet" type="text/css" />

          <link href="https://cdn.datatables.net/select/1.1.0/css/select.dataTables.min.css" rel="stylesheet" type="text/css" />
        <script src="//code.jquery.com/jquery-1.11.3.min.js" type="text/javascript"></script>
        <script src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js" type="text/javascript"></script>
        <script src="https://cdn.datatables.net/buttons/1.1.0/js/dataTables.buttons.min.js" type="text/javascript"></script>
        <script src="https://cdn.datatables.net/select/1.1.0/js/dataTables.select.min.js" type="text/javascript"></script>
        <script type="text/javascript">

            var mydata =  [
                  {
                      "name": "Tiger Nixon",
                      "position": "System Architect",
                      "salary": "$320,800",
                      "start_date": "2011/04/25",
                      "office": "Edinburgh",
                      "extn": "5421"
                  },
                   {
                       "name": "Garrett Winters",
                       "position": "Accountant",
                       "salary": "$170,750",
                       "start_date": "2011/07/25",
                       "office": "Tokyo",
                       "extn": "8422"

                   }];



            $(document).ready(function() {

                $.map(mydata, function (item, key) {
                           item["DT_RowId"] = item["extn"]});

               var table = $('#example').DataTable( {
                   serverSide: false,
                   dom: 'Bfrtip',
                   data:mydata,
                   columns: [

               { "data": "name" },
               { "data": "position" },
               { "data": "office" },
               { "data": "extn" },
               { "data": "start_date" },
               { "data": "salary" }
                       // more columns
                   ],

                   buttons: [
                       {
                           text: 'New',
                           action: function ( e, dt, node, config ) {
                               window.location.href = '/url?op=new'
                           }
                       },
                       {
                           text: 'Modify',
                           action: function (e, dt, node, config) {

                               window.location.href = '/url?op=modify&id=' + dt.row( { selected: true } ).id() ;
                           },
                           enabled: true
                       },
                       {
                           text: 'Delete',
                           action: function ( e, dt, node, config ) {
                           },
                           enabled: false
                       },
                       {
                            extend: 'selected',
                           text: 'Modify',
                           action: function ( e, dt, button, config ) {
                            var rw = dt.rows({ selected: true }).data()[0];
                            window.location.href = '/url?op=modify&id=' + rw.extn;
                        }

                }

                   ],
                   select: true
               } );
            } );

        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>

            <table width="100%" class="display" id="example" cellspacing="0">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Position</th>
                            <th>Office</th>
                            <th>Extn.</th>
                            <th>Start date</th>
                            <th>Salary</th>
                        </tr>
                    </thead>
                    <tfoot>
                        <tr>
                            <th>Name</th>
                            <th>Position</th>
                            <th>Office</th>
                            <th>Extn.</th>
                            <th>Start date</th>
                            <th>Salary</th>
                        </tr>

                    </tfoot>
                </table>
        </div>
        </form>
    </body>
    </html>

Thank you! I got this working with just `var rw = dt.rows({ selected: true }).data()[0];` and `alert( rw.id );` So it turns out that `{ selected: true }` is actually working! — Chazy Chaz, Jan 06 '16 at 06:47

Daniel Arroyo · Answer 2 · 2016-01-06T02:02:51.950

0

You can use the render property like this

        "render": function (data, type, full, meta) {

             var varName = full.varName;
             return '<div>'+ varName +'</div>' //or whatever html you want to render    
    }

edited Jan 06 '16 at 02:02

answered Jan 06 '16 at 01:57

Daniel Arroyo

83
7

No, I need to get the id value from the selected row. – Chazy Chaz Jan 06 '16 at 03:21

datatables getting 'undefined' from the json object

2 Answers2