0

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

我下面的脚本根据屏幕截图显示了一个基本列表，

脚本显示如下

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

4

6 回答 6

1

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

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

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

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

笔记！这不会防止sql注入！

于 2013-04-24T06:55:45.457 回答
1

这写起来有点复杂，所以请原谅我没有写一个例子，但我会给你一个如何做到这一点的好主意。首先，您应该创建一个单独的 PHP 文件，该文件仅返回表，并POST为用于过滤SQL查询结果的日期获取一个可变参数。接下来，在作为 datepicker的字段上使用jQuery's以使用数据参数中的 set 对返回数据的文件进行调用，并将其加载到指定的..change()input$.ajax$('#datepicker').val()PHP<div>

您可以在这里阅读更多信息：http $.ajax: //api.jquery.com/jQuery.ajax/

于 2013-04-24T07:02:02.190 回答
1

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

$("#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/工作演示

于 2013-04-24T07:02:43.990 回答
1

在您的 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 注入。

查看这篇文章以获取更多信息： 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)
于 2013-04-24T07:18:17.987 回答
1

您想使用 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();
?>
于 2013-04-24T07:24:51.920 回答
0

好的，做了一些改变。我在目录中创建了 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-24T09:28:55.493 回答