Paginare un database con stile

 

 Questo script asp ci permette di paginare lunghi database e di navigare tra i record in esso contenuti, ci permette di effetuare ricerche e di impostare la quantità di record da visualizzare per ogni pagina.

pagina.style_tabella.css

script_tabella.js

Con il primo file esterno realizziamo la grafica della tabella che può essere anche personalizzata, il secondo file esterno si occupa delle funzioni.

Come potrete notare la pagina iniziale ci mostra 20 record, è possibile configurare questa funzione in base alle nostre esigenze . Ci basta aprire il  script_tabella.js e alla riga numero 7 sostituire il numero che vediamo con il numero di record che vogliamo visualizzare nella pagina iniziale.

Vediamo il codice

<html>
<head>
<title>Leggere i dati di un database - rootweb.it</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="style_tabella.css" />
</head>

<body>
<p><font size="3"><b>Paginare un database con stile - rootweb.it</b></font> </p>
<p>&nbsp; </p>
<form name="form1" method="post" action="utenti.asp">
 <table width="880" border="0" cellspacing="3" cellpadding="3" align="center">
  <tr>
   
      <td width="404"><font face="Arial, Helvetica, sans-serif" size="1"><b>Cerca
        Utente </b></font>
        <input type="text" name="cerca_utente" class = "text">
        <input type="submit" name="Submit" value=" Cerca ">
      </td>
  </tr>
</table>  </form>

<table cellpadding="0" cellspacing="0" border="0" id="table" class="sortable">
  <thead>
   <tr>

       <th><h3>Name</h3></th>
    <th><h3>Indirizzo</h3></th>
    <th><h3>telefono</h3></th>
    <th><h3>e-mail</h3></th>
             <th><h3>Data</h3></th> 
   
  </tr>
   </thead>
  <tbody>
 
  <% Language=VBScript %>
  <%
   '-------------------------------------------------------------------------------------------
strcerca = request("cerca_utente")
Set okconn = Server.CreateObject("ADODB.Connection")
okconn.Open "DRIVER={Microsoft Access Driver (*.mdb)};DBQ=" & server.MapPath("nomedatabase.mdb")
if strcerca = "" then
okSQL = "select * from utenti"
else
okSQL = "select * from utenti WHERE (nome like'%" & strcerca & "%')"
end if
Dim obcRS
Set obcRS = Server.CreateObject("ADODB.Recordset")
obcRS.Open oksql, okconn, 3, 3
DO While Not obcRS.EOF
%>

  <tr bordercolor="#999999">
    <td width="131"><font face="Arial, Helvetica, sans-serif" size="1"><%=obcRS("Nome")%></font></td>
    <td width="87"><font face="Arial, Helvetica, sans-serif" size="1"><%=obcRS("Indirizzo")%></font></td>
    <td width="71"><font face="Arial, Helvetica, sans-serif" size="1"><%=obcRS("Telefono")%></font></td>
    <td width="75"><font face="Arial, Helvetica, sans-serif" size="1"><%=obcRS("Email")%></font></td>
    <td width="54"><font face="Arial, Helvetica, sans-serif" size="1"><%=obcRS("data")%></font></td>
  


  </tr>
  <%
obcRS.Movenext
Loop
obcRS.Close
Set obcConn =Nothing
%>
</tbody>
</table>
<div id="controls">
  <div id="perpage">
   <select onchange="sorter.size(this.value)">
   <option value="5">5</option>
    <option value="10" selected>10</option>
    <option value="20">20</option>
    <option value="50">50</option>
    <option value="100">100</option>
   </select>
   <span>Record per pagina</span>
  </div>
  <div id="navigation">
   <img src="images/first.gif" width="16" height="16" alt="First Page" onclick="sorter.move(-1,true)" />
   <img src="images/previous.gif" width="16" height="16" alt="First Page" onclick="sorter.move(-1)" />
   <img src="images/next.gif" width="16" height="16" alt="First Page" onclick="sorter.move(1)" />
   <img src="images/last.gif" width="16" height="16" alt="Last Page" onclick="sorter.move(1,true)" />
  </div>
  
 <div id="text">Pagina <span id="currentpage"></span> di <span id="pagelimit"></span></div>
 </div>
 <script type="text/javascript" src="script_tabella.js"></script>
 <script type="text/javascript">
  var sorter = new TINY.table.sorter("sorter");
 sorter.head = "head";
 sorter.asc = "asc";
 sorter.desc = "desc";
 sorter.even = "evenrow";
 sorter.odd = "oddrow";
 sorter.evensel = "evenselected";
 sorter.oddsel = "oddselected";
 sorter.paginate = true;
 sorter.currentid = "currentpage";
 sorter.limitid = "pagelimit";
 sorter.init("table",1);
  </script>

</body>
</html>

 Una nota interesante da sottolineare è il parametro LIKE utilizzato nell'istruzione sql questo parametro ci permette di estrarre dal database solo i record che contengono il testo immesso nel campo di ricerca . E'doveroso dire che con i numerosi parametri SQL è possibile raffinare la ricerca nei database

Scarica qui un esempio   17Kb   Guarda demo