Datagrid in PHP opnieuw renderen d.m.v. ajax

[gibsonneke]

Als weergave van een selectie uit mijn database maak ik in PHP een datagrid aan die alle waarden in een tabel met rijen weergeeft.

Nu heb ik daaraan een sorteerfunctie toegevoegd maar telkens ik deze functie aanroep wordt mijn pagina gerefreshed. (logisch wat ik Post iets)

Is het mogelijk om via Ajax enkel de datagrid te vervesen en niet de gehele pagina? (er werd mij verteld dat dit niet kan maar ik twijfel daar toch aan)

Indien dit mogelijk is, hoe moet dit dan worden gedaan? (heb geen ervaring met ajx in combinatie met PHP)

 

[ErikBooy007]

De meest eenvoudige manier is om PHP het hele datagrid te laten echoën. Dan maak je een aparte pagina ALLEEN voor het creeëren van die tabel.

Bijvoorbeeld: tabel.php

Die geef je dan met een $_GET variabele de sorteerrichting en het sorteerveld op. Om de initiële tabel weer te geven, include je die dan gewoon ergens in een div.

<div id="datagrid">
  <?php include ( "tabel.php?veld=id&richting=ASC" );
</div>

Om dan de tabel te vernieuwen kun je een beetje javascript gebruiken (AJAX is gewoon een veredelde vorm van JavaScript).

Dat ziet er ongeveer zo uit:

<script type="text/javascript">

function maakXMLObj()
{
   var objXml = false; 
   try
   {
    // Firefox, Opera 8.0+, Safari
    objXml = new XMLHttpRequest();
   }
   catch (e)
   {
    // Internet Explorer
     try
     {
       objXml = new ActiveXObject("Msxml2.XMLHTTP");
     }
     catch (e)
     {
       try
       {
         objXml = new ActiveXObject("Microsoft.XMLHTTP");
       }
         catch (e)
       {
         alert("Uh-ohw, je browser ondersteund geen AJAX!");
         return false;
       }
     }
   }
   return objXml;
}

function changeDataGrid ( veld, richting ) {
  var xmlHttp = maakXMLObj();
  xmlHttp.open ( "GET", "tabel.php?veld=" + veld + "&richting=" + richting, true) ;
  xmlHttp.onreadystatechange = function(){
    if ( xmlHttp.readyState = 4 && xmlHttp.status = 200 ) {
      document.getElementById( 'datagrid' ).innerHTML = xmlHttp.responseText;
    }
  }

}

</script>

Kijk overigens voor een uitgebreide en goede uitleg over AJAX op http://www.helpmij.nl/forum/showthread.php?t=410639 (met dank aan Vegras).

Dan moet je nog linkjes maken om de tabel te updaten:

<a href="#" onclick="changeDataGrid( 'naamVanVeld' , 'richting' )">Sorteer</a>

Wat dus het belangrijkste is is dat je zorgt dat tabel.php afhankelijk van de variabelen die je meegeeft de juiste tabel opbouwd ($_GET[ 'veld' ] & $_GET[ 'richting' ]);

 

[gibsonneke]

De meest eenvoudige manier is om PHP het hele datagrid te laten echoën. Dan maak je een aparte pagina ALLEEN voor het creeëren van die tabel.

Bijvoorbeeld: tabel.php

Die geef je dan met een $_GET variabele de sorteerrichting en het sorteerveld op. Om de initiële tabel weer te geven, include je die dan gewoon ergens in een div.

<div id="datagrid">
  <?php include ( "tabel.php?veld=id&richting=ASC" );
</div>

Om dan de tabel te vernieuwen kun je een beetje javascript gebruiken (AJAX is gewoon een veredelde vorm van JavaScript).

Dat ziet er ongeveer zo uit:

<script type="text/javascript">

function maakXMLObj()
{
   var objXml = false; 
   try
   {
    // Firefox, Opera 8.0+, Safari
    objXml = new XMLHttpRequest();
   }
   catch (e)
   {
    // Internet Explorer
     try
     {
       objXml = new ActiveXObject("Msxml2.XMLHTTP");
     }
     catch (e)
     {
       try
       {
         objXml = new ActiveXObject("Microsoft.XMLHTTP");
       }
         catch (e)
       {
         alert("Uh-ohw, je browser ondersteund geen AJAX!");
         return false;
       }
     }
   }
   return objXml;
}

function changeDataGrid ( veld, richting ) {
  var xmlHttp = maakXMLObj();
  xmlHttp.open ( "GET", "tabel.php?veld=" + veld + "&richting=" + richting, true) ;
  xmlHttp.onreadystatechange = function(){
    if ( xmlHttp.readyState = 4 && xmlHttp.status = 200 ) {
      document.getElementById( 'datagrid' ).innerHTML = xmlHttp.responseText;
    }
  }

}

</script>

Kijk overigens voor een uitgebreide en goede uitleg over AJAX op http://www.helpmij.nl/forum/showthread.php?t=410639 (met dank aan Vegras).

Dan moet je nog linkjes maken om de tabel te updaten:

<a href="#" onclick="changeDataGrid( 'naamVanVeld' , 'richting' )">Sorteer</a>

Wat dus het belangrijkste is is dat je zorgt dat tabel.php afhankelijk van de variabelen die je meegeeft de juiste tabel opbouwd ($_GET[ 'veld' ] & $_GET[ 'richting' ]);

Bedankt voor uw antwoord.

