添加jQuery日期選擇器到php列表

我有一個包含錯誤代碼，日期和郵件地址的mysql數據庫表。添加jQuery日期選擇器到php列表

我下面的腳本顯示了一個基本的列表，每截圖，

Script displays as follows

我希望能夠通過日期篩選，我希望能使用jquery日期選取器。

這個想法是，只顯示日期匹配在jquery日期選擇器中的條目。

用於顯示列表的PHP代碼：

<?php 

// Add Logo 
$image = "logo.png"; 
$width = 300; 
$height = 280; 
echo '<img src="'.$image.'" style=width:"' . $width . 'px;height:' . $height . 'px;">'; 

// Make a MySQL Connection 
mysql_connect("localhost", "username", "password") or die(mysql_error()); 
mysql_select_db("pmta_reporting") or die(mysql_error()); 

// Get all the data from the "example" table 
$result = mysql_query("SELECT * FROM address") 
or die(mysql_error()); 

echo "<table border='1'>"; 
echo "<tr> <th>Error</th> <th>Date</th> <th>Mail Address</th> </tr>"; 
// keeps getting the next row until there are no more to get 
while($row = mysql_fetch_array($result)) { 
     // Print out the contents of each row into a table 
     echo "<tr><td>"; 
     echo $row['code']; 
     echo "</td><td>"; 
     echo $row['date']; 
     echo "</td><td>"; 
     echo $row['address']; 
     echo "</td></tr>"; 
} 

echo "</table>"; 
// disconnect from the database 

    mysql_close(); 
?>

我使用的日期選擇器的代碼是

<!doctype html> 

<html lang="en"> 
    <head> 
    <meta charset="utf-8" /> 
    <title>jQuery UI Datepicker - Default functionality</title> 
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" /> 
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
    <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script> 
    <link rel="stylesheet" href="/resources/demos/style.css" /> 
    <script> 
     $(function() { 
      $("#datepicker").datepicker(); 
     }); 
    </script> 
    </head> 
    <body> 
    <p>Date: <input type="text" id="datepicker" /></p> 
    </body> 
</html>

我怎樣才能jQuery的日期選取器添加到腳本，以便當用戶選擇日期時，頁面上顯示的結果只顯示用戶選擇的日期？

來源

2013-04-24 rezizter

我注意到你使用類而不是一個id這種功能。一個ID它只是使用一次，一個類可以使用多次 – KLK1 2013-04-24 06:45:00

好做了一些改變。我在目錄中創建了2個文件。

的index.php - 這包含日期選取器和一個提交

file2.php - 這包含數據庫查詢和表。

<!doctype html> 

<html lang="en"> 
    <head> 
     <meta charset="utf-8" /> 
     <title>jQuery UI Datepicker - Default functionality</title> 
     <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" /> 
     <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
     <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script> 
     <link rel="stylesheet" href="/resources/demos/style.css" /> 
     <script> 
      $(function() { 
       $("#datepicker").datepicker(({ dateFormat: "yy-mm-dd" })); 
      }); 
     </script> 
    </head> 
    <body> 
     <form action="file2.php" method="post"> 
      <p>Date: <input type="text" name="datepicker" id="datepicker" /></p> 
      <div id="displaycontent"> </div> 
      <input type="submit" value="Submit" /> 
     </form> 
    </body> 
</html>

然後file2.php看起來是這樣的：

<?php 

// Make a MySQL Connection 
mysql_connect("localhost", "username", "password") or die(mysql_error()); 
mysql_select_db("databasename") or die(mysql_error()); 
$newdate = $_POST['datepicker']; 

// Get all the data from the "example" table 
$result = mysql_query("SELECT * FROM table_name WHERE date='$newdate'") or die(mysql_error()); 

echo "<table border='1'>"; 
echo "<tr> <th>Error</th> <th>Date</th> <th>Mail Address</th> </tr>"; 
// keeps getting the next row until there are no more to get 
while($row = mysql_fetch_array($result)) { 
    // Print out the contents of each row into a table 
    echo "<tr><td>"; 
    echo $row['code']; 
    echo "</td><td>"; 
    echo $row['date']; 
    echo "</td><td>"; 
    echo $row['address']; 
    echo "</td></tr>"; 
} 

echo "</table>"; 
// disconnect from the database 

mysql_close(); 
?>

這讓我按日期進行篩選。

感謝大家的貢獻

來源

2013-04-24 09:28:55 rezizter

在在日期選擇字段值的變化，重新加載網址與GET變量date：

$("#datepicker").change(function(){ 
    window.location.href = window.location.href + '?date=' + $(this).val(); 
})

在PHP中，如果得到變量suplied一個WHERE語句添加到查詢：

$query = "SELECT * FROM address" 
if (isset($_GET['date']) && ($date = $_GET['date'])){ 
    $query .= " WHERE date = '$date'"; 
} 
$result = mysql_query($query)

