Fixed Columns and Columns Search do not work together.

terencec

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.

1. After fixed the first 2 columns, the first 2 columns search do not work anymore. The fixed column and column search work independently.
2. 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.
3. 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

terencec

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

kthorngren

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:

Please note that FixedHeader is not currently compatible with tables that have the scrolling features of DataTables enabled (scrollX / scrollY). Please refer to the compatibility table for full compatibility details.

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

terencec

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.

1. 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. (I try to make the table more compact so the users don't not to scroll to much)
2. 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?
   (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();
   }