Filter by colum in datatable

xiul

I'm a novice with datatables and I was trying to create a filter for every column in datatable. I found an example on this webpage however it's not working. I hope anyone could help me. Post my Jquery code and HTML table.

                detalle = $("#detalle-table").DataTable({
                    "ajax": {
                        url: "ajax/cargar_reportedetalle",
                        type: "POST",
                        data: {
                            "idsocio": idsocio
                        },
                        dataSrc: ""
                    },
                    columns: [
                        { data: "contador" },
                        { data: "noeconomico" },
                        { data: "marca" },
                        { data: "modelo" },
                        { data: "placas" },
                        { data: "tipounidad" },
                        { data: "socio" },
                        { data: "km" },
                        { data: "estatus" },
                        { data: "serie"}
                    ],
                    columnDefs: [
                        { className: "cssbold text-center", targets: [0] },
                        { className: "text-center", targets: "_all" }
                    ],
                    dom: 'Bfrtip',
                    buttons: [
                        'colvis',
                        'excel',
                        'print'
                    ],
                    autoWidth: false,
                    searching: false,
                    info: false
                });

                var contador = 0;
                $('#detalle-table tfoot th').each( function () {
                    var title = $(this).text();
                    if(contador > 0){
                        $(this).html('<input type="text" class="form-control form-control-sm" style="width: 100%;" placeholder="Buscar '+title+'" />');
                    }
                    contador++;
                } );

                detalle.columns().every( function () {
                    var that = this;
                    $( 'input', this.footer() ).on( 'keyup change', function () {
                        if ( that.search() !== this.value ) {
                            that
                            .search( this.value )
                            .draw();
                        }
                    } );
                } );

                        <table id="detalle-table" class="table table-striped table-sm table-hover" style="width: 100%; font-size: 13px;">
                            <thead class="thead-dark">
                                <tr>
                                    <th class="text-center">No.</th>
                                    <th class="text-center">Económico</th>
                                    <th class="text-center">Marca</th>
                                    <th class="text-center">Modelo</th>
                                    <th class="text-center">Placas</th>
                                    <th class="text-center">Tipo</th>
                                    <th class="text-center">Socio</th>
                                    <th class="text-center">Km</th>
                                    <th class="text-center">Estatus</th>
                                    <th class="text-center">Serie</th>
                                </tr>
                            </thead>
                            <tfoot>
                                <tr>
                                    <th class="text-center">No.</th>
                                    <th class="text-center">Económico</th>
                                    <th class="text-center">Marca</th>
                                    <th class="text-center">Modelo</th>
                                    <th class="text-center">Placas</th>
                                    <th class="text-center">Tipo</th>
                                    <th class="text-center">Socio</th>
                                    <th class="text-center">Km</th>
                                    <th class="text-center">Estatus</th>
                                    <th class="text-center">Serie</th>
                                </tr>
                            </tfoot>
                        </table>

kthorngren

This thread will tell you what you need to do:
https://datatables.net/forums/discussion/comment/139360/#Comment_139360

Kevin