Tables with database data

Asked

Viewed 151 times

0

Someone knows 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 BD and wants to see all customer data in a table, but only 10 customers per page. Only instead of having a button to switch from the first 10 customers to the next 10, use scroll for that reason.

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

inserir a descrição da imagem aqui

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

html database rolling table

  • You need to keep the header when scrolling?

  • @Maiconcarraro Yes, I need.

1 answer

1


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

First solution jQuery Scrollable.

Important, this plugin loads all 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>
<script src="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

With it it is possible to charge for equal demand your current need.

Suggestion from 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>
<script src="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 here.

  • That’s not all he wants, he wants to dynamically load lines into the table as the scroll occurs. More or less: http://legacy.datatables.net/release-datatables/examples/basic_init/scroll_y_infinite.html

  • @Marcusvinicius Got it, interesting this example... does not compensate you turn it into response since he asked for indication of site or example?

  • I need to set an example here, but I’m out of time. Feel free if you want.

  • @Marcusvinicius Feito :)

  • @Maiconcarraro Thank you very much this helped a lot. But could you say what is, in the second example you gave, the code that gives research?

  • @Maiconcarraro and how do I stop by limit in the table? for example, in all there are 100 data as I do for only 10 and then scroll? Does css diminiur the table size? by the way the data is directly from the database

  • @Brunogibellino According to the documentation I put on the last link there the item limiter is this attribute iDisplayLength

  • On the search for a wanted by Search this link in the documentation or here if you prefer

Show 3 more comments

Browser other questions tagged html database rolling table

You are not signed in. Login or sign up in order to post.