2013-02-22 3 views
-1

Извините заранее, если a) на этот вопрос уже был дан ответ, я выполнил поиск, но не смог использовать ответы, которые я нашел, и b) Я не очень опытный программист и стараюсь учиться ...Javascript MYSQL Dropdown

Чтобы сделать это как можно короче ...

  • у меня есть полностью функционирующий сайт с возможностью поиска и сортировки базы данных (что сотрудник в значительной степени построить для меня давно , следовательно, почему я слишком смущен)
  • Я хотел бы добавить раскрывающийся фильтр, который заполняется из базы данных
  • Код ссылается на javascript и PHP. Из того, что я понимаю, PHP заполнит данные таблицы для меня и Javascript запускает фильтр «показаны записи хх» и в окне поиска, - которые, как удивительным

Моя проблема, я не могу получить какой-либо код для выпадающего меню Я хотел бы добавить к работе. Я могу получить ниспадающее меню, чтобы заселить, но на самом деле не фильтровать данные :(

<?php 


$dbhost = 'localhost'; 
$dbuser = 'database'; 
$dbpass = 'password; 
$dbname = 'marchmadness'; 
$table = 'leaderboard'; 

//connect to the database 
$db = mysql_connect($dbhost, $dbuser, $dbpass) or die(mysql_error()); 

mysql_select_db($dbname) or die(mysql_error()); 

?> 

<!DOCTYPE html> 
<html lang="en"> 

<head> 
    <title>Leaderboard</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<link rel="icon" type="image/png" href="/favicon.ico" /> 
    <link rel="stylesheet" type="text/css" href="assets/css/main.css"> 
    <link rel="stylesheet" type="text/css" href="assets/css/listing.css" media="all" /> 
    <script type="text/javascript" src="assets/js/jquery.min.js"></script> 
    <script type="text/javascript" language="javascript" src="assets/js/jquery.dataTables.min.js"></script> 

    <script type="text/javascript"> 
$(document).ready(function() { 
      /* This triggers the cool filtering stuff, without this it's just a normal table of data */ 
      $('table').dataTable({ 
       "iDisplayLength": 10 
      }); 
     }); 

function MM_preloadImages() { //v3.0 
    var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); 
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) 
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} 


} 
    </script> 


</head> 

<body id="listing"> 
<div id="wrapper"> 

<div id="topbox" align="center"> 
<img src="_Images/maddnessheader.png" width="539" height="296" align="center" /></div> 
&nbsp; <br/> 
&nbsp; <br/> 
&nbsp; <br/> 
&nbsp; <br/> 
&nbsp; <br/> 
&nbsp; <br/> 

<? 
    $sql="SELECT Title FROM leaderboard"; 
$result=mysql_query($sql); 

$options=""; 

while ($row=mysql_fetch_array($result)) { 

    $id=$row["leaderboard"]; 
    $thing=$row["Title"]; 
    $options.="<OPTION VALUE=\"$id\">".$thing.'</option>'; 
} 
?> 


<SELECT NAME=thing> 
<OPTION VALUE=0>Choose 
<?=$options?> 
</SELEC 

T>

<table align="center"> 

<thead> 
    <tr> 
     <th>Title</th> 
     <th>Name</th> 
     <th>Call Coding (%)</th> 
     <th>FizzBack SAT Score (%)</th> 

    </tr> 
</thead> 


<tbody> 


<?php 


    //get the information from the database 
    $result = mysql_query("SELECT * FROM `$table`;") or die(mysql_error()); 

    while($row = mysql_fetch_array($result)) { 
     echo '<tr>'; 

     // print out the data from the database. Notice how the text inside $row[] matches up with the headers in phpmyadmin 

     echo '<td>' . htmlentities($row['Title']) . '</td>'; 
     echo '<td>' . htmlentities($row['Name']) . '</td>'; 
     echo '<td>' . htmlentities($row['CC']) . '</td>'; 
     echo '<td>' . htmlentities($row['FZB']) . '</td>'; 


     echo "</tr>\n"; 
    } 

?> 



</tbody> 
</table> 


</div> 
</body> 
</html> 

Я думаю, что я должен был бы манипулировать JavaScript, чтобы добавить то, что мне нужно, а вот где рабочий выпадающий и окно поиска приходят от ... но я сосать JavaScript: -.! \ Если кто-то может помочь мне бы очень признателен, я могу разделить существующий Java, а также в случае необходимости: D

Приветствия

+0

Где находится выпадающий список? Как он должен фильтроваться? –

+0

Для начала я бы рекомендовал удалить полукатегорию в этой строке: $ result = mysql_query ("SELECT * FROM' $ table'; ") или умереть (mysql_error()); и сделать его похожим на ... $ result = mysql_query ("SELECT * FROM' $ table' ") или die (mysql_error()); Это может отбросить ваш запрос. – JamesD

+0

