如何创建Ajax jQuery表

时间:2016-11-10 13:58:12

标签: php jquery html ajax adodb

我想创建一个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">&#9829</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();
?>

谢谢!

2 个答案:

答案 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>