Datatable column filter asp net mvc5

Navigation
2

I have a problem using the datatables column filter plugin, it does not report me an error, but it does not generate the filters either, it follows my code: 

<script language="JavaScript">
        $(document).ready(function () {
            $('#myTable tfoot th').each(function () {
                var title = $('#myTable thead th').eq($(this).index()).text();
                $(this).html('<input type="text" placeholder="Search ' + title + '" />');
            });

            var table = $('#myTable').DataTable();

            table.columns().every(function () {
                var that = this;

                $('input', this.footer()).on('keyup change', function () {
                    that
                        .search(this.value)
                        .draw();
                });
            });
        });
    </script>
    <script>
        $(document).ready(function () {
            $('#myTable').DataTable({
                "dom": 'C<"clear">lfrtip',
                "language": {
                    "sEmptyTable": "Nenhum registro encontrado",
                    "sInfo": "Mostrando de _START_ até _END_ de _TOTAL_ registros",
                    "sInfoEmpty": "Mostrando 0 até 0 de 0 registros",
                    "sInfoFiltered": "(Filtrados de _MAX_ registros)",
                    "sInfoPostFix": "",
                    "sInfoThousands": ".",
                    "sLengthMenu": "_MENU_ resultados por página",
                    "sLoadingRecords": "Carregando...",
                    "sProcessing": "Processando...",
                    "sZeroRecords": "Nenhum registro encontrado",
                    "sSearch": "Pesquisar",
                    "oPaginate": {
                        "sNext": "Próximo",
                        "sPrevious": "Anterior",
                        "sFirst": "Primeiro",
                        "sLast": "Último"
                    },
                    "oAria": {
                        "sSortAscending": ": Ordenar colunas de forma ascendente",
                        "sSortDescending": ": Ordenar colunas de forma descendente"
                    }
                }, scrollY: 2, scrollX: 300, searching: true, retrieve: true, ordering: false, rowReorder: true
            });
        });
    </script>

My table: 

 @using (@Html.BeginForm("Salvar", "AcompanhamentoEntrega", FormMethod.Post))
            {
                <div id="tabelaFenix">
                    <table id="myTable" class="stripe table compact hover" cellspacing="0">
                        <thead style="position:static">
                            <tr>
                                <th align="left" style="font-size:10px">DATA EXPEDIÇÃO</th>
                                <th align="left" style="font-size:10px">STATUS ENTREGA</th>
                                <th align="left" style="font-size:10px">DATA ENTREGA</th>
                                <th align="left" style="font-size:10px">CONFIRMACAO</th>
                            </tr>
                        </thead>
                        @for (int i = 0; i < Model.listaEntrega.Count(); i++)
                        {
                            <tr>
                                <td height="2px"> @Html.TextBoxFor(m => m.listaEntrega[i].data_expedicao, new { @readonly = "readonly", @size = "4px", @class = "form-controldata_expedicao" })</td>
                                <td height="2px"> @Html.TextBoxFor(m => m.listaEntrega[i].status_entrega, new { @readonly = "readonly", @size = "4px", @class = "form-controldata_expedicao" })</td>
                                <td height="2px"> @Html.TextBoxFor(m => m.listaEntrega[i].data_entrega, new { @readonly = "readonly", @size = "10px", @class = "form-controldata_expedicao" }) </td>
                                <td height="2px"> @Html.TextBoxFor(m => m.listaEntrega[i].confirmacao, new { @readonly = "readonly", @size = "18px", @class = "form-controldata_expedicao" }) </td>
                            </tr>
                        }
                    </table>
                </div>
            }

My imports: 

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css">

<script type="text/javascript" src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>@Styles.Render("~/Content/bootstrap.css")
@Scripts.Render("~/bundles/modernizr")

Link do datatables: https://datatables.net/examples/api/multi_filter.html
    
asked by anonymous 20.08.2015 / 16:13

1 answer

2

By default, dataTables has a global filter, where it filters data from all table elements. By your question you are wanting a filter in each column. To do this, simply modify it to add input to each header , to perform the search, It would look like your code: 

    // Setup - Adicioona o input no header da tabela
$('#myTable thead tr#filterrow th').each( function () {
    var title = $('#myTable thead th').eq( $(this).index() ).text();
    $(this).html( '<input type="text" onclick="stopPropagation(event);" placeholder="Busca em '+title+'" />' );
} );

// DataTable
var table = $('#myTable').DataTable();

// Aplica o filtro nas colunas
$("#myTable thead input").on( 'keyup change', function () {
    table
        .column( $(this).parent().index()+':visible' )
        .search( this.value )
        .draw();
} );

  function stopPropagation(evt) {
    if (evt.stopPropagation !== undefined) {
        evt.stopPropagation();
    } else {
        evt.cancelBubble = true;
    }
}

You can see a working example in JsFiddle.

Retired response based on dataTables forum.

    
20.08.2015 / 16:58
Select JPA and Hibernate How to use mysql_result with MySQLi?