我想创建一个Ajax jQuery表。我已经到了可以拥有普通表的地步,现在我想进化它。我使用.mdb数据库和php。
我桌上的屏幕。 click here。
Ajax jQuery tavle的屏幕。 click here
这是我的index.html(正文)
<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 i 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>
这是我的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 i link alla PK per modifica-cancella
?>
这是我的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 the data text box are empty the system write "01/01/1970" so, I cancel that
if ($data1=="01/01/1970") {
$data1 = "";
}
if ($data2=="01/01/1970") {
$data2 = "";
}
if ($tipo=="Tutti i tipi") {
$tipo = "";
}
$optionsSQL = "";
foreach($_POST["options"] as $index => $option) {
if ($optionsSQL == "") $optionsSQL = " Stato IN ("; //if it's the first detected option, add the IN clause to the string
$optionsSQL .= $option.",";
}
//trim the trailing comma and add the closing bracket of the IN clause instead
if ($optionsSQL != "")
{
$optionsSQL = rtrim($optionsSQL, ",");
$optionsSQL .= ")";
}
$sql="SELECT [Id Ord] AS [ID], [Tipo Ord] AS [Tipo], [N Ord] AS [Numero], [Data Ord] AS [Data], [Ragione Sociale], [Indirizzo], [Stato], [TotImp] AS [IMPORTO TOTALE], [TotIva] AS [IMPORTO IVA] FROM [Ordini] WHERE";
$whereSql="";
if (!empty($input)) {
$whereSql .= " [Indirizzo] LIKE '%$input%' OR [Ragione Sociale] LIKE '%$input%'";
}
if (!empty($id)) {
if ($whereSql != "") {
$whereSql .= " AND";
}
$whereSql .= " [Id Ord] LIKE '$id'";
}
if (!empty($tipo)) {
if ($whereSql != "") {
$whereSql .= " AND";
}
$whereSql .= " [Tipo Ord] LIKE '$tipo'";
}
if (!empty($data1)) {
if ($whereSql != "") {
$whereSql .= " AND";
}
$whereSql .= " [Data Ord] BETWEEN #$data1# AND #$data2#";
}
if (!empty($numero1)) {
if ($whereSql != "") {
$whereSql .= " AND";
}
$whereSql .= " [N Ord] BETWEEN '$numero1' AND '$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>");
for ($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>");
for ($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] AS [ID], [Tipo Ord] AS [Tipo], [N Ord] AS [Numero], [Data Ord] AS [Data], [Ragione Sociale], [Indirizzo], [Stato], [TotImp] AS [IMPORTO TOTALE], [TotIva] AS [IMPORTO IVA] FROM".DBTBL." WHERE ".PKNAME."=".$id);
echo ("<form action='modify.php' method='post'>");
echo ("<fieldset>");
echo ("<legend>Modifica record</legend>");
for ($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>");
for ($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();
?>
谢谢!
答案 0 :(得分:0)
您关联的内容是Datatables jquery plugin.
添加数据表.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>
然后,
$('#your-table-id').DataTable();
答案 1 :(得分:0)
我认为如果你想为表使用AJAX,可以下载像datatable或tablesorter这样的库并使用AJAX选项或者在jquery中使用ajax函数在文本框中写入内容时重新加载表的内容< / p>