Question

我有一个mysql数据库表，其中包含错误代码，日期和邮件地址。

我的脚本根据屏幕截图显示基本列表

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日期选择器添加到脚本中，以便当用户选择日期时，页面上显示的结果仅显示用户选择的日期？

Answer 1

在datepicker字段中的值更改时，使用GET变量date重新加载网址：

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

在php中，如果提供了变量，则在查询中添加where语句：

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

请注意！这不会防止sql注入！

Answer 2

写这个会有点复杂，所以原谅我不写一个例子，但我会告诉你如何做到这一点。首先，您应该创建一个单独的PHP文件，该文件仅返回该表，并使用POST变量参数来表示它用于过滤SQL查询中的结果的日期。接下来，在jQuery字段上使用.change()的{{1}}作为日期选择器进行input调用，并在$.ajax中设置$('#datepicker').val() {1}}文件，用于返回您的数据并将其加载到指定的PHP。

您可以在此处详细了解<div>：http://api.jquery.com/jQuery.ajax/

Answer 3

可能效率不高，但你可以这样做。

$("#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();
        }
    });
});

http://jsfiddle.net/djhPN/2/

的工作演示

Answer 4

在您的HTML中：

<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

你也可以用函数“mysql_real_escape_string（$ bad_variable）”来逃避坏sql

我只需调整Joel 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)

Answer 5

您想使用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>

和ajax文件是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();
?>

Answer 6

好的做了一些改变。我在目录中创建了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();
?>

这允许我按日期过滤。

感谢大家的贡献

将一个jquery日期选择器添加到php列表中

6 个答案: