Tables with database data

Navigation
0

Does anyone know how to restrict a certain number of rows in the table, but when doing scroll see the rest of the data?

For example, a company that stores customer data in the database and wants to see all customer data in a table, but only 10 customers per page. But instead of having a button to switch from the first 10 clients to the next 10, use scroll to do so.

Type this, without those numbers, but with a scroll :

Can someone tell me what it's called or a website that shows or even shows the code?

    
asked by anonymous 11.06.2015 / 18:27

1 answer

1

This problem of scroll in the table and keep the header is very famous.

First solution jQuery Scrollable .

Important, this plugin loads the entire table at once.

Example: 

jQuery(document).ready(function($)
{ 
    $('#thetable').tableScroll({width:500});
});
<link href="http://www.farinspace.com/css/jquery.tablescroll.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script><scriptsrc="http://www.farinspace.com/js/jquery.tablescroll.js"></script>

<table id="thetable" cellspacing="0">
<thead>
    <tr>
      <td>city</td>
      <td>state code</td>
      <td>zip</td>
      <td>latitude</td>
      <td>longitude</td>
      <td>county</td>
    </tr>
</thead>
<tbody>
    <tr class="first">
      <td>Holtsville</td>
      <td>NY</td>
      <td>00501</td>
      <td>40.8152</td>
      <td>-73.0455</td>
      <td>Suffolk</td>
    </tr>
    <tr>
      <td>Holtsville</td>
      <td>NY</td>
      <td>00544</td>
      <td>40.8152</td>
      <td>-73.0455</td>
      <td>Suffolk</td>
    </tr>
    <tr>
      <td>Adjuntas</td>
      <td>PR</td>
      <td>00601</td>
      <td>18.1788</td>
      <td>-66.7516</td>
      <td>Adjuntas</td>
    </tr>
    <tr>
      <td>Holtsville</td>
      <td>NY</td>
      <td>00544</td>
      <td>40.8152</td>
      <td>-73.0455</td>
      <td>Suffolk</td>
    </tr>
    <tr>
      <td>Adjuntas</td>
      <td>PR</td>
      <td>00601</td>
      <td>18.1788</td>
      <td>-66.7516</td>
      <td>Adjuntas</td>
    </tr>
    <tr>
      <td>Holtsville</td>
      <td>NY</td>
      <td>00544</td>
      <td>40.8152</td>
      <td>-73.0455</td>
      <td>Suffolk</td>
    </tr>
    <tr>
      <td>Adjuntas</td>
      <td>PR</td>
      <td>00601</td>
      <td>18.1788</td>
      <td>-66.7516</td>
      <td>Adjuntas</td>
    </tr>
    <tr>
      <td>Holtsville</td>
      <td>NY</td>
      <td>00544</td>
      <td>40.8152</td>
      <td>-73.0455</td>
      <td>Suffolk</td>
    </tr>
    <tr>
      <td>Adjuntas</td>
      <td>PR</td>
      <td>00601</td>
      <td>18.1788</td>
      <td>-66.7516</td>
      <td>Adjuntas</td>
    </tr>
    <tr>
      <td>Holtsville</td>
      <td>NY</td>
      <td>00544</td>
      <td>40.8152</td>
      <td>-73.0455</td>
      <td>Suffolk</td>
    </tr>
    <tr>
      <td>Adjuntas</td>
      <td>PR</td>
      <td>00601</td>
      <td>18.1788</td>
      <td>-66.7516</td>
      <td>Adjuntas</td>
    </tr>
</tbody>
</table>

-

Second solution jQuery DataTables

It is possible to load your current need on demand.

Marcus Vinicius 

$(document).ready(function() {
  $('#example').dataTable( {
    "bScrollInfinite": true, /* você precisa dessa propriedade */
    "bScrollCollapse": true,
    "sScrollY": "200px"
  } );
});
<link href="http://legacy.datatables.net/release-datatables/media/css/demo_table.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script><scriptsrc="http://legacy.datatables.net/release-datatables/media/js/jquery.dataTables.js"></script>

