Datalijst

Status
Niet open voor verdere reacties.
S

sandcorn

Gebruiker
Lid geworden
25 aug 2010
Berichten
16
URL: http://www.scornelis.be/S-LlnAdm/cos.php

Stel: ik klik 2 leerlingen aan uit de lijst (zie URL), nl: Jordy en Bram
Bij het klikken op de knop "Zieken" zou het volgende moeten gebeuren:

1) Het aantal zieken zou onder de tabel moeten verschijnen.
2) Alsook de namen "Jordy" en "Bram" zou onder de tabel moeten verschijnen.

Ik heb al het één en ander uitgeprobeerd, maar dat blijkt niet te werken.

Wie kan helpen?
Alvast bedankt!!

Hieronder vind je mijn code:

Code: 
<?php	session_start(); include("../connectie.php");	?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title></title>
<link rel="stylesheet" type="text/css" href="css/jquery.dataTables.css">
<style type="text/css" class="init"></style>
<script type="text/javascript" language="javascript" src="js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() 
{	var table = $('#example').DataTable();
	$('#example tbody').on( 'click', 'tr', function () 	{	$(this).toggleClass('selected');	} );
	$('#rednas').click( function () 					{	alert('Er is/zijn '+ table.rows('.selected').data().length +' zieke(n).' );	} );
	$('#btnWijzig').click( function Test() 				{	document.write('Er is/zijn '+ table.rows('.selected').data().length +' zieke(n).' );	} ); 
} );
</script>
</head>
<body class="dt-example">
	<div class="container">
		<section>
   		<button id="rednas">Row count</button><br/><input name="btnWijzig"  type="submit" id="btnWijzig" value="Zieken" /><br/>                          
		<table id="example" class="display" cellspacing="0">
		<thead><tr><th>Naam</th><th>Klas</th></tr></thead><tfoot><tr><th>Naam</th><th>Klas</th></tr></tfoot>
		<tbody><?php	$resAdm = mysql_query ("select * from tbl1415COSGeg");
						if(mysql_num_rows($resAdm) > 0)
						{ while ($row = mysql_fetch_array($resAdm)) { echo " <tr><td>".$row['Voornaam']." ".$row['Achternaam']."</td><td>".$row['Klas']."</td></tr>"; } } ?>
		</tbody>
        </table>
		</section>
	</div>
</body>
</html>
 
Met document.write wordt de inhoud van de pagina overschreven, dus de tabel verdwijnt. Wat je kunt doen is onder de tabel een leeg divje zetten, met, bijvoorbeeld id="message". In plaats van document.write gebruik je dan
Code: 
$('#message').text('Er is/zijn '+ table.rows('.selected').data().length +' zieke(n).')
Daarmee wordt de boodschap in dat divje geplaatst en blijft de rest van de pagina intact.
 
Laatst bewerkt:
Alvast bedankt voor de snelle reactie!
Ik heb het even aangepast, zoals je schreef.

