javascript - datatables getting 'undefined' from the json object -
i need id json object in button's function. if try access directly id undefined (not error/warning) if try access object can see without problem (the id , rest of 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 json object doing this:
alert( json.stringify(dt.row( { selected: true } ).data()) ); // {"id":1,"key":"value","etc":"etc"} that's working, can see object in 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 not working, can see undefined instead of integer in alert.
i tried many more things can't remember none working...
what doing wrong?
i think trying do. @ modify button, 1 added after yours. using extn if data has id field, should able change name match. made other changes run inside local environment, should work if set in in jsfiddle or locally play with.
note: assumes 1 row can selected @ 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>
Comments
Post a Comment