Getting row data from cells works fine until selecting a new page of data
Getting row data from cells works fine until selecting a new page of data
xesionprince
Posts: 12Questions: 0Answers: 0
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
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
This discussion has been closed.
Replies
[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
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 ???
$('#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();