Issue using Column level filter with x and y Scrolls
Issue using Column level filter with x and y Scrolls
Hi Allan,
I am using Datatable plugin from past 2-3 weeks and finding it the perfect plugin for our requirements. Thanks for all your efforts. After exploring so many features of this plugin, now I am in a position to integrate all these to form a pretty complex and rich interactive UI page for my application. I am struck in between while using below combination:
Fixed Header with X and Y scroll bars + Column level filtering using select menus.
As per your demo, below one works perfectly for column filtering:
$(document).ready(function() {
var oTable = $('#example').dataTable( {
"oLanguage": {"sSearch": "Search all columns:"}
} );
But, while using the same to enable horizontal and vertical scrollbars, I am facing issues:
$(document).ready(function() {
var oTable = $('#example').dataTable( {
"sScrollX": "100%",
"sScrollY": 200,
"oLanguage": {
"sSearch": "Search all columns:"
}
} );
On first time access, it gives javascript error saying 'length is null or not an object' at below line of fnGetColumnData method:
if (bIgnoreEmpty == true && sValue.length == 0) continue;
And, the filter row is displayed at the bottom of the table for which we need to scroll down. And when we filter any of the columns, it filters the rows, but the filtering row (with select fields) disappears from the table.
Please suggest me to resolve this issue.
Thanks in advance,
Sriram
I am using Datatable plugin from past 2-3 weeks and finding it the perfect plugin for our requirements. Thanks for all your efforts. After exploring so many features of this plugin, now I am in a position to integrate all these to form a pretty complex and rich interactive UI page for my application. I am struck in between while using below combination:
Fixed Header with X and Y scroll bars + Column level filtering using select menus.
As per your demo, below one works perfectly for column filtering:
$(document).ready(function() {
var oTable = $('#example').dataTable( {
"oLanguage": {"sSearch": "Search all columns:"}
} );
But, while using the same to enable horizontal and vertical scrollbars, I am facing issues:
$(document).ready(function() {
var oTable = $('#example').dataTable( {
"sScrollX": "100%",
"sScrollY": 200,
"oLanguage": {
"sSearch": "Search all columns:"
}
} );
On first time access, it gives javascript error saying 'length is null or not an object' at below line of fnGetColumnData method:
if (bIgnoreEmpty == true && sValue.length == 0) continue;
And, the filter row is displayed at the bottom of the table for which we need to scroll down. And when we filter any of the columns, it filters the rows, but the filtering row (with select fields) disappears from the table.
Please suggest me to resolve this issue.
Thanks in advance,
Sriram
This discussion has been closed.
Replies
The problem that you are seeing is basically to do with the selector: $("tfoot th") which is used in the demo. It is picking up more elements that the number of columns (since DataTables has a clone of the footer row), hence the error.
When using scrolling you can work around this with the following selector: $(".dataTables_scrollFootInner tfoot th")
It is also worth noting that FixedHeader is not supported with scrolling in 1.7: http://datatables.net/forums/comments.php?DiscussionID=2374
Regards,
Allan
(1)
Here I am having multiple tables and I can't use the selector that you have mentioned.
Can you please suggest me what will be the selector if I have two datatables, say tableone and tabletwo, where I need to add the column filtering for both of them them?
(2)
Also, one more combination I was trying with these multiple tables is that of text fields for filtering instead of select.
Here also I am not able to find out proper selector to enable focus/blur/keyup events using table id. such as
$(#tableone thead tr td input).focus(...) is not working. Only individual ids for each input field is making it work.
Kindly give your inputs.
oTable2 = $("#orderTable").dataTable({
"sScrollX": "100%",
"sScrollY": 150,
"bJQueryUI": true,
"bPaginate": false,
"oLanguage": {
"sSearch": "Search all columns:"
}
});
And table definition is as follows:
2. No it wouldn't with scrolling - DataTables needs to separate out the header / body and footer into three different tables (which is why the scrolling is fairly difficult to do :-) ). Have a poke around in Firebug in the live DOm and you'll see the structure and be able to figure out a selector.
3. Rather than using style="width:150%", try using sScrollXInner: "150%" - http://datatables.net/usage/options#sScrollXInner . DataTables isn't using FixedHeader internally - it's a different mechanism to achieve a similar effect. The reason it's not supported is that the method FixedHeader uses just wouldn't work with the 'viewport' method that 1.7 uses for Scrolling.
Regards
Allan
Though I am new to JQuery development, I am finding it very easy due to this plugin, and I really want to involve more in this plugin and play my part to improve its featueres and contribute.
Today, after I could use both the text filter and select filters successfully in my application and going to show them to my manager to get one of them approved for our pages. Only concern is that I am having is that of alignment of header and data rows. I am using fixed layout table with two internal tables having 50% each covered, such as below:
....
....
Here, I am having 17 columns in tableone and 15 columns in table two which must support dynamic length column headers and data which may vary based on locale, so I didnt set any width for these columns. I have initialized both the datatables as below. I had to set such a high sScrollXInner to make sure all the columns are visible, othewise with lesser values some of the columns on right hand side are not visible:
"sScrollX": "100%",
"sScrollXInner": "365%",
"sScrollY": "150",
"bScrollCollapse": true,
"bProcessing": true,
"bJQueryUI": true,
"bPaginate": false,
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
if ( jQuery.inArray(aData[0], gaiSelected2) != -1 )
{
$(nRow).addClass('row_selected');
}
return nRow;
},
"oLanguage": {
"sSearch": "Search all columns:"
}
Please suggest, what might be causing the misalignment and how can I get rid of that issue.
Are you able to post a link to an example showing the issue (or send it to me directly if you don't want to make it public: http://datatables.net/contact )? That would be most useful to help diagnose the issue. Do you get any console.log() warnings from DataTables at all? Also, does the problem still occur if you remove the "table-layout:fixed"? I've not tried using that option with DataTables before - although I did just try it on one of my examples and it seemed okay.
Regards,
Allan
Few more findings of my page are as below:
- I am using IE8 in compatibility mode, and I can see this issue consistently
- But, when I switch back to normal IE8, it renders with misalignment for the first time only. And after that if I sort any of the columns, it aligns all the columns perfectly fine. This is the same case even with even google Chrome.
Regards,
Allan