My individual column searches are not working.

davij9

I need to put searches by columns, but my code doesn't want to work. can you help me?

configs_datatable.js

$(document).ready(function () {

    $(".reflash-button").click(function () {
        $('#alarmes').DataTable().clear().draw(); // clear the table after the click event
        sleep(2000);
        $('#alarmes').DataTable().ajax.reload($('#ip').val());
        $('#alarmes').DataTable().order([[0, 'desc']]).draw();
    });

    $('a[data-toggle="tab"]').on('shown.bs.tab', function () {
        $.fn.dataTable.tables({ visible: true, api: true }).columns.adjust();
    });

    $('#alarmes thead th')
        .clone(true)
        .addClass('filters')
        .appendTo('#alarmes thead');

    // DataTable
    var table = $('#alarmes').DataTable({
        processing: true, // Aceitar o processamento de dados do ajax para poder atualizar a pagina
        serverSide: false, // Ativar para request's feitas somente no server
        ajax: { // comunicação para o ajax
            url: "socket_connect.php",
            type: "POST", // Metodo de envio
            dataSrc: '',
            data: function (data) { return $.extend({}, data, { "ip": $('#ip').val() }); } // Parametros para envie e recebimento
        },
        deferRender: true, // renderizar após o ajax
        bProcessing: true, // Mensagem do processing sumir depois do carregamento do ajax
        language: { // para configurar os textos padrões do Datatable
            processing: "<img src='loading.gif' style='height: 40px;'>.",
            lengthMenu: "Mostrar _MENU_ Meus registros.",
            zeroRecords: "Nenhum registro correspondente encontrado.",
            loadingRecords: "",
            info: "Mostrando página _PAGE_ de _PAGES_ paginas. Total de registros: _TOTAL_.",
            infoEmpty: "Nenhum registro disponível.",
            search: "Procurar:",
            infoFiltered: "(filtrado do total de _TOTAL_ registros.)",
            paginate: {
                first: "Primeiro",
                last: "Ultimo",
                next: "Proximo",
                previous: "Antes"
            },
            emptyTable: "Sem dados disponíveis na tabela.",
        },
        columns: [{ // Para identificar todas as colunas e configura-las
            title: 'ID Alarme',
            data: 'id'
        },
        {
            title: 'Alarme Desc.',
            data: 'alarme'
        },
        {
            title: 'Codigo Alarme',
            data: 'codigo'
        },
        {
            title: 'Local',
            data: 'local'
        },
        {
            title: 'Data Inicial',
            data: 'data_Inicial'
        },
        {
            title: 'Hora Inicial',
            data: 'hora_inicial'
        },
        {
            title: 'Data terminio',
            data: 'data_terminio'
        },
        {
            title: 'Hora terminio',
            data: 'hora_terminio'
        }
        ],
        columnDefs: [{ // Configuração das colunas, como o tamanho delas
            targets: 0,
            width: '7%',
            className: 'colunas'
        }, {
            targets: 1,
            width: '25%',
            className: 'colunas'
        }, {
            targets: 2,
            width: '5%',
            className: 'colunas'
        }, {
            targets: ['_all'],
            className: 'mdc-data-table__cell',
        }
        ],
        "lengthMenu": [ // Quantidade de dados a aparecer, junto ao nome do mesmo
            [10, 25, 50, -1],
            [10, 25, 50, "All"]
        ],
        //response: true, // Tornar a pagina responsiva
        orderCellsTop: true, // ordernar as celulas
        scrollY: "50%", // Ajustando tamanho do Eixo Y do datatable
        scrollX: "100%", // Ajustado tamanho do Eixo X do datatable
        //scrollCollapse: true, // Aceitando que a pagina não seja redmencionada quando os dados serem recebidos e sim criar um ScrollBar
        searching: true, // Aceitando que os dados sejam procurados
        paging: true, // Aceitando paginação nos dados
        search: { // aceitando que os dados sejam procurados
            return: true
        },
        colReorder: true,
        fixedHeader: true,
        autoWidth: false, // Recusando que a pagina seja ajustada automaticamente
        initComplete: function () { // Fazendo que a Procura/Search, funcione e iniciando assim que o datatable carregar
            this.api().columns().every(function () {
                var column = this;
                var select = $('<select><option value=""></option></select>')
                    .appendTo($(column.footer()).empty())
                    .on('change', function () {
                        var val = $.fn.dataTable.util.escapeRegex(
                            $(this).val()
                        );
                        column
                            .search(val ? '^' + val + '$' : '', true, false)
                            .draw();
                    });
                column.data().unique().sort().each(function (d, j) {
                    select.append('<option value="' + d + '">' + d + '</option>')
                });
            });
        }
    });
});

And

<!-- Bootstrap core CSS Menu-->
<link href="../css/bootstrap.min.css" rel="stylesheet">
<link href="../css/tabela.css" rel="stylesheet">
<script src="../js/jquery-1.js" type="text/javascript"></script>
<script src="../js/Money.js" type="text/javascript"></script>
<script src="../js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<!-- DataTables JavaScript  -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-components-web/4.0.0/material-components-web.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/dataTables.material.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.11.5/js/dataTables.bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/fixedheader/3.2.2/js/dataTables.fixedHeader.min.js"></script>
<script src="https://cdn.datatables.net/colreorder/1.5.5/js/dataTables.colReorder.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/colreorder/1.5.5/css/colReorder.dataTables.min.css">
<script type="text/javascript" src="https://cdn.datatables.net/plug-ins/1.11.5/sorting/date-eu.js"></script>
<script src="configs_datatable.js"></script>

beyond

    <div class="row container" style='margin-top: 10px; overflow: auto; width: 100%;'>
        <div class="table-responsive tabela " style='margin-top: 10px; overflow: auto; width: 100%;'>
            <div class="col-xs-3" style="margin-left: 0px; padding-left: 0px;">
                <select type="select" name="ip" id="ip" data-live-search="true" class="form-control" style="margin-bottom: 10px;">
                </select>
            </div>
            <div class="col-xs-4">
                <button class="btn btn-md btn-primary left-block reflash-button" type="button" style="margin-bottom: 10px;">Atualizar</button>
            </div>
            <table id="alarmes" class="mdl-data-table tabela nowrap" id="tabela" style="padding: 0px; margin-top: 10px; width:100%">
            </table>
        </div>
    </div>

kthorngren

What exactly doesn't work?

Thats a lot of code to look through. Can you provide a link to your page or a test case replicating the issue so we can help debug?
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin