javascript - How to get row id of particular row from legacy jQuery data table -
i had gone through
http://www.gyrocode.com/articles/jquery-datatables-checkboxes/
it shows nice way retrieve row id
// handle click on checkbox $('#example tbody').on('click', 'input[type="checkbox"]', function(e){ var $row = $(this).closest('tr'); // row data var data = table.row($row).data(); // row id var rowid = data[0]; however, need stick legacy datatable 1.9.4. try perform similar thing.
$('#confirm-table').on('click', 'input[type="checkbox"]', function() { var $row = $(this).closest('tr'); var data = table.fngetdata($row[0]); var rowid = data[0]; // expect "123" or "456". getting '<input type="checkbox">' alert(rowid); }) as can see, did convert current datatable code from
var data = table.row($row).data(); to legacy datatable code
var data = table.fngetdata($row[0]); however, instead of getting row id ("123" or "456"), i'm getting rendered code <input type="checkbox">
any idea how in proper way?
https://jsfiddle.net/14p9uu8c/
here's workable code demonstrate problem
<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="https://cdn.datatables.net/1.9.4/js/jquery.datatables.js"></script> </head> <body> <table id="confirm-table"> </table> <script> $(document).ready(function (){ var dataset = [ [ "123", "system architect" ], [ "456", "accountant" ] ]; table = $('#confirm-table').datatable( { aadata: dataset, aocolumns: [ { stitle: "id" }, { stitle: "job" } ], "aocolumndefs":[ { "atargets": [0], "fnrender": function ( oobj ) { return '<input type="checkbox">'; } }] } ); $('#confirm-table').on('click', 'input[type="checkbox"]', function() { var $row = $(this).closest('tr'); var data = table.fngetdata($row[0]); var rowid = data[0]; // expect "123" or "456". getting '<input type="checkbox">' alert(rowid); }); }); </script> </body> </html>
first of need convert existing aadata json objects. have our aocolumns match our aadata. after it's done lets update aocolumndefs.
instead of rendering our dt_rowid column content checkbox, lets hide our column can access dt_rowid data.
i did not change onclick listener.
here working example:
$(document).ready(function (){ var dataset = [ { "dt_rowid": "123", "checkbox": "", "job": "system architect" }, { "dt_rowid": "456", "checkbox": "", "job": "accountant" } ]; table = $('#confirm-table').datatable( { "bprocessing": true, aadata: dataset, aocolumns: [ { "mdata": "dt_rowid" , stitle: "hidden row id" }, { "mdata": "checkbox" , stitle: "id" }, { "mdata": "job", stitle: "job" } // <-- values use inside object ], "aocolumndefs":[ { "atargets": [0], "bvisible": false }, { "atargets": [1], "fnrender": function ( oobj, value ) { return '<input type="checkbox">'; } } ] } ); $('#confirm-table').on('click', 'input[type="checkbox"]', function() { var $row = $(this).closest('tr'); var data = table.fngetdata($row[0]); var rowid = data[0]; // expect "123" or "456". getting '<input type="checkbox">' console.log(data.dt_rowid); }); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="https://cdn.datatables.net/1.9.4/js/jquery.datatables.js"></script> <table id="confirm-table"> </table>
Comments
Post a Comment