Data table Java Script - Individual column Searching (select inputs)

Question

I would like to insert select inputs into my data table but I am not able to modify my data table the way it currently is. How do I put select input in my data table?

Code:

function BuscaEmpresa() {
    var selEmpresa = $('#selEmpresa').val();
    var selGrupo = $('#selGrupo').val();
    var cnpj = $('#cnpj').val();
    var dataInicial = $('#dataInicial').val();
    var dataFinal = $('#dataFinal').val();

    $.ajax({

        url: "/User/BuscaEmpresa",
        data: {
            SelEmpresa: selEmpresa,
            SelGrupo: selGrupo,
            Cnpj: cnpj,
            DataInicial: dataInicial,
            DataFinal: dataFinal
        },
        dataType: "json",
        type: "GET",
        async: true,
        success: function (dados) {
            if (dados.ok) {

                dados.valor.forEach(function (element, index, array) {
                    console.log(element);
                    element.acoes = "<a href='#' id='detalhes' onclick='Detalhes(" + element.idDemanda + ")'>Detalhes</a>";

                });

                $('#table_ocorrencias').DataTable({
                    "data": dados.valor,
                    "retrieve": "true",
                    "language": {
                        "lengthMenu": "Mostrar _MENU_ ocorrencias por página",
                        "zeroRecords": "Nenhuma ocorrência encontrada",
                        "info": "Exibindo página _PAGE_ de _PAGES_",
                        "infoEmpty": "Nenhuma ocorrência disponível",
                        "infoFiltered": "(filtrado de _MAX_ total de ocorrências)",
                        "sSearch": "Pesquisar",
                        "oPaginate": {
                            "sNext": "Próximo",
                            "sPrevious": "Anterior",
                            "sFirst": "Primeiro",
                            "sLast": "Último"
                        }
                    },

                    "columns": [
                        { data: 'iD' },
                        { data: 'dataCriacao' },
                        { data: 'grupoEmpresarial' },
                        { data: 'empresa' },
                        { data: 'assunto' },
                        { data: 'prazo' },
                        { data: 'esteira' },
                        { data: 'analista' },
                        { data: 'dataConclusao' },
                        { data: 'prazoAtendimento' },
                        { data: 'acoes' }
                    ]

                });

            }

            else {
                $("#status").html(dados.mensagem);
                $("#status").show();
            }
        },
        error: function (dados) {
            $("#status").html(dados.mensagem);
            $("#status").show();
        }
    });

}

HTML

<table class="display" id="table_ocorrencias" cellspacing="0">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Data de Criação</th>
                    <th> Grupo Empresarial</th>
                    <th>Empresa</th>
                    <th>Assunto</th>
                    <th>Prazo</th>
                    <th>Esteira</th>
                    <th>Analista</th>
                    <th>Data de Conclusão</th>
                    <th>Prazo de Atendimento</th>
                    <th>Ações</th>
                </tr>
            </thead>
            <tbody>
                @foreach (var item in Model.Demandas)
                {
                    <tr>
                        <td>@item.IdDemanda
                        <td>
                        <td>@item.DataCriacao</td>
                        <td>@item.IdClienteNavigation.GrupoEmpresarial</td>
                        <td>Empresa</td>
                        <td>Assunto</td>
                        <td>Prazo</td>
                        <td>Esteira</td>
                        <td>Analista</td>
                        <td>Data de Conclusão</td>
                        <td>Prazo de Atendimento</td>
                        <td>Ações</td>
                    </tr>
                }
            </tbody>
        </table>

Answer 1

I solved the problem as below:

function BuscaEmpresa() {
    var selEmpresa = $('#selEmpresa').val();
    var selGrupo = $('#selGrupo').val();
    var cnpj = $('#cnpj').val();
    var dataInicial = $('#dataInicial').val();
    var dataFinal = $('#dataFinal').val();

    $.ajax({
        url: "/User/BuscaEmpresa",
        data: {
            SelEmpresa: selEmpresa,
            SelGrupo: selGrupo,
            Cnpj: cnpj,
            DataInicial: dataInicial,
            DataFinal: dataFinal
        },
        dataType: "json",
        type: "GET",
        async: true,
        success: function (dados) {
            if (dados.ok) {

                dados.valor.forEach(function (element, index, array) {
                    element.acoes = "<a href='#' id='detalhes' onclick='Detalhes(" + element.idDemanda + ")'>Detalhes</a>";

                });
                $('#table_ocorrencias').DataTable({
                    initComplete: function () {
                        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>')
                            });
                        });
                    },
                    "data": dados.valor,
                    "retrieve": "true",
                    "language": {
                        "lengthMenu": "Mostrar _MENU_ ocorrencias por página",
                        "zeroRecords": "Nenhuma ocorrência encontrada",
                        "info": "Exibindo página _PAGE_ de _PAGES_",
                        "infoEmpty": "Nenhuma ocorrência disponível",
                        "infoFiltered": "(filtrado de _MAX_ total de ocorrências)",
                        "sSearch": "Pesquisar",
                        "oPaginate": {
                            "sNext": "Próximo",
                            "sPrevious": "Anterior",
                            "sFirst": "Primeiro",
                            "sLast": "Último"
                        }
                    },
                        "columns": [
                        { data: 'iD' },
                        { data: 'dataCriacao' },
                        { data: 'grupoEmpresarial' },
                        { data: 'empresa' },
                        { data: 'assunto' },
                        { data: 'prazo' },
                        { data: 'esteira' },
                        { data: 'analista' },
                        { data: 'dataConclusao' },
                        { data: 'prazoAtendimento' },
                        { data: 'acoes' }
                    ]


                });



            }

            else {
                $("#status").html(dados.mensagem);
                $("#status").show();
            }
        },
        error: function (dados) {
            $("#status").html(dados.mensagem);
            $("#status").show();
        }
    });

}