DataTables row click event does not fire after 25th row
My DataTable has a
row click event on table id
#pftable. This event basically reads some pertinent row data ('.td_pfid', '.td_nodedate', etc.), then passes off to the server to pull some addition detailed data.
This event is ONLY enabled for the first 25 rows of my DataTable.
Once I use the "Show ... entries" dropdown to select more table data, the click event DOES NOT fire on those additional table rows.
Here's the click event :
- $("#pftable tbody tr").click(function (event) { // TABLE ROW CLICK EVENT !!
var rownum = $(this).index();
var thisPfId = $(this).find('.td_pfid').text(); // Find Portfolio Id and Node Date !!
var thisDate = $(this).find('.td_nodedate').text();
- ... // some code omitted here...
- var searchIt = $("#pftable tr td").filter(function (index) {
return $(this).text() === thisPfId;
});
var firstTr = searchIt.filter(":first").parent(); // GET FIRST OCCURRANCE OF PfId
var firstDate = firstTr.find('.td_nodedate').text();
- getTradeContribs(thisPfId, nodeDatesJson); // GET TRADE CONTRIBUTIONS !!
});
It works fine on the first 25 rows, but nothing after that.
Here's the datatable def:
- var oTable = $('#pftable').dataTable({ // TABLE OF PORTFOLIO EXPOSURES !!
"aaData": PfJsonData,
"sScrollY": "450px",
"sPaginationType": "full_numbers",
"aoColumns":[
{ "mData": "PfId" },
{ "mData": "Name" },
{ "mData": "ExpType" },
{ "mData": "Date" },
{ "mData": "Term" },
{ "mData": "Exposure" }
],
'aoColumnDefs': [ // NB: col index starts from zero
{ "sTitle": "Pf Id", "aTargets": [0] },
{ "sTitle": "Name", "aTargets": [1] },
{ "sTitle": "Exp Type", "aTargets": [2] },
{ "sTitle": "Date", "aTargets": [3] },
{ "sTitle": "Term", "aTargets": [4] },
{ "sTitle": "Exposure", "aTargets": [5] },
{ "sClass": "td_pfid", "aTargets": [0] }, // add a class attrib column 0 "Pf Id"
]
});
and an HTML snippet showing the table template:
- <div class="floatleft">
<div class="PortfolioList"> <!-- PORTFOLIO TABLE CONTENTS ! -->
<table id="pftable">
<caption>Portfolio Definitions</caption>
<tbody></tbody>
</table>
</div>
</div>
I'll continue researching the ROW CLICK EVENT issue, but please respond if you have any advice or tips for me.
Thank you in advance everybody !
Bob