Een PHP script maken van bestaand javascript met zoekfunctie?

Status
Niet open voor verdere reacties.

richard5000

Gebruiker
Lid geworden
24 mrt 2012
Berichten
161
Ik heb een zoekfunctie voor een tabel gevonden die ik top vind, maar is in javascript en ik wil hem graag in PHP hebben en gebruiken voor een tabel die vanuit mijn SQL database komt die op een NAS staat en ik laat zien via een webpagina, nu in dit script is het zo dat de tabel er ook in zit en ik wil werken met databease in SQL, omdat de tabel die ik heb wel vier excel spreadsheets zijn, die ik vervolgens importeer in mijn database.

Kan iemand deze zoekfunctie in PHP maken, en dit script plaatsen, zodat hij te gebruiken is met een database tabel, eventueel iets waarbij ik kan invullen welke database en tabel?

Een voorbeeld van onderstaand script (stukje van mijn spreadsheet staat op Blad1) staat op http://www.rvvweb.nl/XX

Hoor het graag, zie hieronder het javascript:

PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>JavaScript Search</title>
    <style type="text/css">
        body { font-family: Arial; font-size: 11px; }
        td { font-family: Arial; font-size: 11px; }
        th { font-family: Arial; font-size: 11px; background-color: #c8c8c8; }
        input { font-family: Arial; font-size: 11px; }
    </style>
    <script language="javascript" type="text/javascript">
        //define the table search as an object, which can implement both functions and properties
        window.tableSearch = {};

        //initialize the search, setup the current object
        tableSearch.init = function() {
            //define the properties I want on the tableSearch object
            this.Rows = document.getElementById('data').getElementsByTagName('TR');
            this.RowsLength = tableSearch.Rows.length;
            this.RowsText = [];
            
            //loop through the table and add the data to
            for (var i = 0; i < tableSearch.RowsLength; i++) {
                this.RowsText[i] = (tableSearch.Rows[i].innerText) ? tableSearch.Rows[i].innerText.toUpperCase() : tableSearch.Rows[i].textContent.toUpperCase();
            }
        }

        //onlys shows the relevant rows as determined by the search string
        tableSearch.runSearch = function() {
            //get the search term
            this.Term = document.getElementById('textBoxSearch').value.toUpperCase();
            
            //loop through the rows and hide rows that do not match the search query
            for (var i = 0, row; row = this.Rows[i], rowText = this.RowsText[i]; i++) {
                row.style.display = ((rowText.indexOf(this.Term) != -1) || this.Term === '') ? '' : 'none';
            }
        }

        //runs the search
        tableSearch.search = function(e) {
            //checks if the user pressed the enter key, and if they did then run the search
            var keycode;
            if (window.event) { keycode = window.event.keyCode; }
            else if (e) { keycode = e.which; }
            else { return false; }
            if (keycode == 13) {
                tableSearch.runSearch();
            }
            else { return false; }
        }
    </script>
</head>


<body onload="tableSearch.init();">
    <table border="0" cellpadding="0" cellspacing="0">
        <tbody>
            <tr>
                <td>
                    <input type="text" size="30" maxlength="1000" value="" id="textBoxSearch" onkeyup="tableSearch.search(event);" />
                    <input type="button" value="Search" onclick="tableSearch.runSearch();" />
                </td>
            </tr>
        </tbody>
    </table>
    <br />
    <table border="1" cellpadding="2" cellspacing="0">
        <tr>
            <th>ID</th>
            <th>First Name</th>
            <th>Surname</th>
            <th>Website</th>
        </tr>
        <tbody id="data">
            <tr>
                <td>1</td>
                <td>Heathesh</td>
                <td>Bhandari</td>
                <td><a href="http://test.com">http://test.com</a></td>
            </tr>
            <tr>
                <td>2</td>
                <td>Candice</td>
                <td>David</td>
                <td><a href="http://candicedavid">http://candicedavid</a></td>
            </tr>
        </tbody>
    </table>
</body>
</html>

Groet,
Richard
 
Laatst bewerkt:
Volgens mij hoef je bij bovenstaand script alleen maar je hele database in die HTML-tabel te plaatsen en vervolgens kun je met de javascript-code die tabel weer doorzoeken.
 
Bedankt voor uw reactie, maar ik wil juist mijn database laten staan en niet in de tabel plaatsen.

Verder weet ik ook niet hoe ik dit verwerkt krijg in een script, niemand weet hoe ik koppen van mijn kolom laat zien op de webpagina.
 
Kan iemand mij helpen om alleen de bovenstaande zoekfunctie in onderstaand PHP script te krijgen, zodat ik mijn eigen tabel vanuit SQL database op mjn NAS kan gebruiken?


PHP:
// regel voor contact maken database
$connect = mysql_connect('localhost','username','password');

mysql_select_db("testdatabase");

//regel voor selecteren uit database en laten zien op de webpagina 
$query = mysql_query("select * FROM testtabel LIMIT 0, 30 ");

		WHILE($rows = mysql_fetch_array($query)):
		
			$naam = $rows['naam'];
			$woonplaats = $rows['woonplaats'];
			
		echo "&nbsp&nbsp$idnr&nbsp&nbsp$naam&nbsp&nbsp$woonplaats&nbsp&nbsp";
		
		endwhile;

Alvast bedankt, ben een starter, dus heb niet veel ervaring, dus als je het script wil aanpassen heel graag.

Heb al getracht aanpassingen te maken, maar krijg dan foutmelding.

Groet,
Richard
 
Laatst bewerkt:
Met plaatsen bedoelde ik dat de inhoud van de database wordt weergegeven in de tabel :)
Dus een combinatie van je beginscript en die je hierboven hebt.

