Fixed Columns and Columns Search do not work together.
Fixed Columns and Columns Search do not work together.
terencec
Posts: 4Questions: 2Answers: 0
Link to test case:
https://drive.google.com/file/d/1R5xczwVLv0KPejYxaChtXLFnP-ItnQRc/view?usp=sharing
Debugger code (debug.datatables.net):
var n = document.createElement('script');
n.setAttribute('language', 'JavaScript');
n.setAttribute('src', 'https://debug.datatables.net/debug.js');
document.body.appendChild(n);
Error messages shown:
15 tests complete. 2 problems were found:
Table ID Problem description
- Using FixedHeader without setting a meta tag to "user-scalable=no" will mean that FixedHeader does not work on Android devices as position:fixed is disabled in the browser under those conditions. Either add a suitable meta tag, or be aware that FixedHeader will not operate for Android users.
pctest Tables which have scrolling enabled should have their width set to be 100% to allow dynamic resizing of the table. This should be done with a width="100%" or style="width:100%" attribute. Using width:100% in your CSS is unfortunately not enough as it is very difficult to read a percentage value from stylesheets!
(The audience is only PC user, no Android. I don't know why I got style="width:100%" error. The table tag has the said style)
Description of problem:
My background is EE. I have a project to post the test programs on the Apache. Datatables works well except I have few problems I could not figure it out. I am not sure if I make some mistakes.
I use Chrome only.
- After fixed the first 2 columns, the first 2 columns search do not work anymore. The fixed column and column search work independently.
- I tried to make the "Input Parameters" column narrower and I don't mind the text wrapped in the "Input Parameters" column. I use columnDefs targets width. It does not work. See the test case.
- It seems the stateSave:true will save the Columns Search. If I refresh the browser, the search text disappears but the filter is applied. I am able to clear the filter by the Javascript below Does it suppose to do that?
for (i=0; i<table.columns().header().length; i++)
{
table.column(i).search("").draw();
}
These are the questions right now. I have some minor issues of re-order columns. I will ask in the future.
Thanks
Answers
I also created a test case in datatables.net. It is exactly the same as the one I uploaded to Google drive. Thanks
http://live.datatables.net/yegisiju/1/edit?html,css,js,console,output
You are setup basically like the FixedHeader search example. However one problem is that FixedHeader is not compatible with the scrolling features needed for FixedColumns. Per the FixedHeader docs:
I commented out the scrolling features and FixedColumns and now the search works.
http://live.datatables.net/xuxusati/1/edit
The first decision is which do you want to use FixedHeader or FixedColumns?
Kevin
Kevin,
Yes, basically, I copied the fix-header search example. I overlooked the warning.
I spent days on it and was wondering what I did wrong.
OK, is it any plan to make them compatible to each other?
Would you take a look of my question below? The first question is more important. I want to make the width of "Input Parameters column width narrower but I could not.
(You can test it by remove the codes below in the test cases and type "eeeee" in the "Input Parameters" column search. Nothing matches. Now refresh the browser. You will see the problem I reported)
for (i=0; i<table.columns().header().length; i++)
{
table
.column(i)
.search("")
.draw();
}