Column filter does not work properly with the "hidden columns" feature of DataTables.

[GoogleCodeExporter]

What steps will reproduce the problem?
1. Hide columns with Data Tables:
"aoColumnDefs": 
  [
    { "bSearchable": false, "bVisible": false, "aTargets": [ 0, 1 ] }
  ]

2. Create column filter for columns behind the hidden ones:

$('#mytable').
.DataTables({
"aoColumnDefs": 
  [
    { "bSearchable": false, "bVisible": false, "aTargets": [ 0, 1 ] }
  ]
})
.columnFilter({ 
  aoColumns: [
  null,
  null,
  { type: "text" },
  { type: "select" }
]});

What is the expected output? What do you see instead?

The column filter shows the correct header, however uses the dat from columns 
shifted right by the number of hidden columns for both "select" type values as 
well as for filtering.

What version of the product are you using? On what operating system?

Latest version of Column Filters as of July 9, 2012. DataTables 1.9.2.

Please provide any additional information below.

Original issue reported on code.google.com by o...@xyz.com on 9 Jul 2012 at 7:20

[GoogleCodeExporter]

hi,

actually, if you add bUseColVis: true parameter to columnFilter, it seems to 
work

have swing

Original comment by virtualg...@gmail.com on 15 Jul 2012 at 5:45

[GoogleCodeExporter]

Hi thanks a lot for your work,

I add colvis.js 
and bUseColVis: true parameter to columnFilter
and "bStateSave": true parameter to datatable

the filter still search in the previous column when a previous column is hidden

regards

Original comment by DataCent...@gmail.com on 1 Aug 2012 at 12:34

[GoogleCodeExporter]

Hi I am Rajendra Got the Same Problem so i used previous release of nov 2011 it 
work fine seem new version have issue  

Original comment by rajendra...@gmail.com on 30 Aug 2012 at 9:15

[GoogleCodeExporter]

One More Thing aoColumns {type:"select"} select does not work either in new 
version

Original comment by rajendra...@gmail.com on 30 Aug 2012 at 9:18

[GoogleCodeExporter]

i have the same problem using columnFilter over hidden feature of datatables.
i know this is the old issue, but i'm just like all guys here who have the same 
problem, i try to search in google, but i never found any correct reference on 
how to solve this problem. so i decide to lookup into the source.

as references i currently use 0.9.0 version of columnFilter

first, i try to follow DataCenter75@gmail.com direction to set  bUseColVis: 
true parameter to columnFilter.

and i open the source file of columnFilter.
goto line 261 which point into declaration(after  line "$(sFilterRow + " th", 
oTable).each(function (index) {") -> i = index;

i change the line to 

                if(properties.bUseColVis!=='undefined')
                {
                  i = $($(this)[0]).attr('index');
                }else{
                  i = index;
                }

and don't forget to change your html datatable, and give attribute index(i 
choose this name) on your th tags, and make sure those index point into your 
aoColumns index .
by example :
1. make sure all index attribute value pointing into the correct position from 
your aoColumns datatables property.

<table  id="test" class="display"  width="100%" cellpadding="0px" 
cellspacing="0px">

<thead>

              <tr>

              <th index='0'>ID DPT</th>
              <th>ID Prov</th>
              <th>ID Kab</th>
              <th>ID Kec</th>
              <th>ID Kel</th>
             <th>Nama Propinsi</th>
              <th>Nama Kabupaten</th>
              <th>Nama Kecamatan</th>
              <th>Kel./Desa/Kampung</th>
              <th index='9'>TPS</th>
              <th index='10'>Urut Excel</th>
              <th index='11'>N I K</th>
              <th index='12'>Nama Lengkap</th>
              <th index='13'> Tempat Lahir</th>
              <th index='14'>Tanggal Lahir</th>
              <th index='15'>JK</th>
              <th index='16'>Status Kawin</th>
              <th index='17'>Alamat</th>
              <th index='18'>Keterangan</th>
              <th index='19'>Actions</th>
            </tr>

</thead>
      <tfoot>
              <tr>
              <th index='0'>ID DPT</th>
              <th>ID Prov</th>
              <th>ID Kab</th>
              <th>ID Kec</th>
              <th>ID Kel</th>
             <th>Nama Propinsi</th>
              <th>Nama Kabupaten</th>
              <th>Nama Kecamatan</th>
              <th>Kel./Desa/Kampung</th>
              <th index='9'>TPS</th>
              <th index='10'>Urut Excel</th>
              <th index='11'>N I K</th>
              <th index='12'>Nama Lengkap</th>
              <th index='13'> Tempat Lahir</th>
              <th index='14'>Tanggal Lahir</th>
              <th index='15'>JK</th>
              <th index='16'>Status Kawin</th>
              <th index='17'>Alamat</th>
              <th index='18'>Keterangan</th>
              <th index='19'>Actions</th>

            </tr>
 </tfoot> 

          <tbody>
            <tr>
              <td></td>
            </tr>
          </tbody>
</table>

2. this is my aoColumns
                          "aoColumns": [{'bSortable' :true,'bSearchable':true}
                          ,{'bSortable'        :true,'bSearchable':true,"bVisible": false}
                          ,{'bSortable'        :true,'bSearchable':true,"bVisible": false}
                          ,{'bSortable'        :true,'bSearchable':true, "bVisible": false}
                          ,{'bSortable'        :true,'bSearchable':true, "bVisible": false}

                          ,{'bSortable'        :true,'bSearchable':true,"bVisible": false}
                          ,{'bSortable'        :true,'bSearchable':true,"bVisible": false}
                          ,{'bSortable'        :true,'bSearchable':true, "bVisible": false}
                          ,{'bSortable'        :true,'bSearchable':true,"bVisible": false}

                          ,{'bSortable'        :true,'bSearchable':true}
                          ,{'bSortable'        :true,'bSearchable':true}

                          ,{'bSortable'        :true,'bSearchable':true}
                          ,{'bSortable'        :true,'bSearchable':true}
                          ,{'bSortable'        :true,'bSearchable':true}
                          ,{'bSortable'        :true,'bSearchable':true}
                          ,{'bSortable'        :true,'bSearchable':true}
                          ,{'bSortable'        :true,'bSearchable':true}
                          ,{'bSortable'        :true,'bSearchable':true}
                          ,{'bSortable'        :true,'bSearchable':true}
                          ,{'bSortable'        :false,'bSearchable':false, "sWidth": "160px"}]

as you can read in my th tags, there is eight element i did'nt give [index] 
attribute. and of course you can named it with any attribute by your self, only 
to remind to change the attribute name in the columnFilter source code. 
cheers and good luck. :)

Original comment by alan.bri...@gmail.com on 15 May 2013 at 8:38

[GoogleCodeExporter]

sorry, something wrong with my script, it seems 
line  -> if(properties.bUseColVis!=='undefined')
need to change to
if(properties.bUseColVis==true)

so it can work correctly.

Original comment by alan.bri...@gmail.com on 15 May 2013 at 8:52

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

I combined your solution with this 
https://code.google.com/p/jquery-datatables-column-filter/issues/detail?id=88 
and it worked !! thanks a lot.

Original comment by ztdn3...@gmail.com on 9 Jun 2014 at 7:28