注意！這不會防止SQL注入！

來源

2013-04-24 06:55:45

寫起來會有些複雜，所以請原諒我不寫一個例子，但我會給你一個關於如何做到這一點的好主意。首先，您應該創建一個單獨的PHP文件，該文件僅返回表格，並在其用於過濾SQL查詢中的結果的日期採用POST可變參數。接下來，在input字段上使用jQuery的.change()字段，該字段是datepicker在文件的data參數中設置的$.ajax調用，該文件返回數據並將其加載到指定的<div>中。

你可以閱讀更多關於$.ajax這裏：http://api.jquery.com/jQuery.ajax/

來源

2013-04-24 07:02:02

可能並不十分有效的，但你可以做到這一點。在http://jsfiddle.net/djhPN/2/

來源

2013-04-24 07:02:43 viclim

在HTML

$("#date").datepicker({"dateFormat": "yy-mm-dd"}); 

$("#date").change(function() { 
    var date_from_date_picker = $(this).val(); 
    $('td.date').each(function() { 
     if ($(this).text() != date_from_date_picker) { 
      $(this).parent().hide(); 
     } else { 
      $(this).parent().show(); 
     } 
    }); 
});

工作演示：

<body> 
    <form method="get" action="yourphpscript"> 
    <p>Date: <input type="text" name="date" id="datepicker" /></p> 
    <input type="submit" value="Search" /> 
    </form> 
</body>

在你的PHP可以使用PDO或mysqli，這樣你可以使用保護您免受預處理語句和參數化查詢SQL注入。

退房這個職位的詳細信息： Examples of PDO & mysqli

你也可以逃避不良的SQL使用功能「mysql_real_escape_string（$ bad_variable）」

我就調整喬爾Harkes的代碼使它對SQL注入也有效：

$query = "SELECT * FROM address" 
if (isset($_GET['date']) && ($date = mysql_real_escape_string($_GET['date']))){ 
    $query .= " WHERE date = '$date'"; 
} 
$result = mysql_query($query)

來源

2013-04-24 07:18:17 MMeersseman

你想使用ajax來加載這樣的內容。

<!doctype html> 

<html lang="en"> 
<head> 
<meta charset="utf-8" /> 
<title>jQuery UI Datepicker - Default functionality</title> 
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" /> 
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script> 
<link rel="stylesheet" href="/resources/demos/style.css" /> 
<script> 
    $(function() { 
     $("#datepicker").datepicker(); 
    }); 

    jQuery(document).ready(function() { 
    $("#datepicker").change(function(){ 

    var new_date = $(this).val(); 

    jQuery.ajax({ 
     type: "POST", 
     url: "http://www.url.php", 
     data: { date:new_date }, 
     success: function(data) { 
       $('#displaycontent').val(data); 
       } 
     }); 
    }); 
    }); 
</script> 

</head> 
<body> 
    <p>Date: <input type="text" id="datepicker" /></p> 
    <div id="displaycontent"> </div> 
</body> 
</html>

and ajax file is ex。 url.php是這樣的。

// Add Logo 
$image = "logo.png"; 
$width = 300; 
$height = 280; 
echo '<img src="'.$image.'" style=width:"' . $width . 'px;height:' . $height . 'px;">'; 

// Make a MySQL Connection 
mysql_connect("localhost", "username", "password") or die(mysql_error()); 
mysql_select_db("pmta_reporting") or die(mysql_error()); 

$newdate = $_REQUEST['date']; 

// Get all the data from the "example" table 
$result = mysql_query("SELECT * FROM address WHERE date=".$newdate) or die(mysql_error()); 

echo "<table border='1'>"; 
echo "<tr> <th>Error</th> <th>Date</th> <th>Mail Address</th> </tr>"; 
// keeps getting the next row until there are no more to get 
while($row = mysql_fetch_array($result)) { 
    // Print out the contents of each row into a table 
    echo "<tr><td>"; 
    echo $row['code']; 
    echo "</td><td>"; 
    echo $row['date']; 
    echo "</td><td>"; 
    echo $row['address']; 
    echo "</td></tr>"; 
} 

echo "</table>"; 
// disconnect from the database 

mysql_close(); 
?>

來源

2013-04-24 07:24:51

謝謝，唯一的問題是我創建了2個文件。一個包含日期，另一個包含表格代碼。一旦我選擇了一個日期，我怎樣才能讓它「提交」來顯示錶格？ – rezizter 2013-04-24 08:02:12

@rezizter我們調用ajax，所以當我們更改日期時，jquery.change事件就會觸發，並且ajax就是調用，並且您的數據將會更新。 – 2013-04-24 08:08:15

我認爲我的服務器上可能存在某些配置錯誤，因爲我選擇不移動的日期。是否可以添加提交按鈕？ – rezizter 2013-04-24 08:42:03

添加jQuery日期選擇器到php列表

回答

相關問題