How to link database to javascript?

Question

lf.gene 0 Junior Poster in Training

13 Years Ago

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>PicNet Table Filter Demo</title>
    <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>    		    
	<script type="text/javascript" src="picnet.table.filter.min.js"></script>	
	
	
    <script type="text/javascript">
        $(document).ready(function() {
            //  Randomly Create Data Rows
            for (var i = 0; i < 50; i++) {
                var tr = $("<tr>" +
					"<td>Value" + Math.floor(Math.random() * 500) + "</td>" + 
					"<td>" + Math.floor(Math.random() * 500) + " </td>" + 
					"<td>" + (Math.random() > 0.5 ? "yes" : "no") + "</td>" + 
					"<td>" + (Math.random() <= 0.333 ? "Item 1" : Math.random() > 0.5 ? "Item 2" : "Item 3") + "</td>" + 
					"<td></td>" +
					"<td>" + parseInt(10 + Math.random() * 18) + "/" + parseInt(10 + Math.random() * 2) + "/2009</td>" + 					
					"<td></td>" +
					"</tr>");
                $('#demotable1 tbody').append(tr);
            }
			
			for (var i = 0; i < 50; i++) {
                var tr = $("<tr><td>Value(2) " + Math.floor(Math.random() * 500) + "</td></tr>");
                $('#demotable2 tbody').append(tr);
            }

            // Initialise Plugin
            var options1 = {
                additionalFilterTriggers: [$('#onlyyes'), $('#onlyno'), $('#quickfind')],
                clearFiltersControls: [$('#cleanfilters')],
                matchingRow: function(state, tr, textTokens) {
                    if (!state || !state.id) { return true; }					
					var val =  tr.children('td:eq(2)').text();
					switch (state.id) {
						case 'onlyyes': return state.value !== 'true' || val === 'yes';
						case 'onlyno': return state.value !== 'true' || val === 'no';
						default: return true;
					}
                }
            };

            $('#demotable1').tableFilter(options1);
			
			var grid2 = $('#demotable2');
			var options2 = {                
                filteringRows: function(filterStates) {										
					grid2.addClass('filtering');
                },
				filteredRows: function(filterStates) {      															
					grid2.removeClass('filtering');					
					setRowCountOnGrid2();
                }
            };			
			function setRowCountOnGrid2() {
				var rowcount = grid2.find('tbody tr:not(:hidden)').length;
				$('#rowcount').text('(Rows ' + rowcount + ')');										
			}
			
			grid2.tableFilter(options2); // No additional filters			
			setRowCountOnGrid2();
        });
    </script>
<style>
* {	font-family:arial;	font-size:8pt;}
table, td, th {	border: solid 1px silver; color:#666; padding:3px 5px 3px 5px}
th { background-color:#333; color:#fff; font-size:0.85em }
a {	color:gray; }
.filtering { background-color:light-gray}
#jqtf_filters {
	list-style:none;
	
	}
#jqtf_filters li {
	display:inline-block; 
	position:relative; 
	float:left;
	margin-bottom:20px
}

</style>
</head>
<body>    
	<b>Additional Filters for Table 1</b><br/>
    Only Show Yes: <input type="checkbox" id="onlyyes"/>        	
	Only Show No: <input type="checkbox" id="onlyno"/>
	<br/>    
	Quick Find: <input type="text" id="quickfind"/>
	<br/>
	<a id="cleanfilters" href="#">Clear Filters</a>
	<br/><b>Table 1</b><br/>
    <table id='demotable1'>
        <thead>
            <tr><th>Text Column 1</th><th>Number Column</th><th>Yes/No Column</th><th filter-type='ddl'>List Column</th><th style='width:100px;' filter='false'>No Filter</th><th>Date Column</th><th filter='false'>Empty</th></tr>
        </thead>
        <tbody>
        </tbody>
    </table>
	<br/><br/><b>Table 2 <span id='rowcount'></span></b><br/>
	
	<hr/>
	This plugin was developed by <a href='mailto:guido.tapia@picnet.com.au'>Guido Tapia</a> Manager for the <a href='http://www.picnet.com.au/software_development.html'>custom software development</a> branch of <a href='http://www.picnet.com.au'>PicNet</a>.More script and css style
: <a href="http://www.htmldrive.net/" title="HTML DRIVE - Free DHMTL Scripts,Jquery plugins,Javascript,CSS,CSS3,Html5 

Library">[url]www.htmldrive.net[/url] </a>
</body>
</html>

Hi all, i wonder is it possible to link my database into this script? Instead of using the random value that are created by the codes?

javascript jquery php sql

4 Contributors
5 Replies
269 Views
2 Months Discussion Span
Latest Post 13 Years Ago Latest Post by diafol

diafol

13 Years Ago

The question doesn't make much sense. Do you want php (or mysql) to create them when page is sent to the client? php/mysql cannot add numbers after the page leaves the server. Only a client-side language can change things thereafter. However, Ajax techniques can bring about changes without page refresh.

diafol

13 Years Ago

Lazarus speaks!

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

chrishea 182 Nearly a Posting Virtuoso · Answer 1 · 2011-01-14T00:17:03+00:00

Yes, you could use some php to read a database and plug values into the html but as per Ardav's note, it has to be done on the server side. You can't have Javascript talking directly to the database. If all you want is database data plugged in, then no problem, PHP can do that. If you want the Javascript to process that data before it is displayed, then you would probably need to have your PHP code plug it into Javascript variables in the code that JS could then access when it gets control. If you wanted something more dynamic, then you could probably do something with PHP and the database on one side and the Ajax / Javascript running in the browser sending it requests.

chrishea 182 Nearly a Posting Virtuoso · Answer 2 · 2011-01-14T00:52:43+00:00

Ajax may be far more complex than what you need but just in case, this is one example of using Ajax. I'm sure that you can find many others.

http://www.webreference.com/programming/javascript/kh/

cristianlf 0 Newbie Poster · Answer 3 · 2011-04-01T10:27:42+00:00

thats not that dificult I did it:
Example :

<html> 
 youre code here 
<?
   require('conection.php');

?>
<script type="text/javascript">
        $(document).ready(function() {
            //  Randomly Create Data Rows
          //  for (var i = 0; i < 50; i++)
<?
      $Query = 'select field,field2 from table';
      $result = mysql_query($Query);
      while($data = mysql_fetch_array($result))
    {

?>
           {
                var tr = $("<tr>" +
                    "<td>"+ <? echo $data['field']; ?> +"</td>" + 
                    "<td>"+ <? echo $data['field2']; ?> + " </td>" + 
                    "<td>" + (Math.random() > 0.5 ? "yes" : "no") + "</td>" + 
                    "<td>" + (Math.random() <= 0.333 ? "Item 1" : Math.random() > 0.5 ? "Item 2" : "Item 3") + "</td>" + 
                    "<td></td>" +
                    "<td>" + parseInt(10 + Math.random() * 18) + "/" + parseInt(10 + Math.random() * 2) + "/2009</td>" +                  
                    "<td></td>" +
                    "</tr>");
                $('#demotable1 tbody').append(tr);
<?
            }
?>
rest of the code

Regards,
Cristian Lopez (cristianlf)