How to use jquery plugin selectivity in place select2 in tfoot

janke

I prefer to use jquery plugin selectivity https://arendjr.github.io/selectivity/
you need before to upload selectivity-full.min.js and selectivity-full.min.css and put link on the head

Se selectivity plugin is used on col 4 statut_id

<div id="container" style="margin-left: auto;margin-right: auto;width:98%;">
            <form id='myform' action='null'>
                <table class="table table-striped table-bordered table-hover table-condensed" id="example">                
                <thead>
                        <tr>
                            <th>Code SNI</th>                            
                            <th>Nom du Composant</th>
                            <th>SI</th>                            
                            <th>Statut</th>                            
                        </tr>
                    </thead>
                    <tfoot>
                        <tr>                            
                            <th class="datainput">
                                <input type="text" name="application_code_sni" id="application_code_sni" value="" class="search_init" />
                            </th>
                            <th class="datainput">
                                <input type="text" name="application_nom" id="application_nom" class="search_init" />
                            </th>
                            <th class="dataselect">                              
                                <select name="si_nom" id="application_id_si">
                                    <option value="">Choisir</option>   
                                    <option value="LBP">LBP</option>
                                    <option value="RLP">RLP</option>                                
                                </select> 
                            </th>
                            <th class="selectivity">                                
                                <div id="statut_id" class="selectivity-input example-input"></div>
                            </th>
                            
                        </tr>                                    
                    </tfoot>
                </table>
            </form>
        </div>
    </body>

$('#statut_id').on("change", function(e) {
    var jsonstring = (e.value);    
        $('#statut_id').val(e.value);
    });
  //json array you colud also use a a traditional <select> box or ajax server side
    var statuts = [
            { text: 'Identifié', id: '1'},
            { text: 'En projet', id: '2'},
            { text: 'En production', id: '3'},
            { text: 'Démantelée', id: '4'},
            { text: 'En projet, Gelé', id: '5'},
            { text: 'En production inutilisé', id: '6'},

        ];

   $eventSelectStatut = $('#statut_id').selectivity({
    allowClear: true,
    items:statuts ,
    placeholder: 'Pas de statut selectionné',
    showSearchInputInDropdown: false
});

//function for render col 4
function getStatutLibelle(statut_id){

        $.each(statuts, function() {

               if(this.id == statut_id){

                   libelle =  this.text;
               }
            });
       return libelle;
    }
var oTable = $('#example').DataTable({
        "responsive": true,
        "processing": true,
        "serverSide": true,
        "ajax": "scripts/server_processing.php",
        "language": {
            "url": "media/FR.txt"
        },
        //"bStateSave": false,
        "pagingType": "full_numbers",
        "pageLength": 20
                , "lengthMenu": [[10, 20, 40, 60], [10, 20, 40, 60]]
                , "scrollY": Resizeinnerx('example', 190) + "px"                
                //, "scrollY": "170px"
                , "autoWidth": true
                //,"columns":[5]
                // ,"order": [ [0,'desc']]
                , "columnDefs": [
            {"searchable": true, "width": "10%", "targets": [0]},
            {"searchable": true, "width": "30%", "targets": [1]},                
            {"searchable": true, "width": "10%", "targets": [2]},   
            {"searchable": true, "width": "30%", "targets": [3],
                "render": function(data, type, full) {
                    var libelle= getStatutLibelle(data);
                    return libelle;
                }},
            {"searchable": false, "visible": false, "targets": [4]}

        ]
           //,"search":{"search":"smalluser"}

    });
    //end oTable defs

 $("tfoot th").each(function(i) {
        if ($(this).is('.datainput'))
        {

            $("tfoot input").keyup(function() {
                /* Filter on the column (the index) of this element */
                //oTable.fnFilter(this.value, $("tfoot input").index(this));
                k = $("tfoot th").index(this.parentNode) - 3;//-nombres de cellules
                 console.log('K:'+k);
                 console.log(this.value);
                //oTable.fnFilter(this.value, k);
                oTable
                        .columns(k-1)
                        .search(this.value)
                        .draw();

            });
        }
        if ($(this).is('.dataselect'))
        {

            //this.innerHTML = fnCreateSelect(oTable.fnGetColumnData(i));
            $('select', this).change(function() {
                //oTable.fnFilter($(this).val(), i);
                oTable
                        .columns(i)
                        .search(this.value)
                        .draw();
            });
        }
        if ($(this).is('.selectivity'))
        {

            //this.innerHTML = fnCreateSelect(oTable.fnGetColumnData(i));
            $('.selectivity-input', this).change(function() {
                //oTable.fnFilter($(this).val(), i);
                oTable
                        .columns(i)
                        .search(this.value)
                        .draw();
            });
        }
    });

I hope this should be useful for others you could also use selectivity for get values from ajax server side refer to the doc of plugin