[JS]<script type="text/javascript" language="javascript" class="init">
$(document).ready(function()
{ var table = $('#example').DataTable();
$('#example tbody').on( 'click', 'tr', function () { $(this).toggleClass('selected'); } );
$('#rednas').click( function () { alert('Er is/zijn '+ table.rows('.selected').data().length +' zieke(n).' ); } );
$('#btnWijzig').click( function Test() { $(#message´).text('Er is/zijn '+ table.rows('.selected').data().length +' zieke(n).'); } );
} );
</script>[/JS]

Mijn programma heeft weer dat een fout zit in die regel. Ik zie jammer genoeg de fout niet :-(.

Bedankt!
 
Da's mijn fout, het moet $('#message') zijn (slordig tikwerk).
 
Geen probleem. Dat werkt nu, super bedankt :-).
Ik zou nu alleen graag nog de namen van die zieken daarbij krijgen :s. Enig idee?
 
Je gebruikt een flinke plugin bij die tabel, ik zou eerst even in de documentatie kijken of die je kan helpen, dat werkt vaak beter dan zelf iets klussen. Mocht dat niet zo zijn...

Je weet welke rijen er geselecteerd zijn, en je weet waar in die rijen de naam van de zieke staat, het enige wat je hoeft te doen is door de geselecteerde rijen heen loopen en de namen ophalen. Bijvoorbeeld.
Code: 
var zieken = 'De volgende mensen zijn ziek: ';
$(.dataTable .selected).each(function(){
  zieken += $(this).find('.zieken').text()+' ';
});
de variabele zieken kun je dan aan je boodschap toevoegen.

Niet getest, maar het zou moeten werken.
 
Thanks!
Mijn editor heeft een foutmelding in de laatste regel :s

[JS]<script type="text/javascript" language="javascript" class="init">
$(document).ready(function()
{ var table = $('#example').DataTable();
$('#example tbody').on( 'click', 'tr', function () { $(this).toggleClass('selected'); } );
$('#rednas').click( function () { alert('Er is/zijn '+ table.rows('.selected').data().length +' zieke(n).' ); } );
$('#btnWijzig').click( function Test() { $('#message').text('Er is/zijn '+ table.rows('.selected').data().length +' zieke(n).'); } );
var zieken = 'De volgende mensen zijn ziek: ';
$(.DataTable.selected).each(function() { zieken += $(this).find('.zieken').text()+' '; });
} );
</script>[/JS]
 
Uch, ik heb duidelijk m'n koffie nog niet gehad, bij de selector ontbraken de '', het moet dus dit zijn
Code: 
var zieken = 'De volgende mensen zijn ziek: ';
$('.dataTable .selected').each(function(){
  zieken += $(this).find('.sorting_1').text()+' ';
});

Of, wat simpeler
Code: 
var zieken = 'De volgende mensen zijn ziek: ';
$('.dataTable .selected .sorting_1').each(function(){
  zieken += $(this).text()+' ';
});

NB: dus met een kleine d, en een spatatie tussen .dataTable en .selected.
 
Thank! Hopelijk heeft je koffie gesmaakt :-).

Ik zie waarschijnlijk nog het één en ander over het hoofd...

[JS]<script type="text/javascript" language="javascript" class="init">
$(document).ready(function()
{ var table = $('#example').DataTable();
$('#example tbody').on( 'click', 'tr', function () { $(this).toggleClass('selected'); } );

var zieken = 'De volgende mensen zijn ziek: ';
$('.dataTable .selected .sorting_1').each(function(){ zieken += $(this).text()+' '; });

$('#btnWijzig').click( function Test() { $('#message').text('Er is/zijn '+ table.rows('.selected').data().length +' zieke(n).' .zieken); } );
} );
</script>[/JS]
 
Zonder te weten wat de foutmelding is het wat lastig. maar ik denk dat het probleem in die laatste .zieken zit. Als je bedoeling daar was om de variabele zieken aan de tekst toe te voegen, had je +zieken moeten gebruiken.
 
Aangepast :-)

Die zin "" komt er inderdaad bij. Enkel de namen ontbreken ? :(

HTML: 
<?php	session_start(); include("../connectie.php");	?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title></title>
<link rel="stylesheet" type="text/css" href="css/jquery.dataTables.css">
<style type="text/css" class="init"></style>
<script type="text/javascript" language="javascript" src="js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() 
{	var table = $('#example').DataTable();
	$('#example tbody').on( 'click', 'tr', function () 	{	$(this).toggleClass('selected');	} );
	 
	var zieken = 'De volgende mensen zijn ziek: ';
	$('.dataTable .selected .sorting_1').each(function(){	zieken += $(this).text()+' '; });
	
	$('#btnWijzig').click( function Test() 				{	$('#message').text('Er is/zijn '+ table.rows('.selected').data().length +' zieke(n).' + zieken);	} );
} );
</script>
</head>
<body class="dt-example">
	<div class="container">
		<section>
   		<input name="btnWijzig"  type="submit" id="btnWijzig" value="Zieken" /><br/>                          
		<table id="example" class="display" cellspacing="0">
		<thead><tr><th>Naam</th><th>Klas</th></tr></thead><tfoot><tr><th>Naam</th><th>Klas</th></tr></tfoot>
		<tbody><?php	$resAdm = mysql_query ("select * from tbl1415COSGeg");
					if(mysql_num_rows($resAdm) > 0)
					{ while ($row = mysql_fetch_array($resAdm)) { echo " <tr><td>".$row['Voornaam']." ".$row['Achternaam']."</td><td>".$row['Klas']."</td></tr>"; } } ?>
		</tbody>
        </table><br/>
        <div id="message"></div>
		</section>
	</div>
    
</body>
</html>
 
De lijst met zieken wordt nu aangemaakt bij het laden van de pagina, dus nog voordat je ergens op geklikt hebt. De lijst moet worden aangemaakt in de functie die wordt aangeroepen bij het klikken op de knop. Die functie hoeft overigens geen naam te hebben, hij wordt immers niet bij naam aangeroepen.
 
Precies wat ik zei, de lijst moet later worden aangemaakt, zo dus
Code: 
$(document).ready(function() 
{   var table = $('#example').DataTable();
    $('#example tbody').on( 'click', 'tr', function ()  {   $(this).toggleClass('selected');    } );
         
    $('#btnWijzig').click( function (){ 
             var zieken = 'De volgende mensen zijn ziek: ';
             $('.dataTable .selected .sorting_1').each(function(){   zieken += $(this).text()+' '; });

             $('#message').text('Er is/zijn '+ table.rows('.selected').data().length +' zieke(n).' + zieken); 
    } );
} );
 
You make my day!
Misschien moet ik je voorbeeld volgen en mij volgieten met koffie ;-)
 
