I can't get my Individual Column Search working

Marina06

Hi again :D

I can't get my Individual Column Search working...
My bottom TH cells do display the inputs where needed, but on blur/change/keyup, nothing happends...

EDIT : Console : Undefined is not a functio - corresponding to " oTable.columns().eq( 0 ).each( function ( colIdx ) {"

Thank u :))

 $('#datos tfoot th').not(":eq(0),:eq(3),:eq(5),:eq(6)") //Exclude columns  
                         .each( function () {
                                                var title = $('#example thead th').eq( $(this).index() ).text();
                                                $(this).html( '<input type="text" placeholder="Rechercher" />' );
                                            });
      var oTable = $('#datos').dataTable();
      
       oTable.columns().eq( 0 ).each( function ( colIdx ) {
        if (colIdx == 0 || colIdx == 3 || colIdx == 5 || colIdx == 6) return; //Do not add event handlers for these columns

        $( 'input', table.column( colIdx ).footer() ).on( 'keyup blur change', function () {  oTable
                                                                                              .column( colIdx )
                                                                                              .search( this.value )
                                                                                              .draw();
                                                                                            });
    }); 

tangerine

$( 'input', table.column( colIdx ).footer() )

Your "table" variable is oTable, not table.

Marina06

Hi, Thanks for the correction,; sorry oops.
But it still doesn't work and I remain with Undefined is not a function... :s

daniel_r

You can also try my yadcf plugin, see showcase

Marina06

Thank u ! ;) I'll check that tomorrow and will let u know

Marina06

Hi Everybody ,
I've tried to make my js match the several examples I found on yadcf , but... I can't get it work either.

I get unexpected results such as :
column 0 which contains a select instead of being not searchable,

column 1 is ok as it contains an input type ='text' but nothing happends when I type something in,

column 2 contains a select as per my requirement, but <options> are empty

column 3, 5, 6 are empty of input and select (this is ok)

column 4 is supposed to contain a select, but it doesn't actually.

Thanks for your help, any kind of solution is accepted.

