DataTables

DataTables Examples

HTML

<script src="//cdn.datatables.net/1.9.4/js/jquery.dataTables.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.9.4/css/jquery.dataTables.css">
                     <div class="row">
                        <div class="col-xs-12">
                            <div class="box box-info">
                                <div class="box-header">
                                    <h3 class="box-title">Tabela de Dados</h3>                                    
                                </div><!-- /.box-header -->
                                <div class="box-body table-responsive">
<table  id='tabelainfo'  name='tabelainfo'      class=' table table-bordered table-hover '   width=100% align="center" text-align ="center" >
<thead><tr>
<th rowspan="1" colspan="4" >Resumo</th></tr><tr><th rowspan="1" colspan="1" >Funcionários</th>
<th rowspan="1" colspan="1" >Tamanhos</th><th rowspan="1" colspan="1" >Camisetas B. Look</th>
<th rowspan="1" colspan="1" >Camisetas Tradicionais</th></tr></thead>
<tbody><tr id='corpotabela'><td align="left" data-rowspan="8" colspan="1" ><center><b>Membros: 2387</b><br/><br/> Homens:753  <br/>Mulheres:1634 <br/><br/>Socios:143<br/>Funcionarios: 2244</td><td align="left" data-rowspan="1" colspan="1" ><center>P</center> </td><td align="left" data-rowspan="1" colspan="1" ><center>242</center> </td><td align="left" data-rowspan="1" colspan="1" ><center>61</center> </td></tr><tr id='corpotabela'><td align="left" data-rowspan="1" colspan="1" ><center>M</center> </td><td align="left" data-rowspan="1" colspan="1" ><center>668 </center> </td><td align="left" data-rowspan="1" colspan="1" ><center>308</center> </td></tr><tr id='corpotabela'><td align="left" data-rowspan="1" colspan="1" ><center>G</center> </td><td align="left" data-rowspan="1" colspan="1" ><center>451</center> </td><td align="left" data-rowspan="1" colspan="1" ><center>259</center> </td></tr><tr id='corpotabela'><td align="left" data-rowspan="1" colspan="1"...

JavaScript

$('.table').dataTable({
    "sScrollY": "400px",
    "sScrollX": "100%",
    "bPaginate": $('.table').hasClass('paginacao'), //Dropdown de número de linhas paginadas
    "bFilter": true, //Filtro de busca da tabela
    "bSort": true, //Ordenação das colunas da tabela
    "bInfo": true,
    "bAutoWidth": false
});