Krijg je met bovenstaand script wel verbinding met de database?
 
Hoi Tha,

Ja ik krijg super contact, heb alleen nu even mijn wachtwoord etc. aangepast, komt vanaf youtube met video, zodat je kan zien wat je moet doen stap voor stap, maar mijn vraag staat er niet op, dus zoek ik iemand die dit ook voor mij kan doen, hoop ik .... zelf kan ik het niet, vandaar.

Krijg vaak reactie van het staat op google en het staat daar etc, maar als ik het kon had ik mijn vraag niet hier neergezet op Help mij..!!

Groet,
Richard
 
Laatst bewerkt:
Probeer dit eens, zorg er wel voor de database-velden kloppen.
Zou je ook willen melden wanneer je foutmeldingen krijgt dan lopen we die even na :)
PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>JavaScript Search</title>
    <style type="text/css">
        body { font-family: Arial; font-size: 11px; }
        td { font-family: Arial; font-size: 11px; }
        th { font-family: Arial; font-size: 11px; background-color: #c8c8c8; }
        input { font-family: Arial; font-size: 11px; }
    </style>
    <script language="javascript" type="text/javascript">
        //define the table search as an object, which can implement both functions and properties
        window.tableSearch = {};
 
        //initialize the search, setup the current object
        tableSearch.init = function() {
            //define the properties I want on the tableSearch object
            this.Rows = document.getElementById('data').getElementsByTagName('TR');
            this.RowsLength = tableSearch.Rows.length;
            this.RowsText = [];
            
            //loop through the table and add the data to
            for (var i = 0; i < tableSearch.RowsLength; i++) {
                this.RowsText[i] = (tableSearch.Rows[i].innerText) ? tableSearch.Rows[i].innerText.toUpperCase() : tableSearch.Rows[i].textContent.toUpperCase();
            }
        }
 
        //onlys shows the relevant rows as determined by the search string
        tableSearch.runSearch = function() {
            //get the search term
            this.Term = document.getElementById('textBoxSearch').value.toUpperCase();
            
            //loop through the rows and hide rows that do not match the search query
            for (var i = 0, row; row = this.Rows[i], rowText = this.RowsText[i]; i++) {
                row.style.display = ((rowText.indexOf(this.Term) != -1) || this.Term === '') ? '' : 'none';
            }
        }
 
        //runs the search
        tableSearch.search = function(e) {
            //checks if the user pressed the enter key, and if they did then run the search
            var keycode;
            if (window.event) { keycode = window.event.keyCode; }
            else if (e) { keycode = e.which; }
            else { return false; }
            if (keycode == 13) {
                tableSearch.runSearch();
            }
            else { return false; }
        }
    </script>
</head>
 
 
<body onload="tableSearch.init();">
    <table border="0" cellpadding="0" cellspacing="0">
        <tbody>
            <tr>
                <td>
                    <input type="text" size="30" maxlength="1000" value="" id="textBoxSearch" onkeyup="tableSearch.search(event);" />
                    <input type="button" value="Search" onclick="tableSearch.runSearch();" />
                </td>
            </tr>
        </tbody>
    </table>
    <br />
    <table border="1" cellpadding="2" cellspacing="0">
        <tr>
            <th>ID</th>
            <th>First Name</th>
            <th>Surname</th>
            <th>Website</th>
        </tr>
        <tbody id="data">
<?php
// regel voor contact maken database
$connect = mysql_connect('localhost','username','password');
 
mysql_select_db("testdatabase");
 
//regel voor selecteren uit database en laten zien op de webpagina 
$query = mysql_query("select * FROM testtabel LIMIT 0, 30 ");
if(!$query)
{
  echo mysql_error();
}
else
{
  while($rows = mysql_fetch_assoc($query)):
        echo '<tr>
  <td>'. $rows['id'] .'</td>
  <td>'. $rows['naam'] .'</td>
  <td>'. $rows['woonplaats'] .'</td>
  <td>'. $rows['naam'] .'</td>
</tr>';
        endwhile;
}
?>
        </tbody>
    </table>
</body>
</html>
 
Laatst bewerkt:
Ik was vergeten de "else" af te sluiten, op regel 97 zou een } moeten komen (Zie aangepaste code hierboven)
 