```
$(document).ready(function() {

'use strict';

oTable= $('#datos').dataTable({ // tried with DataTable
"sAjaxSource": 'ajx/datatables_process.php',
bProcessing: true,
bServerSide: true,
"bStateSave": true,

"aaSorting": [[ 3, "desc" ]],

"lengthMenu": [[15, 25, 50, -1], [15, 25, 50, "Afficher tout"]],

"aoColumns": [
                {"bSearchable":false}, // job_id
                {"bSearchable":true}, // job_intitulé
                {"bSearchable":true}, // job_contrat
                {  // job_date_insertion
                   "bSearchable":true,
                  "aTargets": [ 3 ], "aaSorting": [[ 3, "desc" ]],
                   "mRender": function(date, type, full) {return moment(date).format('DD-MM-YYYY'); }                    
                }, 
               { // job_cp + ville
                 "bSearchable":true,
                 "aTargets": [ 4 ] ,  
                  "mData": 4 ,  
                  "mRender" : function ( data, type, full ) 
                             {  var texte=  data+' '+full[5];
                                var sReturn = full[0];
                                return "<a href='../offredemploi.php?id="+sReturn+"' target='_Blank'>"+ texte + "</a>"; }
               },
               null, // job_date_descriptif
               { // VOIR
                 "bsortable" : false,
                 "ordering": false,
                 "mRender": function(data,type) 
                             { var sReturn = data;
                               return "<a href='../offredemploi.php?id="+sReturn+"' target='_Blank'> Voir </a>";
                             }  , "mData": null,
                            "sDefaultContent": " ",                
               }
              ] ,




    "spaginationType" :  "full_numbers",
    language: {
                processing:     "Traitement en cours...",
                search:         "Rechercher&nbsp;:",
                lengthMenu:    "Afficher _MENU_ &eacute;l&eacute;ments",
                info:           "Affichage de l'&eacute;lement _START_ &agrave; _END_ sur _TOTAL_ &eacute;l&eacute;ments",
                infoEmpty:      "Affichage de l'&eacute;lement 0 &agrave; 0 sur 0 &eacute;l&eacute;ments",
                infoFiltered:   "(filtr&eacute; de _MAX_ &eacute;l&eacute;ments au total)",
                infoPostFix:    "",
                loadingRecords: "Chargement en cours...",
                zeroRecords:    "Aucun &eacute;l&eacute;ment &agrave; afficher",
                emptyTable:     "Aucune donnée disponible ",
                paginate: {
                            first:      "Premier",
                            previous:   "Pr&eacute;c&eacute;dent",
                            next:       "Suivant",
                            last:       "Dernier"
                        }

            } 



}).yadcf ( [
                {column_number : 0},
                {column_number: 1,  filter_type: "auto_complete",  text_data_delimiter: "," }, 
                {column_number: 2, select_type: 'chosen', select_type_options: { no_results_text: 'Can\'t find ->',
                                                                                 search_contains: true
                                                                                }
                },
                {column_number : 3},
                {column_number : 4, filter_type: "auto_complete",  text_data_delimiter: "," }, 
                {column_number : 5},
                //{column_number : 6}
              ], 'footer'
             );


 var oTable = $('#datos').dataTable();  
oTable.fnSetColumnVis( 5, false );
$('thead th:last-child').unbind(); 

});

daniel_r

If you set a column to be a "bSearchable":false it wont be filterabale, so remove the column_number : 0 from yadcf constructor, also in case that you using chosen for select filter you must include chosen js/css/images and in case you are using filter_type: "auto_complete" you must include jquery ui js/css

Marina06

Hi Daniel,
Thanks for your explanations.

Almost everything works fine now but the auto_complete doesn't : when I start typing nothing happends with the latest version of jquery ui.
With UI version 1.11.2, I had "no search results".
(jquery ui js+css are included,and bJQueryUI : true ).

so I use "text" instead -

Great plugins Allan and Daniel_R, amazing brains :)

daniel_r

bJQueryUI is related to datatables styling and not related in any way to yadcf, you can try grabbing the jquery / ui version that I used in yadcf showcase to see if it solve your auto complete issues

Marina06

Ok. Even with the same versions of UI et JS as those used in your demos, auto_complete doesn't filter nothing.
I've tried with enable_auto_complete too, but no result either...

daniel_r

If you provide a jsbin/jsfiddle sample I'll be able to look at it, because the auto complete filter should be very easy to setup

Marina06

Truth is that I don't know how to create a jsbin of my code since I use PHP to output data... so, I've removed everything that corresponds to PHP and replaced it by text values in my <tr> in jsbin. But i don't think that is what I'm supposed to do.....
(sorry to be that ignorant !!! )

Then I don't know how I can add the js and css for yadcf and chosen, etc

Look at what I've done http://live.datatables.net/rufaluxu/1/edit
Is my way of including the js and css correct ??? If it is, I don't know how to link chosen.js & css...
I guess that what I've done in js bin is all wrong !!
I've been watching tutorials and help topics about how to use jsbin, and checking existing datatables jsbins, but............... :s

daniel_r

Nevermind then, in case that you'll have a link to a working sample (to you server?) you can post it and I'll try to see what went wrong.

Marina06

Ok :)
The hosting my websites are on doesn't support pdo, and for this website I'm working on; I do use pdo, so as soon as this website is online, I give you the link .
Thanks for your support :)

Marina06

Hello,
I hadn't seen that when searching a column called [postcode + city], the search was effective only on the first value, here on postcode. If I type "Paris" no result is returned.
How can I solve that? I've tried several ideas of mine, but :D :S

Can you give a little help please, thank you

{ // job_cp + ville POSTCODE + CITY
    "bSearchable":true,
     "aTargets": [ 4  ] ,                       
     "mRender" : function ( data, type, full ) 
                          {  var texte=  data+' '+full[5];
                         var sReturn = full[0];
    return "<a href='../offredemploi.php?id="+sReturn+"' target='_Blank'>"+ texte + "</a>"; 
                                     }
 },
// etc
.yadcf ( [  {column_number : 4, filter_type: "text",  text_data_delimiter: ",", filter_default_label: "Rechercher" },
]

daniel_r

@Marina06 I need an online example to tell what went wrong or how to solve it...

Marina06

oh... ok... I still haven't looked for a hosting yet.. humm. ok I'll come back & let u know when I have it...

Marina06

Hi ! :) Me again !!
@daniel_r : I've just sent you the URL of my web in order that you can review it and tell me what's going wrong with the search in a colum that contains 2 values. As I said in my previous posts, in the column [postcode - city] --> only postcode is "searchable".

Many many thanks

daniel_r

I see that you are using a server side processing, and I saw that thesearch data of the column N#5 (sSearch_5) is sent just fine , both in case of postcode and city, so it looks like an issue in your php code that not using the proper function to compare string, see the following q/a in so , its not related to datatables nor yadcf, it looks like a improper function use in php code

Marina06

@daniel_r
Ok, and I forgot to remember you that when in Column 2 "Poste", I replace "text" per "auto_complete", I get "No search result"...

{column_number: 2, filter_type: "auto_complete", text_data_delimiter: ",",filter_default_label: "Rechercher" },//

---

@everybody
Underneath, my php for Individual column filtering, which works well when a single value is diplayed per column, but when I display "postcode - city" in a same column, I only have my postcode searchable...
I don't know how to tell php that in my column 5, are values 5 and 6, that both must be searchable / filterable..
Thanks for your help.

// datatables extract of "aoColumns" :
{     "bSearchable":true,   // COLUMN  5 (contains values 5 and 6)
       "mRender" : function ( data, type, full ) 
        {  var texte=  data+' - '+full[6]    // displays "postcode  - city"  
        var sReturn = full[0];
       return "<a href='offre_emploi.php?id="+sReturn+"' target='_Blank'>"+ texte + "</a>"; 
        }
 },

// php
 /* Individual column filtering */
    for ( $i=0 ; $i<count($aColumns) ; $i++ )
    {
        if ( isset($_GET['bSearchable_'.$i]) && $_GET['bSearchable_'.$i] == "true" && $_GET['sSearch_'.$i] != '' )
        {
            if ( $sWhere == "" )
            {
                $sWhere = "WHERE ";
            }
            else
            {
                $sWhere .= " AND ";
            }
            $sWhere .= $aColumns[$i]." LIKE '%".  $_GET['sSearch_'.$i]."%' ";
        }
        
    }

daniel_r

If you want to use auto complete you must include jquery ui js and css

Sorry but I'm not a php user :|

Marina06

Hi,
I had already tried with ui.js and ui.css... I've tried again and nothing happends... in what's regarding "auto_complete".. :/

Ok for php.
I'm good at php but when not in the case datatables case... ! So I guess I'm gonna create a new topic for this particular case.
Thanks again, have a nice day

daniel_r

You can take a look at the following sample with auto complete filter (fourth column)