Double Click on Rows not working after fnFilter usage
Double Click on Rows not working after fnFilter usage
Hi,
I was checking the compatibility of datatables for our new project and came across this issue.
After I use the search input boxes, the rows filtered in the table are not triggering the double click events.
Here's my code.
[code]
$(document).ready(function() {
var oTable = $('#results').dataTable( {
"sPaginationType": "full_numbers",
"sDom": '<"bottom"flip<"clear">>rt<"bottom"flip<"clear">>',
"aLengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
"iDisplayLength": 25
});
$("select.searchSelect").each( function ( i ) {
var elem = $(this);
elem.html( fnCreateSelect( oTable.fnGetColumnData( elem.data('colIndex') ) ) );
elem.change( function () {
oTable.fnFilter( elem.val(), elem.data('colIndex') );
} );
if(this.name=="hsearch_disabled"){
elem.val("false");
oTable.fnFilter( elem.val(), elem.data('colIndex') );
}
} );
$("thead input").keyup( function () {
/* Filter on the column (the index) of this element */
oTable.fnFilter( this.value, $("thead input").index(this) );
} );
$("thead input").each( function (i) {
asInitVals[i] = this.value;
} );
$("thead input").focus( function () {
if ( this.className == "search_init" )
{
this.className = "";
this.value = "";
}
} );
$("thead input").blur( function (i) {
if ( this.value == "" )
{
this.className = "search_init";
this.value = asInitVals[$("thead input").index(this)];
}
} );
$("tfoot input").keyup( function () {
/* Filter on the column (the index) of this element */
oTable.fnFilter( this.value, $("tfoot input").index(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)];
}
} );
$('#results tbody tr').dblclick( function() {
//alert( this.getElementsByTagName('td').length +'----'+this.getElementsByTagName('td')[0]+'-----'+this.getElementsByTagName('td')[0].innerHTML);
window.location.href = '' ;
}
);
new FixedHeader( oTable );
[/code]
And my table in JSP:
[code]
Username
First Name
Last Name
Phone
Mobile
E-Mail
Disabled
Action
${user.userName}
${user.firstName}
${user.lastName}
${user.phone}
${user.mobile}
${user.EMail}
${user.disabled}
No hotels found
[/code]
Also have anyone tried to trim the text once it reaches the maximum width of the column.
Trimming should happen while resizing the column as well.
I was checking the compatibility of datatables for our new project and came across this issue.
After I use the search input boxes, the rows filtered in the table are not triggering the double click events.
Here's my code.
[code]
$(document).ready(function() {
var oTable = $('#results').dataTable( {
"sPaginationType": "full_numbers",
"sDom": '<"bottom"flip<"clear">>rt<"bottom"flip<"clear">>',
"aLengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
"iDisplayLength": 25
});
$("select.searchSelect").each( function ( i ) {
var elem = $(this);
elem.html( fnCreateSelect( oTable.fnGetColumnData( elem.data('colIndex') ) ) );
elem.change( function () {
oTable.fnFilter( elem.val(), elem.data('colIndex') );
} );
if(this.name=="hsearch_disabled"){
elem.val("false");
oTable.fnFilter( elem.val(), elem.data('colIndex') );
}
} );
$("thead input").keyup( function () {
/* Filter on the column (the index) of this element */
oTable.fnFilter( this.value, $("thead input").index(this) );
} );
$("thead input").each( function (i) {
asInitVals[i] = this.value;
} );
$("thead input").focus( function () {
if ( this.className == "search_init" )
{
this.className = "";
this.value = "";
}
} );
$("thead input").blur( function (i) {
if ( this.value == "" )
{
this.className = "search_init";
this.value = asInitVals[$("thead input").index(this)];
}
} );
$("tfoot input").keyup( function () {
/* Filter on the column (the index) of this element */
oTable.fnFilter( this.value, $("tfoot input").index(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)];
}
} );
$('#results tbody tr').dblclick( function() {
//alert( this.getElementsByTagName('td').length +'----'+this.getElementsByTagName('td')[0]+'-----'+this.getElementsByTagName('td')[0].innerHTML);
window.location.href = '' ;
}
);
new FixedHeader( oTable );
[/code]
And my table in JSP:
[code]
Username
First Name
Last Name
Phone
Mobile
Disabled
Action
${user.userName}
${user.firstName}
${user.lastName}
${user.phone}
${user.mobile}
${user.EMail}
${user.disabled}
No hotels found
[/code]
Also have anyone tried to trim the text once it reaches the maximum width of the column.
Trimming should happen while resizing the column as well.
This discussion has been closed.
Replies
For trimming - do you mean overflow:hidden, or using something like an ellipsis? There are a few good examples of how to do ellipsis in cells in the forum - the search option should bring them up :-)
Allan
Its works now. I'm now using delegate method to bind the events.
The only thing bouthering me now is the text trimming. I'm not specifying any widths for the columns as the applicaiton is going to have many modules and I dont want to specify in each one of them. Now, the text is not getting and coming in a single line but the table width is going out of the page and horizontal scroll bars are appearing in the page. I'm using the below css:
[code]
table.display {
margin: 0px auto 5px auto;
clear: both;
width: 100%;
border: 1px solid #254a8b;
}
table.display td {
padding: 3px 10px;
white-space: nowrap;
text-overflow: ellipsis;
}[/code]
Thanks in advance.
Gangadhar.