Hoi Tha, bedankt voor je reactie.

Heb getracht om de zoekfunctie zoals jij hem hebt gemaakt in mjn PHP te zetten met de tabel die wat betreft layout klaar is http://www.rvvweb.nl/RJ/totaal, alleen nog de zoekfunctie, maar dit lukt niet...?

Het mooiste zou zijn als het invulveld start boven de rode header en hij te verplaatsen is.

Hoop dat dit mogelijk is,
Groet,
Richard


PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <title>TJou Pagina naam</title>
        <style type="text/css">
/*----------Text Styles----------*/
.ws12 {font-size: 16px;}
.wpmd {font-size: 13px;font-family: 'Arial';font-style: normal;font-weight: normal;}

{
 margin-top: 1px;
 margin-bottom: 1px;
}
        </style>		
    </head>
 
<body>
<div id="html1" style="position:absolute; overflow:hidden; left:10px; top:5px; width:960px; height:350px; z-index:0">
<div id="table1" style="position:absolute; overflow:hidden; left:53px; top:22px; width:594px; height:168px; z-index:0">
<div class="wpmd">

<div><TABLE cellspacing = "4px" cellpadding = "2px" bgcolor="#FFFFFF" border=0 bordercolorlight="#FFFFFF" bordercolordark="#FFFFFF">
<TR valign=top>

<TD width=132 bgcolor="#FF0000"><div class="wpmd">
<div align=center><font color="#FFFFFF" class="ws12"><B>Art.Nr.</B></font></div>
</div>
</TD>

<TD width=132 bgcolor="#FF0000"><div class="wpmd">
<div align=center><font color="#FFFFFF" class="ws12"><B>Type</B></font></div>
</div>
</TD>

<TD width=31>
</TD>

<TD width=132 bgcolor="#0000FF"><div class="wpmd">
<div align=center><font color="#FFFFFF" class="ws12"><B>Art.Nr.</B></font></div>
</div>
</TD>

<TD width=132 bgcolor="#0000FF"><div class="wpmd">
<div align=center><font color="#FFFFFF" class="ws12"><B>Type</B></font></div>
 </div>
 </TD>
 
</body> 
 
    <body>
        <?php // regel voor contact maken database
        $con = mysql_connect("localhost", "Username", "Password");
        if (!$con) {
            die('Could not connect: ' . mysql_error());
        }
 
        mysql_select_db("testdatabase", $con);
 
        $result = mysql_query("SELECT * FROM testtabel");
        
        while ($row = mysql_fetch_array($result)) {
        ?>
        <TR>
        <TD><?php echo $row['naam']; ?>
        <TD><?php echo $row['woonplaats']; ?>
        <TD>
		<TD><?php echo $row['naam2']; ?>
        <TD><?php echo $row['woonplaats2']; ?>
        </TR>
        <?php } ?>
        </table>
        <?php
        mysql_close($con);
        ?>
    </body>