Mag ik jou nog iets vragen...

Kan ik e waarde uit "Afwezigen" - <div id="Afwezigen"> ook doorsturen naar een php variabele? Zodat ik dat op termijn kan wegschrijven naar een databank.

Thanks!

HTML: 
<?php	session_start(); include("../connectie.php");	?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title></title>
<link rel="stylesheet" type="text/css" href="css/jquery.dataTables.css">
<style type="text/css" class="init"></style>
<script type="text/javascript" language="javascript" src="js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() 
{   var table = $('#example').DataTable();
    $('#example tbody').on( 'click', 'tr', function ()  {   $(this).toggleClass('selected');    } );        
    $('#btnWijzig').click( function (){ 
             var zieken = '';
             $('.dataTable .selected .sorting_1').each(function(){   zieken += $(this).text()+', '; });
             $('#message').text('Er is/zijn '+ table.rows('.selected').data().length +' zieke(n).' + zieken); 
			 $('#Afwezigen').text(zieken);
    } );
} );
</script>
</head>
<body class="dt-example">
	<div class="container">
		<section>                          
		<table id="example" class="display" cellspacing="0">
		<thead><tr><th>Naam</th><th>Klas</th></tr></thead><tfoot><tr><th>Naam</th><th>Klas</th></tr></tfoot>
		<tbody><?php	$resAdm = mysql_query ("select * from tbl1415COSGeg");
					if(mysql_num_rows($resAdm) > 0)
					{ while ($row = mysql_fetch_array($resAdm)) { echo " <tr><td>".$row['Voornaam']." ".$row['Achternaam']."</td><td>".$row['Klas']."</td></tr>"; } } ?>
		</tbody>
        </table><br/><input name="btnWijzig"  type="submit" id="btnWijzig" value="Zieken" /><br/><div id="message"></div><br/><div id="Afwezigen"></div>
		</section>
	</div>
</body>
</html>
 
Dat kan zeker, aangezien je al jQuery gebruikt is het het makkelijkst om de $.post() of de $.get() functie te gebruiken. Daarmee kun je één of meerdere waardes per POST of GET naar de server sturen. In JS PHP script kun je die waardes dan uitlezen in $_POST of $_GET.
 
Kan jij mij ook concreet zeggen hoe ik dat moet doen? Ik deed dit eigenlijk nog nooit :s

