### jQuery UI DataTable Row Select

Various options to select rows in a DataTable with ID="table1".
Single Row Selection
<script>
$(document).ready(function() {
// DataTables - See http://datatables.net
//This is the method being called by the B4J AddHandler method. Important to ensure case sensitivity for TableHelper.
//See srvr.AddHandler("/tablehelper/TableHelper", "TableHelper", False)
$('#table1').dataTable( {
"bProcessing": true,
"bPaginate": false,
"sAjaxSource": 'TableHelper?method=show',
tableTools: {
"sRowSelect": "single"
}
} );
var table = $('#table1').DataTable();
$('#table1 tbody').on( 'click', 'tr', function () {
if ( $(this).hasClass('selected') ) {
$(this).removeClass('selected');
}
else {
table.$('tr.selected').removeClass('selected');
$(this).addClass('selected');
}
} );
} );
</script>
Operating Type Row Selection
<script>
$(document).ready(function() {
$('#table1').DataTable( {
dom: 'T<"clear">lfrtip',
tableTools: {
"sRowSelect": "os",
"aButtons": [ "select_all", "select_none" ]
}
} );
} );
</script>
Get the data of the selected row
See first example and add to the script, like below. The content is shown in the console.log of the Browser.
Reference: http://https://datatables.net/reference/api/row().data()
table.$('tr.selected').removeClass('selected');
$(this).addClass('selected');
var d = table.row( idx ).data();
Full example:
Define the Table in HTML
<table id="table1" class="display">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
</tr>
</thead>
</table>
The JavaScript to handle table row selection.
<script>
$(document).ready(function() {
$('#table1').dataTable( {
"bProcessing": true,
"bPaginate": false,
"sAjaxSource": 'TableHelper?method=show',
tableTools: {
"sRowSelect": "single"
}
} );
var table = $('#table1').DataTable();
$('#table1 tbody').on( 'click', 'tr', function () {
if ( $(this).hasClass('selected') ) {
$(this).removeClass('selected');
}
else {
table.$('tr.selected').removeClass('selected');
$(this).addClass('selected');
//Get the selected row and show in the concole
var d = table.row( this ).data();
console.log( d );
}
} );
} );
</script>

Changed: , Category: WebApps jQuery, File: T6C280M2096.htm, ID: 2096