Getting row data from cells works fine until selecting a new page of data

xesionprince

I have a dropdownlist for each row in the third column of my table, but am only able to select from the first two rows.

In my jquery:

$('#assignments').dataTable({

"sScrollY": "300px",
"bPaginate": true,
"bProcessing": true,
"bServerSide": false,
"aLengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
"aoColumnDefs": [{ "sWidth": "35%", "aTargets": [0] }, { "sWidth": "50%", "aTargets": [1] }, { "sWidth": "15%", "aTargets": [2]}]
});

$('select[name=assignmentChoices]').change(function (e) { ....

var productKey = e.srcElement.parentElement.parentElement.cells.ProductTD.innerText;

yet every time I use the previous next buttons or sort the columns my JQuery event doesn't fire, except for the dropdowns in the first two rows of the table.

I realize there is a disconnection somehow between the DOM and the Datatable cell index, so how do I use fn.. whatever it is ????

Help greatly appreciated.

robert.everett@amtrusteu.co.uk

Doywan

Hi, to get the function working on each table redraw (changing page for exemple), use fnDrawCallback.

[code]$('#assignments').dataTable({

"sScrollY": "300px",
"bPaginate": true,
"bProcessing": true,
"bServerSide": false,
"aLengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
"aoColumnDefs": [{ "sWidth": "35%", "aTargets": [0] }, { "sWidth": "50%", "aTargets": [1] }, { "sWidth": "15%", "aTargets": [2]}],
"fnDrawCallback": function () {
Your function here
}
});[/code]

allan

@xesionprince - take a look at the top FAQ: http://datatables.net/faqs#events .

Allan

xesionprince

Hi
Many thanks for the help, however the top FAQ was no help really as it told me to assign my table initialisation code to a variable - why would I do that ? it doesn't fit in with the syntax of my existing jquery.

What I need to do is get the selected value of an html select option element, the select element is the immediate child of the third td element (third column of my table.)

Based on that selected value, I then need to get the previous sibling td's text, ie the other other columns data for that row.

Each row of the table is being generated inside a @ForEach.. loop in my razor vb.net mvc view, so every select id will have the same name or id (workaround was to use @row.GetHashCode.ToString as the id of the select element) to give a unique id to each select.

So it is maybe not as simple as I'd hoped?

@Doywan - what do I put inside the fnDrawCallback function ???

xesionprince

WOW, I figured it out:

$('#assignments').dataTable({

"sScrollY": "300px",
"bPaginate": true,
"bProcessing": true,
"bServerSide": false,
"aLengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
"aoColumnDefs": [{ "sWidth": "35%", "aTargets": [0] }, { "sWidth": "50%", "aTargets": [1] }, { "sWidth": "15%", "aTargets": [2]}],

"fnDrawCallback": function () {

$('#assignments tbody tr').each(function () {

var sTitle;
var rowMousePos = $('td', this);
var insGrp = $(rowMousePos[0]).text();
var products = $(rowMousePos[1]).text();
var assignment = $(rowMousePos[2]).text();

sTitle = insGrp + products + assignment;
this.setAttribute('title', sTitle);
});
}
});

/* Apply the tooltips */
$('#assignments tbody tr[title]').tooltip({
"delay": 0,
"track": true,
"fade": 250
});

Brilliant, from here I should be able to work out how to get the selected option of the select for
$(rowMousePos[2].text();