Aoout the Pagination of dataTables

lz

Dear:
I do have some questions that let me being at a loss .Hope I can get your help.
I use Microsoft Visual Studio 2005 and Microsoft sql server 2005 as my development tools. The felow are my codes on using dataTables(the version is 1.5 Beta.7). I use a function named GetData to receive server-side data . I want to get the contents of the selected row of dataTables.To my surprise ,as for as the first ten rows concerned, the click event that I bind to the dataTables
do work accurately. That means the function fnFormatDetails() can be triggered as soon as t click the row which No is less than 10. But when the dataTables has more than 10 rows, the function fnFormatDetails() will never be triggered! I don’t know whether my codes are wrong or not.
Be happy to get you answers.

function fnFormatDetails ( nTr )
{
var iIndex = oTable.fnGetPosition( nTr );
var aData = oTable.fnSettings().aoData[iIndex]._aData;
//the below codes is deleted
}
function GetData()
{
var param =$("#purid").val();
$.ajax({
type:"get",
/* the server-side process
url:"purcontractDetail.ashx",
data: ({purcontractid :"1"}),
dataType: "json",
async: false,
success:function(data){
aDataSet=data;
}
});
}


$(document).ready(function(){
/* define variables
var aDataSet;
var oTable;
var asInitVals = new Array();
/**get server-side data
GetData();
/*initialize the dataTables
oTable=$('#dlist').dataTable({
"bProcessing": true,
"aaData": aDataSet,
"aoColumns": [
{"sTitle":"num","bVisible":false },
{ "sTitle": "code"},
{ "sTitle": "name"},
{ "sTitle": "quantity"},
{ "sTitle": "unit"}
],
"oLanguage": {"sSearch": "Search all columns:"}
});
/*set table foot
$("tfoot input").keyup(function(){
/* Filter on the column (the index) of this element */
oTable.fnFilter(this.value, $("tfoot input").index(this)+1);
});
//* Add a click handler to the rows - this could be used as a callback */
$("#dlist tbody").click(function(event) {
$(oTable.fnSettings().aoData).each(function (){
$(this.nTr).removeClass('row_selected');});
$(event.target.parentNode).addClass('row_selected');
});
$("#dlist tbody tr").click(function(event){
/* the function to show the contents of selected nTr
fnFormatDetails(this);
});
$("tfoot input").each( function (i) {
asInitVals[i] = this.value;
} );

$("tfoot input").focus( function () {
if ( this.className == "search_init" )
{
this.className = "";
this.value = "";
}
} );

$("tfoot input").blur(function (i){
if ( this.value == "" )
{
this.className = "search_init";
this.value = asInitVals[$("tfoot input").index(this)];
}
});


}



Yours
LZ

nlaslett

The jQuery .click() function is only able to bind to objects that currently exist in the DOM. If you have the default pagination of 10 records, only the first 10 rows exist at the time jQuery binds the click function to your rows.

I can think of two ways to solve this:
1. Use the new .live() event in jQuery to bind .click() to all current - and future - matched elements
2. Place the onClick event directly in the element

The first option is cool but with high overhead. The second solution is less dynamic but very simple and effective.

Neil