Misschien heb ik het echter niet duidelijk gezegd maar ik heb reeds een tabel met sorteer mogelijkheid en pagination. Dit is op dit moment allemaal in één pagina (zie onderstaande code)

	<?php
		//assign the page variable
		if ((!empty($_GET['subpage']))&& (intval($_GET['subpage']) != 0)){
			$page = $_GET['subpage']; //using the get method
		} else {
			$page = 1; //if we don't have a page number then assume we are on the first page
		}
		
		if(isset($_GET['sortby'])){
		    $sort = $_GET['sortby'];
		}else{
		    $sort = "id";
		}
		
		if(isset($_GET['order'])){
		    $order = $_GET['order'];
		}else{
		    $order = "asc";
		}
		
		$rows = mysql_numrows(get_all_presentations());
		
		$rows_per_page = 10;
		$pages = ceil($rows/$rows_per_page);
		
		$result = get_all_presentations_with_pagination($page, $rows_per_page, $sort, $order);
		
		echo("<table class=\"table_datagrid\" id=\"table_datagrid_presentation\">");
			echo("<thead>");
				echo("<tr>");
				    echo("<th scope=\"col\">Id <a href=\"index.php?page=presentation&subpage={$page}&sortby=id&order=asc\" title=\"Sort ascending by id\" id=\"image_asc\"><img src=\"../images/asc.png\" /></a><a href=\"index.php?page=presentation&subpage={$page}&sortby=id&order=desc\" title=\"Sort descending by id\" id=\"image_dsc\"><img src=\"../images/dsc.png\" /></a></th>");
				    echo("<th scope=\"col\">Name <a href=\"index.php?page=presentation&subpage={$page}&sortby=name&order=asc\" title=\"Sort ascending by name\" id=\"image_asc\"><img src=\"../images/asc.png\" /></a><a href=\"index.php?page=presentation&subpage={$page}&sortby=name&order=desc\" title=\"Sort descending by name\" id=\"image_dsc\"><img src=\"../images/dsc.png\" /></a></th>");
				    echo("<th scope=\"col\">Created By <a href=\"index.php?page=presentation&subpage={$page}&sortby=userid&order=asc\" title=\"Sort ascending by author\" id=\"image_asc\"><img src=\"../images/asc.png\" /></a><a href=\"index.php?page=presentation&subpage={$page}&sortby=userid&order=desc\" title=\"Sort descending by author\" id=\"image_dsc\"><img src=\"../images/dsc.png\" /></a></th>");
				    echo("<th scope=\"col\">Created On <a href=\"index.php?page=presentation&subpage={$page}&sortby=date_created&order=asc\" title=\"Sort ascending by created date\" id=\"image_asc\"><img src=\"../images/asc.png\" /></a><a href=\"index.php?page=presentation&subpage={$page}&sortby=date_created&order=desc\" title=\"Sort descending by created date\" id=\"image_dsc\"><img src=\"../images/dsc.png\" /></a></th>");
				    echo("<th scope=\"col\">Details<img id=\"image_asc\" src=\"../images/default.png\" /></th>");
				    echo("<th scope=\"col\">Delete <img id=\"image_asc\" src=\"../images/default.png\" /></th>");
                                echo("</tr>");
			echo("</thead>");
			
			echo("<tbody>");
					while ($array = mysql_fetch_array($result)){
						$username = get_user_by_id($array['userid']);
						
						echo("<tr>");
						echo("<td>" . $array['id'] . "</td><td>" . $array['name'] . "</td><td>" . $username['username'] . "</td><td>" . date("Y/m/d", strtotime($array['date_created'])) . "</td>");
						echo("<td><a href=\"#\" id=\"details\" title=\"View details of the presentation\" onclick=\"window.open('presentation_details.php?details={$array['id']}', 'Presentation', 'scrollbars=1, menubar=0, directories=0, resizable=1, location=0, status=0, width=800, height=600'); return false\"><img src=\"../images/page_preview.png\" /></a></td>");
						echo("<td>");
						    if(($_SESSION['username'] == $username['username']) || ($_SESSION['usertype'] == 'Admin')){echo("<a href=\"index.php?page=presentation&sortby={$sort}&order={$order}&delete={$array['id']}&notification=presentationdeletedfailed\" title=\"Delete the presentation\" id=\"delete\" onclick=\"return confirm('Are you sure that you want to delete this presentation?');\"><img id=\"delete\" src=\"../images/delete.png\" /></a>");};
						echo("</td>");
                                                echo("</tr>");
					}
			echo("</tbody>");
			
			echo("<tfoot>");
				echo("<tr>");
					echo("<td colspan=\"7\">");
					echo(generate_links_pagination($page, $pages, "presentation", $sort, $order));
					echo("</td>");
				echo("</tr>");
			echo("</tfoot>");
		echo("</table>");
?>

Is het nu de bedoeling dat ik de eigenlijke tabel (alles tussen de <tabel> tags op een andere pagina plaats?

Hoe zou het dan concreet kunnen werken met die pagination?

 

[ErikBooy007]

Tsja, met de pagination weet ik het ook niet. Dat maakt het wel een flink stukje lastiger.

 

[gibsonneke]

Tsja, met de pagination weet ik het ook niet. Dat maakt het wel een flink stukje lastiger.

Verder krijg ik bij dit ook een fout

if ( xmlHttp.readyState = 4 && xmlHttp.status = 200 ) {

invalid assignment

enig idee wat het probleem is?

 

[ErikBooy007]

Oeps, dat moet zijn:

if ( xmlHttp.readyState == 4 && xmlHttp.status == 200 ) {