php - How to create an Ajax jQuery table -
i want create ajax jquery table. got point can have normal table, want evolve it. use .mdb database , php.
screen on table. click here.
screen of ajax jquery tavle. click here.
this index.html (body)
<body> <h1>ricerca ordini</h1> <form action="index.php" method="post"> <label for="input">ricerca:</label> <input type="text" id="namanyay-search-box" name="input" placeholder="ricerca ordini"> <br><br> <div id="radioset"> <input type="checkbox" id="radio1" name="options[]" value="0" checked="checked"><label for="radio1">inserito</label> <input type="checkbox" id="radio2" name="options[]" value="1" checked="checked"><label for="radio2">stampato</label> <input type="checkbox" id="radio3" name="options[]" value="2" checked="checked"><label for="radio3">bloccato</label> <input type="checkbox" id="radio4" name="options[]" value="3" checked="checked"><label for="radio4">♥</label> </div> <br><br> <label for="selectmenu">tipo:</label> <select id="selectmenu" name="tipo"> <optgroup label="con la c"> <option>c1</option> <option>cr</option> </optgroup> <optgroup label="con la f"> <option>f1</option> <option>fp</option> <option>fpe</option> </optgroup> <optgroup label="tutto"> <option selected="selected">tutti tipi</option> </optgroup> </select> <label for="spinner">id:</label> <input id="spinner" name="id" min="1" > <br><br> <label for="numero1">da numero:</label> <input type="text" id="numero1" name="numero1"> <label for="numero2">a numero:</label> <input type="text" id="numero2" name="numero2"> <br><br> <label for="from">da data:</label> <input type="text" id="from" name="from"> <label for="to">a data:</label> <input type="text" id="to" name="to"> <br><br> <input type="submit" id="namanyay-search-btn" name="search" value="cerca"> <input type="button" class="btn btn-primary" value="load table" id="load"/> </form> </body> this config.php
<?php define ('dbname',"./dinamicoweb.mdb"); // definisce il nome del database define ('dbtbl',"ordini"); // definisce il nome della tabella define ('idord',"id ord"); // definisce l'id ord define ('dataord',"data ord"); // definisce la data ord define ('ragsoc',"ragione sociale"); // definisce la ragione sociale define ('pkname',"id ord"); // definisce il nome della chiave primaria define ('pkcol',0); // definisce la posizione della chiave primaria define ('linkpk',true); // abilita link alla pk per modifica-cancella ?> and index.php
<?php require_once("config.php"); $con = new com("adodb.connection"); $constr = "driver={microsoft access driver (*.mdb)}; dbq=". realpath(dbname).";"; $con->open($constr); $input=$_post['input']; $id=$_post['id']; $tipo=$_post['tipo']; $numero1=$_post['numero1']; $numero2=$_post['numero2']; $data1=date('d/m/y', strtotime($_post['from']));; $data2=date('d/m/y', strtotime($_post['to']));; //if data text box empty system write "01/01/1970" so, cancel if ($data1=="01/01/1970") { $data1 = ""; } if ($data2=="01/01/1970") { $data2 = ""; } if ($tipo=="tutti tipi") { $tipo = ""; } $optionssql = ""; foreach($_post["options"] $index => $option) { if ($optionssql == "") $optionssql = " stato in ("; //if it's first detected option, add in clause string $optionssql .= $option.","; } //trim trailing comma , add closing bracket of in clause instead if ($optionssql != "") { $optionssql = rtrim($optionssql, ","); $optionssql .= ")"; } $sql="select [id ord] [id], [tipo ord] [tipo], [n ord] [numero], [data ord] [data], [ragione sociale], [indirizzo], [stato], [totimp] [importo totale], [totiva] [importo iva] [ordini] where"; $wheresql=""; if (!empty($input)) { $wheresql .= " [indirizzo] '%$input%' or [ragione sociale] '%$input%'"; } if (!empty($id)) { if ($wheresql != "") { $wheresql .= " and"; } $wheresql .= " [id ord] '$id'"; } if (!empty($tipo)) { if ($wheresql != "") { $wheresql .= " and"; } $wheresql .= " [tipo ord] '$tipo'"; } if (!empty($data1)) { if ($wheresql != "") { $wheresql .= " and"; } $wheresql .= " [data ord] between #$data1# , #$data2#"; } if (!empty($numero1)) { if ($wheresql != "") { $wheresql .= " and"; } $wheresql .= " [n ord] between '$numero1' , '$numero2'"; } if (!empty($option)) { if ($wheresql != "") { $wheresql .= " and"; } $wheresql .= $optionssql; } $sql .= $wheresql; $rs = $con->execute($sql); if($rs === false) { trigger_error('wrong sql: ' . $sql . ' error: ' . $con->errormsg(), e_user_error); } else { $rows_returned = $rs->recordcount(); } $numfields = $rs->fields->count; // print html echo '<!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd">'; echo '<html xmlns="http://www.w3.org/1999/xhtml">'; echo '<head>'; echo '<meta http-equiv="content-type" content="text/html; charset=utf-8" />'; echo '<title>gestione degli '.dbtbl.'</title>'; echo '<link href="css/styles.css" rel="stylesheet" type="text/css" />'; echo '<link rel="stylesheet" href="css/bootstrap.css">'; echo '<link rel="stylesheet" href="css/footable.bootstrap.css">'; echo '<link rel="stylesheet" href="css/footable.bootstrap.min.css">'; echo '<link rel="stylesheet" href="css/footable.core.bootstrap.min.css">'; echo '</head><body>'; echo '<h1>gestione '.dbtbl.'</h1>'; // elenca records ----- //echo ("<div class='table-responsive'>"); echo ("<table class='datatable table tabella_reponsive ui-responsive' summary='prova dati con ms access'>"); echo("<caption>tabella ".dbtbl."</caption>\n"); //echo("<thead><tr>"); //echo("<th data-sort-initial='descending' data-class='expand'>idd</th>"); //echo("</tr></thead>"); ($i=0;$i<$numfields;$i++){ echo("<th scope='col'>"); echo $rs->fields($i)->name; echo("</th>\n"); } echo("</tr></thead>\n"); echo("<tbody>"); $alt = false; while (!$rs->eof) { echo("<tr>"); ($i=0;$i<$numfields;$i++){ $altclass = $alt ? " class='alt'" : ""; if (linkpk && $i==pkcol){ echo "<td".$altclass."><a href='?id=".$rs->fields($i)->value ."'>".$rs->fields($i)->value."</a></td>\n"; } else{ echo "<td".$altclass.">".$rs->fields($i)->value."</td>\n"; } } echo("</tr>\n"); $rs->movenext(); $alt = !$alt; } echo("</tbody>"); echo("</table>\n"); echo("</div>"); echo ("<p>[ <a href='?ins=1'>inserimento nuovo record</a> ]</p>"); // modifica record ----- if (!empty($_get['id'])){ $id = intval($_get['id']); $rs = $con->execute("select [id ord] [id], [tipo ord] [tipo], [n ord] [numero], [data ord] [data], [ragione sociale], [indirizzo], [stato], [totimp] [importo totale], [totiva] [importo iva] from".dbtbl." ".pkname."=".$id); echo ("<form action='modify.php' method='post'>"); echo ("<fieldset>"); echo ("<legend>modifica record</legend>"); ($i=0;$i<$numfields;$i++){ if (linkpk && $i==pkcol){ echo ("<label for='".$rs->fields($i)->name."'>" .$rs->fields($i)->name."</label>"); echo ("<input type='text' readonly='readonly' name='" .$rs->fields($i)->name."' value=\"" .$rs->fields($i)->value."\" /><br />\n"); } else { echo ("<label for='".$rs->fields($i)->name."'>" .$rs->fields($i)->name."</label>"); echo ("<input type='text' name='".$rs->fields($i)->name."' value=\"" .$rs->fields($i)->value."\" /><br />\n"); } } echo ("<button type='submit' name='azione' value='modifica'>modifica</button>"); echo ("<button class='affiancato' type='submit' name='azione' value='cancella'>cancella</button>"); echo ("</fieldset></form>"); } // inserimento record ----- elseif (!empty($_get['ins'])){ echo ("<form action='modify.php' method='post'>"); echo ("<fieldset>"); echo ("<legend>inserimento record</legend>"); ($i=0;$i<$numfields;$i++){ if ($i!=pkcol){ echo ("<label for='".$rs->fields($i)->name."'>" .$rs->fields($i)->name."</label>"); echo ("<input type='text' name='".$rs->fields($i)->name."' /><br />\n"); } } echo ("<button type='submit' name='azione' value='inserisci'>inserisci</button>"); echo ("<br />"); echo ("</fieldset></form>"); echo '<script src="js/footable.js"></script>'; echo '<script src="js/footable.min.js"></script>'; } echo '</body>'; echo '</html>'; $rs->close(); $con->close(); ?> thanks!
what linked datatables jquery plugin.
add datatables .css , .js:
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.12/datatables.min.css"/> <script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.12/datatables.min.js"></script> and then,
$('#your-table-id').datatable();
Comments
Post a Comment