2016-11-10 37 views
1

我想創建一個Ajax jQuery表。我認爲我可以有一張普通的桌子,現在我想進化它。我使用.mdb數據庫和php。如何創建一個Ajax jQuery表

我的桌子上的屏幕。 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(); 
?> 

謝謝!

+0

那麼問題是什麼? –

+0

如何更改我的index.php以創建Ajax jQuery表。 @PatrickQ –

回答

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(); 
+0

我在哪裏添加'$('#your-table-id').DataTable();'? –

+0

我補充說,但這不起作用。 –

+0

@ M.Bagiak確保你有合適的桌子,桌子頭,桌子標籤。 –

0

我認爲,如果你想使用AJAX的表,你可以下載一個類似datatable或tablesorter的庫,並使用AJAX選項或使用jQuery中的ajax函數來重新加載表中的內容,當你在te xtbox