HTML: 
<?php	session_start(); include("../connectie.php");	?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title></title>
<link rel="stylesheet" type="text/css" href="css/jquery.dataTables.css">
<style type="text/css" class="init"></style>
<script type="text/javascript" language="javascript" src="js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() 
{   var table = $('#example').DataTable();
    $('#example tbody').on( 'click', 'tr', function ()  {   $(this).toggleClass('selected');    } );        
    $('#btnWijzig').click( function (){ 
             var zieken = '';
             $('.dataTable .selected .sorting_1').each(function(){   zieken += $(this).text()+', '; });
             $('#message').text('Er is/zijn '+ table.rows('.selected').data().length +' zieke(n).' + zieken); 
			 $('#Afwezigen').text(zieken);
    } );
} );
</script>
</head>
<form id="frmAdministratie" name="frmAdministratie" method="post" action="">
<body class="dt-example">
	<div class="container">
		<section>                          
		<table id="example" class="display" cellspacing="0">
		<thead><tr><th>Naam</th><th>Klas</th></tr></thead><tfoot><tr><th>Naam</th><th>Klas</th></tr></tfoot>
		<tbody><?php	$resAdm = mysql_query ("select * from tbl1415COSGeg");
					if(mysql_num_rows($resAdm) > 0)
					{ while ($row = mysql_fetch_array($resAdm)) { echo " <tr><td>".$row['Voornaam']." ".$row['Achternaam']."</td><td>".$row['Klas']."</td></tr>"; } } ?>
		</tbody>
        </table><br/><input name="btnWijzig"  type="submit" id="btnWijzig" value="Zieken" /><br/><div id="message"></div><br/><div id="Afwezigen"></div>
		</section>
	</div>
</body>
</form>
</html>
 
Aan de javascript kant ziet dat er zo uit.
Code: 
   $('#btnWijzig').click( function (){ 
             var zieken = '';
             $('.dataTable .selected .sorting_1').each(function(){   zieken += $(this).text()+', '; });
             $('#message').text('Er is/zijn '+ table.rows('.selected').data().length +' zieke(n).' + zieken); 
             $('#Afwezigen').text(zieken);
             $.post('pagina.php', {ziekenLijst:zieken}, function(){             

             });
    } );
Waarbij pagina.php de locatie is van je PHP script.

In dat PHP script kun je met $ziekenLijst = $_POST['ziekenLijst']; de lijst ophalen. Als je die wilt wegschrijven is het een goed idee om hem door de functie mysql_real_escape_string() te halen om SQL injectie te voorkomen (daarbij voeren kwaadwillenden hun code uit op jouw database).
 
Als ik het goed begrijp ...
Ik heb het volgende aangepast:

HTML: 
<?php   session_start(); include("../connectie.php");   ?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title></title>
<link rel="stylesheet" type="text/css" href="css/jquery.dataTables.css">
<style type="text/css" class="init"></style>
<script type="text/javascript" language="javascript" src="js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() 
{   var table = $('#example').DataTable();
    $('#example tbody').on( 'click', 'tr', function ()  {   $(this).toggleClass('selected');    } );        
    $('#btnWijzig').click( function (){ 
             var zieken = '';
             $('.dataTable .selected .sorting_1').each(function(){   zieken += $(this).text()+', '; });
             $('#message').text('Er is/zijn '+ table.rows('.selected').data().length +' zieke(n).' + zieken); 
             $('#Afwezigen').text(zieken);
             $.post('pagina.php', {ziekenLijst:zieken}, function(){             
             });
    } );
} );
</script>
</head>
<body class="dt-example">
    <div class="container">
        <section>                          
        <table id="example" class="display" cellspacing="0">
        <thead><tr><th>Naam</th><th>Klas</th></tr></thead><tfoot><tr><th>Naam</th><th>Klas</th></tr></tfoot>
        <tbody><?php    $resAdm = mysql_query ("select * from tbl1415COSGeg");
                    if(mysql_num_rows($resAdm) > 0)
                    { while ($row = mysql_fetch_array($resAdm)) { echo "<tr><td>".$row['Voornaam']." ".$row['Achternaam']."</td><td>".$row['Klas']."</td></tr>"; } } ?>
        </tbody>
        </table><br/><input name="btnWijzig"  type="submit" id="btnWijzig" value="Zieken" /><br/>
        <div id="message"></div>
        </section>
    </div>
</body>
</html>

Ik heb ook de pagina 'pagina.php' aangemaakt:

HTML: 
<?php   session_start(); include("../connectie.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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Naamloos document</title>
</head>
<body>
<?php	$ziekenLijst = $_POST['ziekenLijst'];
		echo $ziekenLijst;?>
</body>
</html>

Er gebeurt nog altijd iets niet :s
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan