<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?

Member Avatar

diafol

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.

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.

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)

Member Avatar

diafol

Lazarus speaks!