<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
	<thead>
		<tr>
			<th>Nº.Feder.</th>
			<th>Clube</th>
			<th>Tipo HCP</th>
			<th>Data Actual</th>
			<th>TipoJogador</th>
		</tr>
	</thead>
	<tfoot>
		<tr>
			<th>Nº.Feder.</th>
			<th>Clube</th>
			<th>Tipo HCP</th>
			<th>Data Actual</th>
			<th>TipoJogador</th>
		</tr>
	</tfoot>
	<tbody>
		<tr class="odd gradeX">
			<td>22739</td>
			<td>083-Oitavos</td>
			<td>HCP EGA</td>
			<td class="center">2015-06-10</td>
			<td class="center">Amador</td>
		</tr>
		<tr class="odd gradeX">
			<td>42944</td>
			<td>165-ACGB</td>
			<td>Suspenso</td>
			<td class="center">2015-06-11</td>
			<td class="center">Amador</td>
		</tr>
		<tr class="odd gradeX">
			<td>23060</td>
			<td>083-Oitavos</td>
			<td>Suspenso</td>
			<td class="center">2015-06-08</td>
			<td class="center">Sra.AmadorA</td>
		</tr>
		<tr class="odd gradeX">
			<td>227391</td>
			<td>083-Oitavos</td>
			<td>HCP EGA</td>
			<td class="center">2015-06-10</td>
			<td class="center">Amador</td>
		</tr>
		<tr class="odd gradeX">
			<td>429441</td>
			<td>165-ACGB</td>
			<td>Suspenso</td>
			<td class="center">2015-06-11</td>
			<td class="center">Amador</td>
		</tr>
		<tr class="odd gradeX">
			<td>230601</td>
			<td>083-Oitavos</td>
			<td>Suspenso</td>
			<td class="center">2015-06-08</td>
			<td class="center">Sra.AmadorA</td>
		</tr>
		<tr class="odd gradeX">
			<td>227392</td>
			<td>083-Oitavos</td>
			<td>HCP EGA</td>
			<td class="center">2015-06-10</td>
			<td class="center">Amador</td>
		</tr>
		<tr class="odd gradeX">
			<td>429442</td>
			<td>165-ACGB</td>
			<td>Suspenso</td>
			<td class="center">2015-06-11</td>
			<td class="center">Amador</td>
		</tr>
		<tr class="odd gradeX">
			<td>230602</td>
			<td>083-Oitavos</td>
			<td>Suspenso</td>
			<td class="center">2015-06-08</td>
			<td class="center">Sra.AmadorA</td>
		</tr>
		<tr class="odd gradeX">
			<td>227393</td>
			<td>083-Oitavos</td>
			<td>HCP EGA</td>
			<td class="center">2015-06-10</td>
			<td class="center">Amador</td>
		</tr>
		<tr class="odd gradeX">
			<td>429443</td>
			<td>165-ACGB</td>
			<td>Suspenso</td>
			<td class="center">2015-06-11</td>
			<td class="center">Amador</td>
		</tr>
		<tr class="odd gradeX">
			<td>230603</td>
			<td>083-Oitavos</td>
			<td>Suspenso</td>
			<td class="center">2015-06-08</td>
			<td class="center">Sra.AmadorA</td>
		</tr>
		<tr class="odd gradeX">
			<td>227394</td>
			<td>083-Oitavos</td>
			<td>HCP EGA</td>
			<td class="center">2015-06-10</td>
			<td class="center">Amador</td>
		</tr>
		<tr class="odd gradeX">
			<td>429444</td>
			<td>165-ACGB</td>
			<td>Suspenso</td>
			<td class="center">2015-06-11</td>
			<td class="center">Amador</td>
		</tr>
		<tr class="odd gradeX">
			<td>230604</td>
			<td>083-Oitavos</td>
			<td>Suspenso</td>
			<td class="center">2015-06-08</td>
			<td class="center">Sra.AmadorA</td>
		</tr>
		<tr class="odd gradeX">
			<td>227395</td>
			<td>083-Oitavos</td>
			<td>HCP EGA</td>
			<td class="center">2015-06-10</td>
			<td class="center">Amador</td>
		</tr>
		<tr class="odd gradeX">
			<td>429445</td>
			<td>165-ACGB</td>
			<td>Suspenso</td>
			<td class="center">2015-06-11</td>
			<td class="center">Amador</td>
		</tr>
		<tr class="odd gradeX">
			<td>230605</td>
			<td>083-Oitavos</td>
			<td>Suspenso</td>
			<td class="center">2015-06-08</td>
			<td class="center">Sra.AmadorA</td>
		</tr>
		<tr class="odd gradeX">
			<td>227396</td>
			<td>083-Oitavos</td>
			<td>HCP EGA</td>
			<td class="center">2015-06-10</td>
			<td class="center">Amador</td>
		</tr>
		<tr class="odd gradeX">
			<td>429446</td>
			<td>165-ACGB</td>
			<td>Suspenso</td>
			<td class="center">2015-06-11</td>
			<td class="center">Amador</td>
		</tr>
		<tr class="odd gradeX">
			<td>230606</td>
			<td>083-Oitavos</td>
			<td>Suspenso</td>
			<td class="center">2015-06-08</td>
			<td class="center">Sra.AmadorA</td>
		</tr>
		<tr class="odd gradeX">
			<td>227397</td>
			<td>083-Oitavos</td>
			<td>HCP EGA</td>
			<td class="center">2015-06-10</td>
			<td class="center">Amador</td>
		</tr>
		<tr class="odd gradeX">
			<td>429447</td>
			<td>165-ACGB</td>
			<td>Suspenso</td>
			<td class="center">2015-06-11</td>
			<td class="center">Amador</td>
		</tr>
		<tr class="odd gradeX">
			<td>230607</td>
			<td>083-Oitavos</td>
			<td>Suspenso</td>
			<td class="center">2015-06-08</td>
			<td class="center">Sra.AmadorA</td>
		</tr>
	</tbody>
</table>

If you want to know the other parameters of this plugin, just take a look at here .

    
11.06.2015 / 18:44
Menu does not stick under the header Error when cleaning a DataGrid