Единственный выпадающий список, который у вас есть (или должен быть), заключается в выборе количества результатов для отображения на странице. Если кнопки сортировки работают некорректно, вам нужно будет назначить правила сортировки или что-то еще. Посмотрите документацию для jQuery datatable http://www.datatables.net – NickSlash

ответ

0

Попробуйте, Ive отредактировал несколько вещей, которые не казались совершенно правильными, и добавил некоторый код, который, надеюсь, будет фильтровать материал. Немного догадки, поскольку я никогда не использовал datatables, и я не знаю, каковы типы данных.

<?php 
    $dbhost = 'localhost'; 
    $dbuser = 'database'; 
    $dbpass = 'password'; 
    $dbname = 'marchmadness'; 
    $table = 'leaderboard'; 

    //connect to the database 
    $db = mysql_connect($dbhost, $dbuser, $dbpass) or die(mysql_error()); 

    mysql_select_db($dbname) or die(mysql_error()); 
?> 
<!doctype html> 
<html lang="en"> 
    <head> 
     <title>Leaderboard</title> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
     <link rel="icon" type="image/png" href="/favicon.ico" /> 
     <link rel="stylesheet" type="text/css" href="assets/css/main.css"> 
     <link rel="stylesheet" type="text/css" href="assets/css/listing.css" media="all" /> 
     <script type="text/javascript" src="assets/js/jquery.min.js"></script> 
     <script type="text/javascript" language="javascript" src="assets/js/jquery.dataTables.min.js"></script> 

     <script type="text/javascript"> 
      var table; // used to store a reference later 
      $.fn.dataTablesExt.afnFiltering.push(
       function(oSettings, aData, iDataIndex) { 
        if (aData[0].toLowerCase() == $('#title_filter').val().toLowerCase()) { 
         return true; 
        } else { 
         return false; 
        } 
       } 
      ); 
      $(document).ready(function() { 
       /* This triggers the cool filtering stuff, without this it's just a normal table of data */ 
       table = $('table').dataTable({ "iDisplayLength": 10 }); // this starts the datatable stuff and returns a reference to it 
      }); 
      $("#title_filter").onchange(function() { 
       table.fnDraw(); // forgot this line - whoops 
      }); 
      function MM_preloadImages() { //v3.0 
       var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); 
       var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) 
       if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} 
      } 
     </script> 
    </head> 
    <body id="listing"> 
     <div id="wrapper"> 
      <div id="topbox" align="center"> 
       <img src="_Images/maddnessheader.png" width="539" height="296" align="center" /></div> 
<?php 
    $sql="SELECT Title FROM leaderboard"; 
    $result=mysql_query($sql); 
    $options=""; 
    while ($row=mysql_fetch_array($result)) { 
     $id=$row["leaderboard"]; 
     $thing=$row["Title"]; 
     $options.="<option value=\"$thing\">".$thing.'</option>'; 
    } 
?> 
       <select id="title_filter"> 
        <?=$options?> 
       </select> 
       <table align="center"> 
        <thead> 
         <tr> 
          <th>Title</th> 
          <th>Name</th> 
          <th>Call Coding (%)</th> 
          <th>FizzBack SAT Score (%)</th> 
         </tr> 
        </thead> 
       <tbody> 
<?php 
    //get the information from the database 
    $result = mysql_query("SELECT * FROM `$table`;") or die(mysql_error()); 

    while($row = mysql_fetch_array($result)) { 
     echo '<tr>'; 
     // print out the data from the database. Notice how the text inside $row[] matches up with the headers in phpmyadmin 
     echo '<td>' . htmlentities($row['Title']) . '</td>'; 
     echo '<td>' . htmlentities($row['Name']) . '</td>'; 
     echo '<td>' . htmlentities($row['CC']) . '</td>'; 
     echo '<td>' . htmlentities($row['FZB']) . '</td>'; 
     echo "</tr>\n"; 
    } 
?> 
       </tbody> 
      </table> 
     </div> 
    </body> 
</html> 
+0

Спасибо за попытку Ник, но это, кажется, сломали «Показать XXX запись», следующая функция страницы и функция сортировки лол :) Честно говоря, я думаю, что ключ к этому находится в JavaScript, я просто недостаточно подготовлен, чтобы понять это ... Если ANYONE может помочь и хочет получить копию JavaScript, сообщите мне, и я напишу вам все файлы. Еще раз спасибо! :) – LivingDeadGirl

+0

Все, что я действительно добавил, был javascript и исправил проблему с вашим поколением поля ввода select. Его трудно работать над чем-то, что я не могу отлаживать. Ваша проблема связана с данными, вам необходимо прочитать документацию о пользовательских фильтрах. – NickSlash

+0

Я буду продолжать читать, но, кажется, когда я использую ваш код, не только новое выпадающее меню не работает, но и удаляет функции, которые ранее работали. Я честно считаю, что решение лежит в JavaScript (к сожалению, для меня) :( – LivingDeadGirl