</html>
 
De javascript functie zorgt voor het zoeken in de tabel, die heb je in deze code er uit gehaald dus zoekt hij niet meer.

De code zoals deze is zorgt er voor dat alles uit je database in een HTML tabel wordt gestopt die je vervolgens via het zoekveld (en de gekoppelde javascript functies) in die tabel kan zoeken.
PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>JavaScript Search</title>
    <style type="text/css">
        body { font-family: Arial; font-size: 11px; }
        td { font-family: Arial; font-size: 11px; }
        th { font-family: Arial; font-size: 11px; background-color: #c8c8c8; }
        input { font-family: Arial; font-size: 11px; }
    </style>
    <script language="javascript" type="text/javascript">
        //define the table search as an object, which can implement both functions and properties
        window.tableSearch = {};
 
        //initialize the search, setup the current object
        tableSearch.init = function() {
            //define the properties I want on the tableSearch object
            this.Rows = document.getElementById('data').getElementsByTagName('TR');
            this.RowsLength = tableSearch.Rows.length;
            this.RowsText = [];
            
            //loop through the table and add the data to
            for (var i = 0; i < tableSearch.RowsLength; i++) {
                this.RowsText[i] = (tableSearch.Rows[i].innerText) ? tableSearch.Rows[i].innerText.toUpperCase() : tableSearch.Rows[i].textContent.toUpperCase();
            }
        }
 
        //onlys shows the relevant rows as determined by the search string
        tableSearch.runSearch = function() {
            //get the search term
            this.Term = document.getElementById('textBoxSearch').value.toUpperCase();
            
            //loop through the rows and hide rows that do not match the search query
            for (var i = 0, row; row = this.Rows[i], rowText = this.RowsText[i]; i++) {
                row.style.display = ((rowText.indexOf(this.Term) != -1) || this.Term === '') ? '' : 'none';
            }
        }
 
        //runs the search
        tableSearch.search = function(e) {
            //checks if the user pressed the enter key, and if they did then run the search
            var keycode;
            if (window.event) { keycode = window.event.keyCode; }
            else if (e) { keycode = e.which; }
            else { return false; }
            if (keycode == 13) {
                tableSearch.runSearch();
            }
            else { return false; }
        }
    </script>
</head>
 
 
<body onload="tableSearch.init();">
    <table border="0" cellpadding="0" cellspacing="0">
        <tbody>
            <tr>
                <td>
                    <input type="text" size="30" maxlength="1000" value="" id="textBoxSearch" onkeyup="tableSearch.search(event);" />
                    <input type="button" value="Search" onclick="tableSearch.runSearch();" />
                </td>
            </tr>
        </tbody>
    </table>
    <br />
    <table border="1" cellpadding="2" cellspacing="0">
        <tr>
            <th>ID</th>
            <th>Store name</th>
        </tr>
        <tbody id="data">
<?php
// regel voor contact maken database
// Vervangen door je eigen gegevens
$connect = mysql_connect('localhost','gebruiker','wachtwoord');

// Verbinding maken met de juiste database
mysql_select_db("database");
 
//regel voor selecteren uit database en laten zien op de webpagina 
$query = mysql_query("SELECT * FROM tabel");
if(!$query)
{
  echo mysql_error();
}
else
{
  while($rows = mysql_fetch_assoc($query)):
        echo '<tr>
  <td>'. $rows['veld1'] .'</td>
  <td>'. $rows['veld2'] .'</td>
</tr>';
        endwhile;
}
?>
        </tbody>
    </table>
</body>
</html>
Voor je andere vraag zie ik dat je hier al een andere thread voor hebt lopen, het lijkt mij handiger dat je daar verder gaat: http://www.helpmij.nl/forum/showthr...en-headers-met-achtergrond-kleur-en-tekst-wit
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan