Mostrando entradas con la etiqueta jquery. Mostrar todas las entradas
Mostrando entradas con la etiqueta jquery. Mostrar todas las entradas

viernes, 16 de enero de 2015

Datatable jquery con busqueda en el footer y sin el buscar superior


Suele suceder que si se le da "bFilter": false , es cierto que se quita pero resulta que queremos que siga funcionando la busqueda en el footer de la tabla.

Este es un ejemplo:





 <table id="tblDatos" class="display" cellspacing="0">
        <thead>
            <tr>
                <th width="20%">Código</th>
                <th width="50%">Agrupación</th>
                <th width="15%" class="no-sort"></th>

            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>Código</th>
                <th>Agrupación</th>
                <th></th>
            </tr>
        </tfoot>
        <tbody>
            <tr id="1">
                <td>1</td>
                <td>Pares de </td>
                <td>
                    <button type="button" class="btn btn-default">
                        <span class="glyphicon glyphicon-edit" aria-hidden="true"></span>
                    </button>

                    <button type="button" class="btn btn-danger">
                        <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
                    </button>
                </td>


            </tr>
            <tr id="2">
                <td>2</td>
                <td>Central grupal</td>
                <td>
                    <button type="button" class="btn btn-default">
                        <span class="glyphicon glyphicon-edit" aria-hidden="true"></span>
                    </button>

                    <button type="button" class="btn btn-danger">
                        <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
                    </button>
                </td>
            </tr>
            <tr id="3">
                <td>3</td>
                <td>Zonas magistrales</td>
                <td>
                    <button type="button" class="btn btn-default">
                        <span class="glyphicon glyphicon-edit" aria-hidden="true"></span>
                    </button>

                    <button type="button" class="btn btn-danger">
                        <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
                    </button>
                </td>
            </tr>
            @*<tr id="4">
                <td>5</td>
                <td>Nivel 5</td>
                <td>
                    <button type="button" class="btn btn-default">
                        <span class="glyphicon glyphicon-edit" aria-hidden="true"></span>
                    </button>

                    <button type="button" class="btn btn-danger">
                        <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
                    </button>
                </td>
            </tr>*@
            <tr id="6">
                <td>6</td>
                <td>Nivel 6</td>
                <td>
                    <button type="button" class="btn btn-default">
                        <span class="glyphicon glyphicon-edit" aria-hidden="true"></span>
                    </button>

                    <button type="button" class="btn btn-danger">
                        <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
                    </button>
                </td>
            </tr>
        </tbody>
    </table>

.javaScript

<script>
        $('#tblDatos tfoot th').each(function () {
            var title = $('#tblDatos thead th').eq($(this).index()).text();
            if(title!=''){
                $(this).html('<input type="text" placeholder=" ' + title + '" />');
            }
        });
        var table = $('#tblDatos').DataTable({
         
            "bLengthChange": false,
         
            language: {

                search: "Buscar:",
                lengthMenu: "Mostrando _MENU_ datos",
                info: " _START_ de _END_ de _TOTAL_ datos",
                paginate: {
                    first: "primero",
                    previous: "anterior",
                    next: "siguiente",
                    last: "anterior"
                }
            },
            "aoColumnDefs": [{
                "bSortable": false,
                "aTargets": ["no-sort"]
            }]
        });
       
        // Apply the search
        table.columns().eq(0).each(function (colIdx) {
            $('input', table.column(colIdx).footer()).on('keyup change', function () {
                table
                    .column(colIdx)
                    .search(this.value)
                    .draw();
            });
        });

        $('#tblDatos tbody').on('click', 'tr', function () {
            if ($(this).hasClass('selected')) {
                $(this).removeClass('selected');
            }
            else {
                table.$('tr.selected').removeClass('selected');
                $(this).addClass('selected');
            }
        });
</script>


.jquery.dataTables.css


.dataTables_filter {
display: none; 
}