User Selectable Rows and Submit form for Comparing Two selected rows.

fungku

I am having a heck of a time getting this to work.

I've been trying to modify and use a combination of the user-selectable rows (http://datatables.net/release-datatables/examples/api/select_row.html) and datatables form elements (http://datatables.net/release-datatables/examples/api/form.html) example code.

What I want to do is limit row selection to two rows and then load a page with more info on each to compare them in detail (I guess by clicking a form button to submit after selecting two rows).

I've been teaching myself PHP and Javascript, and slowly starting to look at JQUERY but I just don't quite get it yet, so modifying anything like that is very hard for me.

I've basically got to the point of throwing random stuff together and seeing what happens in my browser when I load the page. I don't quite understand this JQUERY chaining stuff, any insight on how I can start going in the right direction with this?

[code]
var asInitVals = new Array();
var oTable;

function fnGetSelected( oTableLocal )
{
return oTableLocal.$('tr.row_selected');
}

$(document).ready(function()
{
$('#item-table tr').click( function() {
$(this).toggleClass('row_selected');
} );

oTable = $('#item-table').dataTable(
{
"aoColumnDefs": [ { "bSortable": false, "aTargets": [ 0 ] } ],
"aaSorting": [[ 1, "desc" ]],
"bSortCellsTop": true,
"asStripeClasses": [],
"sPaginationType": "full_numbers",

"oLanguage":
{
"sInfo": "Showing _START_ to _END_ (of _TOTAL_)",
"sInfoEmpty": "No entries to show",
"sInfoFiltered": " from _MAX_ records"
},

"iDisplayLength": 10,
} );

$("thead input").keyup( function () {
/* Filter on the column (the index) of this element */
oTable.fnFilter( this.value, $("thead input").index(this) );
} );

$('#form').submit( function() {
var sData = oTable.fnGetSelected( oTableLocal ).serialize();
// var sData = oTable.$('input').serialize();
alert( "The following data would have been submitted to the server: \n\n"+sData );
return false;
} );

} );
[/code]

And as far as limiting the selection to two rows:
I want the oldest selected row to de-select if they click a third row so that there is always only 2 rows selected.

edit: I just spent an hour trying to limit to two selections with no luck. All I do is break the datatable plugin...

fungku

...

fungku

...

fungku

...

fungku

...

Forget it. I came up with solutions and shared them, but what's the point if this place is dead :P