KOKINIO - MANAGER

Edit File: metricaUnidad.blade.php

thead, tbody, tr, td, th { display: block; }

tr:after {
    content: ' ';
    display: block;
    visibility: hidden;
    clear: both;
}

thead th {
    height: 100%;

/*text-align: left;*/
}

tbody {
    height: 600px;
    overflow-y: auto;
}

thead {
    /* fallback */
}

tbody td, thead th {
    width: 5%;
    float: left;
}
</style>
<div class="block-title">
        <h2><strong>Peso Unidad ({{ (isset($year))? $year : date('Y') }})</strong> </h2>
        <div class="block-options pull-right">
                <button onclick="Metrica.tableFilter(this)" id="filter" class="btn btn-default btn-xs btn-filter"><span class="glyphicon glyphicon-filter"></span> Filter</button>
        </div>
    </div>
    <div class="row">
        <div class="filterable">
            <table class="table table-borderless table-striped table-vcenter table-responsive">
                <thead>
                    <tr class="filters">
                        <th class="text-left" style="width: 280px"><input type="text" class="form-control text-center" placeholder="Cliente" disabled></th>
                        <th class="text-right" style="font-size:12px">1</th>
                        <th class="text-right" style="font-size:12px">2</th>
                        <th class="text-right" style="font-size:12px">3</th>
                        <th class="text-right" style="font-size:12px">4</th>
                        <th class="text-right" style="font-size:12px">5</th>
                        <th class="text-right" style="font-size:12px">6</th>
                        <th class="text-right" style="font-size:12px">7</th>
                        <th class="text-right" style="font-size:12px">8</th>
                        <th class="text-right" style="font-size:12px">9</th>
                        <th class="text-right" style="font-size:12px">10</th>
                        <th class="text-right" style="font-size:12px">11</th>
                        <th class="text-right" style="font-size:12px">12</th>
                    </tr>
                </thead>
                <tbody>
            @if(isset($unidades))
            @foreach($unidades as $value)
                    <tr>
                        <td class="text-left" style="width: 280px;padding:0px">{{ $value->cliente }}</td>
                        <td class="text-right" style="padding:0px">{{ round($value->mes_1,3) }}</td>
                        <td class="text-right" style="padding:0px">{{ round($value->mes_2,3) }}</td>
                        <td class="text-right" style="padding:0px">{{ round($value->mes_3,3) }}</td>
                        <td class="text-right" style="padding:0px">{{ round($value->mes_4,3) }}</td>
                        <td class="text-right" style="padding:0px">{{ round($value->mes_5,3) }}</td>
                        <td class="text-right" style="padding:0px">{{ round($value->mes_6,3) }}</td>
                        <td class="text-right" style="padding:0px">{{ round($value->mes_7,3) }}</td>
                        <td class="text-right" style="padding:0px">{{ round($value->mes_8,3) }}</td>
                        <td class="text-right" style="padding:0px">{{ round($value->mes_9,3) }}</td>
                        <td class="text-right" style="padding:0px">{{ round($value->mes_10,3) }}</td>
                        <td class="text-right" style="padding:0px">{{ round($value->mes_11,3) }}</td>
                        <td class="text-right" style="padding:0px">{{ round($value->mes_12,3) }}</td>
                    </tr>
            @endforeach
            @else
                <tr><td colspan="14">No hay información disponible</td></tr>
            @endif
                </tbody>
            </div>
    </div>
    <script type="text/javascript">
        $('.filterable .filters input').keyup(function(e){
            /* Ignore tab key */
                var code = e.keyCode || e.which;
                if (code == '9') return;
                /* Useful DOM data and selectors */
                var $input = $(this),
                inputContent = $input.val().toLowerCase(),
                $panel = $input.parents('.filterable'),
                column = $panel.find('.filters th').index($input.parents('th')),
                $table = $panel.find('.table'),
                $rows = $table.find('tbody tr');
                /* Dirtiest filter function ever ;) */
                var $filteredRows = $rows.filter(function(){
                    var value = $(this).find('td').eq(column).text().toLowerCase();
                    return value.indexOf(inputContent) === -1;
                });
                /* Clean previous no-result if exist */
                $table.find('tbody .no-result').remove();
                /* Show all rows, hide filtered ones (never do that outside of a demo ! xD) */
                $rows.show();
                $filteredRows.hide();
                /* Prepend no-result row if all rows are filtered */
                if ($filteredRows.length === $rows.length) {
                    $table.find('tbody').prepend($('<tr class="no-result text-center"><td colspan="'+ $table.find('.filters th').length +'">No result found</td></tr>'));
                }
            });
    </script>