rooty/DataTables
1
0
Fork 0
mirror of https://github.com/DataTables/DataTables.git synced 2025-02-27 00:54:15 +01:00
Code Issues Releases Activity

Update the select row examples to use the $ API method

Browse Source
This commit is contained in:
Allan Jardine 2011-12-14 17:59:53 +00:00
parent 4bfe3d7c89
commit f4ff79bfba
2 changed files with 22 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
examples/api/select_row.html
View File

@ -31,17 +31,7 @@
*/ */
function fnGetSelected( oTableLocal ) function fnGetSelected( oTableLocal )
{ {
var aReturn = new Array(); return oTableLocal.$('tr.row_selected');
var aTrs = oTableLocal.fnGetNodes();
for ( var i=0 ; i<aTrs.length ; i++ )
{
if ( $(aTrs[i]).hasClass('row_selected') )
{
aReturn.push( aTrs[i] );
}
}
return aReturn;
} }
</script> </script>
</head> </head>
@ -52,7 +42,7 @@
</div> </div>
<h1>Preamble</h1> <h1>Preamble</h1>
<p>It can be quite useful at times to provide the user with the option to select rows in a DataTable. This can be done using the API functions that DataTables provides. The example below uses the <b>fnRowCallback()</b> function to add a 'click' listener to each row, which will highlight the required row when selected. The indexes of the selected rows are then provided through the custom function <b>fnGetSelected()</b> for later processing.</p> <p>It can be quite useful at times to provide the user with the option to select rows in a DataTable. This can be done by simply using a click event to add/remove a class on the table rows. The the selected rows are then provided through the custom function <b>fnGetSelected()</b> for later processing.</p>
<h1>Live example</h1> <h1>Live example</h1>
<div id="demo"> <div id="demo">
@ -505,17 +495,7 @@
*/ */
function fnGetSelected( oTableLocal ) function fnGetSelected( oTableLocal )
{ {
var aReturn = new Array(); return oTableLocal.$('tr.row_selected');
var aTrs = oTableLocal.fnGetNodes();
for ( var i=0 ; i&lt;aTrs.length ; i++ )
{
if ( $(aTrs[i]).hasClass('row_selected') )
{
aReturn.push( aTrs[i] );
}
}
return aReturn;
}</pre> }</pre>
<style type="text/css"> <style type="text/css">
@import "../examples_support/syntax/css/shCore.css"; @import "../examples_support/syntax/css/shCore.css";

54
examples/api/select_single_row.html
View File

@ -13,15 +13,17 @@
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script> <script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf-8"> <script type="text/javascript" charset="utf-8">
var oTable; var oTable;
var giRedraw = false;
$(document).ready(function() { $(document).ready(function() {
/* Add a click handler to the rows - this could be used as a callback */ /* Add a click handler to the rows - this could be used as a callback */
$("#example tbody").click(function(event) { $("#example tbody tr").click( function( e ) {
$(oTable.fnSettings().aoData).each(function (){ if ( $(this).hasClass('row_selected') ) {
$(this.nTr).removeClass('row_selected'); $(this).removeClass('row_selected');
}); }
$(event.target.parentNode).addClass('row_selected'); else {
oTable.$('tr.row_selected').removeClass('row_selected');
$(this).addClass('row_selected');
}
}); });
/* Add a click handler for the delete row */ /* Add a click handler for the delete row */
@ -38,17 +40,7 @@
/* Get the rows which are currently selected */ /* Get the rows which are currently selected */
function fnGetSelected( oTableLocal ) function fnGetSelected( oTableLocal )
{ {
var aReturn = new Array(); return oTableLocal.$('tr.row_selected');
var aTrs = oTableLocal.fnGetNodes();
for ( var i=0 ; i<aTrs.length ; i++ )
{
if ( $(aTrs[i]).hasClass('row_selected') )
{
aReturn.push( aTrs[i] );
}
}
return aReturn;
} }
</script> </script>
</head> </head>
@ -59,7 +51,7 @@
</div> </div>
<h1>Preamble</h1> <h1>Preamble</h1>
<p>It can be quite useful at times to provide the user with the option to select rows in a DataTable. This can be done using the API functions that DataTables provides. The example below uses the <b>fnRowCallback()</b> function to add a 'click' listener to each row, which will highlight the required row when selected. The indexes of the selected rows are then provided through the custom function <b>fnGetSelected()</b> for later processing.</p> <p>It can be quite useful at times to provide the user with the option to select rows in a DataTable. In this example we use standard jQuery 'click' events to add a class to table rows to indicate that they have been selected. Note that we use <i>oTable.$()</i> when working with rows in the table to ensure that all rows are considered, regardless of paging and filtering.</p>
<h1>Live example</h1> <h1>Live example</h1>
<p><a href="javascript:void(0)" id="delete">Delete selected row</a></p> <p><a href="javascript:void(0)" id="delete">Delete selected row</a></p>
@ -495,15 +487,17 @@
<h1>Initialisation code</h1> <h1>Initialisation code</h1>
<pre class="brush: js;">var oTable; <pre class="brush: js;">var oTable;
var giRedraw = false;
$(document).ready(function() { $(document).ready(function() {
/* Add a click handler to the rows - this could be used as a callback */ /* Add a click handler to the rows - this could be used as a callback */
$("#example tbody").click(function(event) { $("#example tbody tr").click( function( e ) {
$(oTable.fnSettings().aoData).each(function (){ if ( $(this).hasClass('row_selected') ) {
$(this.nTr).removeClass('row_selected'); $(this).removeClass('row_selected');
}); }
$(event.target.parentNode).addClass('row_selected'); else {
oTable.$('tr.row_selected').removeClass('row_selected');
$(this).addClass('row_selected');
}
}); });
/* Add a click handler for the delete row */ /* Add a click handler for the delete row */
@ -520,17 +514,7 @@ $(document).ready(function() {
/* Get the rows which are currently selected */ /* Get the rows which are currently selected */
function fnGetSelected( oTableLocal ) function fnGetSelected( oTableLocal )
{ {
var aReturn = new Array(); return oTableLocal.$('tr.row_selected');
var aTrs = oTableLocal.fnGetNodes();
for ( var i=0 ; i&lt;aTrs.length ; i++ )
{
if ( $(aTrs[i]).hasClass('row_selected') )
{
aReturn.push( aTrs[i] );
}
}
return aReturn;
}</pre> }</pre>
<style type="text/css"> <style type="text/css">
@import "../examples_support/syntax/css/shCore.css"; @import "../examples_support/syntax/css/shCore.css";