Добавить jquery date picker в список php

У меня есть таблица базы данных mysql, которая содержит код ошибки, дату и адрес электронной почты.Добавить jquery date picker в список php

Мой сценарий ниже отображает основной список, как на скриншоте,

Script displays as follows

Я хотел бы иметь возможность фильтровать по дате, я надеюсь использовать JQuery выбора даты.

Идея заключается в том, чтобы показывать только те даты, в которых дата соответствует дате выбора в jquery date picker.

РНР код, используемый для отображения списка:

<?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 для такого рода функций. Идентификатор это просто один раз, класс, который вы можете использовать несколько раз – KLK1

ОК внесли некоторые изменения. Я создал 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

Об изменении значения в Datepicker поле, перезагрузить URL с GET переменной date:

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

в PHP, если получить переменная suplied добавить где заявление в запросе:

$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-файл, который возвращает только таблицу, и принимает аргумент переменной POST для даты, используемой для фильтрации результатов в запросе SQL. Затем используйте на поле input, которое является датой, чтобы сделать вызов $.ajax с $('#datepicker').val(), установленным в аргументе данных, в файл PHP, который возвращает ваши данные и загружает их в указанный <div>.

Вы можете прочитать больше о $.ajax здесь: http://api.jquery.com/jQuery.ajax/

источник

2013-04-24 07:02:02

Может быть не очень эффективным, но вы можете сделать это.

$("#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-24 07:02:43 viclim

В вашем 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

Вы также мог бы избежать плохого SQL с помощью функции «mysql_real_escape_string ($ bad_variable)»

я просто настроить код 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-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>

и 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-24 07:24:51

Спасибо, единственный вопрос, я создал 2 файла. один с датой, а другой - с кодом таблицы. как только я выбираю дату, как мне ее заставить «отправить» для отображения таблиц? – rezizter

@rezizter мы вызываем ajax, поэтому, когда мы меняем дату, событие jquery .change - это огонь, а ajax - это вызов, а ваши данные обновляются. –

Я думаю, что на моем сервере может быть что-то неправильное конфигурирование, например, когда я выбираю дату, когда он не перемещается. Можно ли вместо этого добавить кнопку отправки? – rezizter

Добавить jquery date picker в список php

ответ

Смежные вопросы