ColumnFilter with ColReorder and ColVis fix for hidden columns, NULL ColumnFilter, ColReorder

dblu

Hi, I hope this helps. I have been working on an app for over a year using this great grid, (thanks a lot for it), and spent a long time making things work together. So in this installment, I will list one fix I found that people seem to have trouble with. I also will list another one on a second post. Actually I have a lot of fixes/workarounds and will post what I can. These may or may not exist but I wanted to give back from the community where I have taken a lot of help from.

I have 1.9.2 datatables, 1.5.0 Columnfilter, Colvis 1.0.8, and colreorder is 1.0.6.

Problem: You hide some columns, reorder them, or both and then try to use the column filter, but the index is off by a given amount. If you are using NULL for some of the filters as one guy had an issue with but no answer and I also had an issue, that will throw it off so you are typing in a column and it is searching somewhere else.

Solution, for me it works:
in Columnfilter find
[code]oTable.fnFilter(this.value, _fnColumnIndex(index), regex, smart); //Issue 37[/code]
on line 161 roughly.

Replace that with this
[code]oTable.fnFilter( this.value, oTable.oApi._fnVisibleToColumnIndex(oTable.fnSettings(),
$(this).parent().parent().index() ), regex, smart );[/code]

What this does whether you are hiding a column or not, it will find the index of the TH because like me, the NULL filter was throwing off the count. The parent is a bit much but works right? It looks at the TH parent of the input to give the actual column number that is shown and not the count index of the input which it was looking at. I had say NULL, input, NULL, input, input and that was messing things up for others I think also.

Hope that helps. Don't know but I think this should be added in the actual js file so nobody struggles with this since the _fnVisibleToColumnIndex is an API function and will always be there. If you never hid a column it will return it just fine.

FYI I adapted this from this example.
http://datatables.net/release-datatables/extras/ColReorder/col_filter.html

Enjoy

kpmolloy

Works great. Thanks. This allowed me to add a lot of great features to my tables.

dblu

You are welcome, glad it helped! i have gotten a lot out of other posts and Datatables.net so my pleasure.

miguelfc

Just what I was looking for. Thank you!!!

screeen

Many thanks !

bea

Hi everybody, hi dblu

Thanks very much for your posting, dblu, it is really helpful! I have followed your fix and it works great.

But I ran into a problem and I am wondering if anybody can help me.

I use datatables, Columnfilter, Colvis and ColReorder too.

The problem is for the column that is type:"select", after I reorder the column, the ColumnFilter will stop working on that type:"select" column.

below are my code example:

working version, ColumnFilter works fine with ColReorder, ColVis
.columnFilter({ "aoColumns":[{ type: "text" },
{ type: "text" },
{ type: "text" },
{ type: "text" },
{ type: "text" }
],

This is not working : ColumnFilter works fine with ColVis BUT ColReorder is NOT working
.columnFilter({ "aoColumns":[{ type: "text" },
{ type: "text" },
{ type: "select","values": ['a','b','c']},
{ type: "select",values: ['g','h','i']},
{ type: "text" }
],

Thanks in advance for any help you guys can give me. : )

bea

I found the solution to the question in my 11/27/2013 post, the solution is adopted from dblu's original idea above. : )

dblu's fix on line 161 is to fix column filter type TEXT, I use filter type SELECT, so I need to apply dblu's fix accordingly. what I did is below:

replace line 382 (roughly)
//oTable.fnFilter(unescape($(this).val()), iColumn); //Issue 25

with

oTable.fnFilter(unescape($(this).val()), oTable.oApi._fnVisibleToColumnIndex(oTable.fnSettings(), $(this).parent().parent().index() )); //Issue 25

or to be more specific, in line 382 I replace
iColumn
with
oTable.oApi._fnVisibleToColumnIndex(oTable.fnSettings(), $(this).parent().parent().index() )

FYI, If you use checkbox as the filter type, you want to find your spot in
jquery.dataTables.columnFilter and make the same change accordingly!

Thanks for everybody's input on this forums, I benefit from it tremendously!

dlopeman

I'm having this issue, too!! Cool... going to try it.

Can I have a mixture of INPUT and SELECT type searches for specific columns? What's that code look like?

dlopeman

Wait! What is Columnfilter???? Maybe I need that, huh?

dlopeman

I got ColumnFilter going... Nice Add-on!! SO... that answers my question about combining TEXT and SELECT searches... my next question is around how to populate the SELECT drop down auto-magically with the unique contents of it's column? I don't want to manually add them, as many times the content is dynamic.

dlopeman

I had a typo in my statement that I deleted here! Commas and semi-colons will get you every time!!!!!!

dlopeman

Sweet!! I did both the TEXT and the SELECT changes that bea and dblu said and they work!! Thanks guys!

I still want to know about auto-magic SELECT population...

bea

Hi dlopeman

two ways : )

1. If you want to populate the select list from a SQL result, the syntax is
{ type: "select",values: [*****]}
where ***** is a variable of an array which contains your SQL result. The syntax for ***** is depending on what language environment you are in (php, java....etc)

2. or using this syntax..
{ type: "select" }
and Allan's magical DataTable will populate the select list distinctively and automatically base on the available data of the column.

I end up using option 2 because one would know for sure that if they select something from the list they will get result while filtering the column. Try it and you will know what I mean : )

Also, I want to share that I try to implement the filter type Date, but I couldn't get it to work yet (fyi, the needed change is around line 301 and 303) I tried to swap _fnColumnIndex(index) with
oTable.fnSettings().oApi._fnVisibleToColumnIndex(oTable.fnSettings(), $(this).parent().parent().index())
but I don't know how to trigger $(this).parent().parent().index() on this spot yet. I am hoping somebody knows how and can share!

But I found a work around for the filter type Date, I ended up just using { type: "select" } for a Date column, it will give you the convenience and serve the same purpose for filtering!

Hope these helps!