I'm trying to auto select first row of table when data is loaded for the first time and failing to do that.
How do I auto select first row of table when table loads for the first time? This html doesn't work:
<!DOCTYPE html>
<html xmlns="">
<head>
<title></title>
<style type="text/css" title="currentStyle">
@import "DataTables/css/demo_page.css";
@import "DataTables/css/demo_table.css";
</style>
<script type="text/javascript" src="Datatables/js/jquery.js"></script>
<script type="text/javascript" src="Datatables/js/jquery.dataTables.js"></script>
<script>
var oTable;
var firstTime = true;
$(document).ready(function () {
$("#example tbody").click(function (event) {
$(oTable.fnSettings().aoData).each(function () {
$(this.nTr).removeClass('row_selected');
});
$(event.target.parentNode).addClass('row_selected');
});
oTable = $('#example').dataTable({
"sScrollX": "500px",
"sPaginationType": "full_numbers",
"bServerSide": true,
"sAjaxSource": "services/data3.ashx",
"sServerMethod": "POST",
"fnDrawCallback": function (oSettings) {
if (firstTime) {
alert('DataTables has redrawn the table');
oTable.$('tr:first').click();
firstTime = false;
}
}
});
});
</script>
</head>
<body>
<table border="1" >
<tr><td>id</td><td><input type="text" /></td></tr>
<tr><td>name</td><td><input type="text" /></td></tr>
<tr><td>surname</td><td><input type="text" /></td></tr>
</table><br />
<table id="example" border="1" class="display">
<thead>
<tr>
<td>name</td>
<td>surname</td>
<td>id</td>
</tr>
</thead>
<tbody></tbody>
</table>
</body>
</html>
I'm trying to auto select first row of table when data is loaded for the first time and failing to do that.
How do I auto select first row of table when table loads for the first time? This html doesn't work:
<!DOCTYPE html>
<html xmlns="http://www.w3/1999/xhtml">
<head>
<title></title>
<style type="text/css" title="currentStyle">
@import "DataTables/css/demo_page.css";
@import "DataTables/css/demo_table.css";
</style>
<script type="text/javascript" src="Datatables/js/jquery.js"></script>
<script type="text/javascript" src="Datatables/js/jquery.dataTables.js"></script>
<script>
var oTable;
var firstTime = true;
$(document).ready(function () {
$("#example tbody").click(function (event) {
$(oTable.fnSettings().aoData).each(function () {
$(this.nTr).removeClass('row_selected');
});
$(event.target.parentNode).addClass('row_selected');
});
oTable = $('#example').dataTable({
"sScrollX": "500px",
"sPaginationType": "full_numbers",
"bServerSide": true,
"sAjaxSource": "services/data3.ashx",
"sServerMethod": "POST",
"fnDrawCallback": function (oSettings) {
if (firstTime) {
alert('DataTables has redrawn the table');
oTable.$('tr:first').click();
firstTime = false;
}
}
});
});
</script>
</head>
<body>
<table border="1" >
<tr><td>id</td><td><input type="text" /></td></tr>
<tr><td>name</td><td><input type="text" /></td></tr>
<tr><td>surname</td><td><input type="text" /></td></tr>
</table><br />
<table id="example" border="1" class="display">
<thead>
<tr>
<td>name</td>
<td>surname</td>
<td>id</td>
</tr>
</thead>
<tbody></tbody>
</table>
</body>
</html>
- Use focus(). Possible duplicate of Focus on Table row TR for accessiblity – Anto Jurković Commented Nov 15, 2013 at 11:31
2 Answers
Reset to default 2oTable.$('tr:first') will raise an error - $ is not a function or property of oTable.
You must use
oTable.find('tbody tr:first').focus()
because tr:first will return the <thead> <tr>, not the <tbody> <tr>!
I dont think you by default can focus an entire <tr> in HTML, so you must add some CSS to the <tr> to make the focus visible. Like this
tr {
border:1px inset white;
}
tr.focused {
border:1px solid red;
}
oTable.find('tbody tr:first').addClass('focused');
An example of focusing rows when they are clicked :
oTable.find('tbody tr').click(function() {
oTable.find('tbody tr').removeClass('focused');
$(this).addClass('focused');
});
All the above in this fiddle -> http://jsfiddle/vv7Sa/
Check this link, it should help: https://www.datatables/forums/discussion/18305/select-first-row-onload. or you can try this:
$('#table-id').on('init.dt', function() {
$('#table-id tbody tr:eq(0)').click();
});