11540 sujets

JavaScript, DOM et API Web HTML5

Bonjour à tous.


J'utilise datatables, sans aucun soucis.
Seulement ma table se remplit depuis une bdd de 9000 références !
Et sans passer par cette option "server_side" de datatables,
c'est beaucoup trop lent au remplissage de la table !

Car, arrivé au bout de la visualisation des 250 premiers éléments du tableau du bas de page (dans "example"), la page ne se recharge pas des 250 articles suivants... Il y en a pourtant plus de 9000 dans la bdd !

Pourquoi ?

L'idéal serait de remplir le tableau, en cascade, par flot de 250 records,
en fonction du défilement du scrolling de ce plugin datatables !

J'ai modifié le fichier "server_processing.php",
mais sans succès !

J'ai rajouté dans mon code jquery, les 3 dernières lignes. :

	$(document).ready(function() {
			$('#example').dataTable( {
				"sScrollY": "615px",
				"bPaginate": false,
				"bFilter": false,
				"bInfo": false,
				"bScrollCollapse": true,
				"BJQueryUI" : true,
				"aoColumnDefs": [ {
					"bVisible": false, "aTargets": colhidden
				} ],
				"sScrollX": "100%",
				"sScrollXInner": "100%",
				"bProcessing": true,
				"bServerSide": true,
				"sAjaxSource": "js/dt/server_processing.php",
				"sDom": "frtiS",
				"oScroller": {
					"loadingIndicator": true
				}
			} )
	} );


Pouvez-vous m'aider ?
Modifié par jytest (23 May 2013 - 23:19)
J'ai oublié de joindre la doc que j'utilise pour ce jquery :
exemple

Je n'y arrive pas...
La doc en anglais... est lourde à comprendre...
Modifié par jytest (07 Jan 2013 - 12:11)
Voici mon server_processing (modifié) :

<?php
	/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
	 * Easy set variables
	 */
	
	/* Array of database columns which should be read and sent back to DataTables. Use a space where
	 * you want to insert a non-database field (for example a counter or static image)
	 */
	$aColumns = array( ' ', 'item_id', 'cut', 'carat', 'cut_grade', 'color', 'clarity', 'polish', 'symmetry',
		'depth', 'table', 'fluo_intensity', 'price_per_carat', 'culet_size', ' ', ' ', 'total_price', ' ');

	/* Indexed column (used for fast and accurate table cardinality) */
	$sIndexColumn = "item_id";
	
	/* DB table to use */
	$sTable = "diamant_data";
	
	/* Database connection information */
	$gaSql['user']       = "xxx";
	$gaSql['password']   = "yyy";
	$gaSql['db']         = "zzz";
	$gaSql['server']     = "xyz";	
	
	/* REMOVE THIS LINE (it just includes my SQL connection user/pass) */
	/* include( $_SERVER['DOCUMENT_ROOT']."/datatables/mysql.php" ); */
	
	
	/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
	 * If you just want to use the basic configuration for DataTables with PHP server-side, there is
	 * no need to edit below this line
	 */
	
	/* 
	 * Local functions
	 */
	function fatal_error ( $sErrorMessage = '' )
	{
		header( $_SERVER['SERVER_PROTOCOL'] .' 500 Internal Server Error' );
		die( $sErrorMessage );
	}

	
	/* 
	 * MySQL connection
	 */
	if ( ! $gaSql['link'] = mysql_pconnect( $gaSql['server'], $gaSql['user'], $gaSql['password']  ) )
	{
		fatal_error( 'Could not open connection to server' );
	}

	if ( ! mysql_select_db( $gaSql['db'], $gaSql['link'] ) )
	{
		fatal_error( 'Could not select database ' );
	}

	/* 
	 * Paging
	 */
	$sLimit = "";
	if ( isset( $_GET['iDisplayStart'] ) && $_GET['iDisplayLength'] != '-1' )
	{
		$sLimit = "LIMIT ".intval( $_GET['iDisplayStart'] ).", ".
			intval( $_GET['iDisplayLength'] );
	}
	
	
	/*
	 * Ordering
	 */
	$sOrder = "";
	if ( isset( $_GET['iSortCol_0'] ) )
	{
		$sOrder = "ORDER BY  ";
		for ( $i=0 ; $i<intval( $_GET['iSortingCols'] ) ; $i++ )
		{
			if ( $_GET[ 'bSortable_'.intval($_GET['iSortCol_'.$i]) ] == "true" )
			{
				$sOrder .= "`".$aColumns[ intval( $_GET['iSortCol_'.$i] ) ]."` ".
					($_GET['sSortDir_'.$i]==='asc' ? 'asc' : 'desc') .", ";
			}
		}
		
		$sOrder = substr_replace( $sOrder, "", -2 );
		if ( $sOrder == "ORDER BY" )
		{
			$sOrder = "";
		}
	}
	
	
	/* 
	 * Filtering
	 * NOTE this does not match the built-in DataTables filtering which does it
	 * word by word on any field. It's possible to do here, but concerned about efficiency
	 * on very large tables, and MySQL's regex functionality is very limited
	 */
	$sWhere = "";
	if ( isset($_GET['sSearch']) && $_GET['sSearch'] != "" )
	{
		$sWhere = "WHERE (";
		for ( $i=0 ; $i<count($aColumns) ; $i++ )
		{
			if ( isset($_GET['bSearchable_'.$i]) && $_GET['bSearchable_'.$i] == "true" )
			{
				$sWhere .= "`".$aColumns[$i]."` LIKE '%".mysql_real_escape_string( $_GET['sSearch'] )."%' OR ";
			}
		}
		$sWhere = substr_replace( $sWhere, "", -3 );
		$sWhere .= ')';
	}
	
	/* Individual column filtering */
	for ( $i=0 ; $i<count($aColumns) ; $i++ )
	{
		if ( isset($_GET['bSearchable_'.$i]) && $_GET['bSearchable_'.$i] == "true" && $_GET['sSearch_'.$i] != '' )
		{
			if ( $sWhere == "" )
			{
				$sWhere = "WHERE ";
			}
			else
			{
				$sWhere .= " AND ";
			}
			$sWhere .= "`".$aColumns[$i]."` LIKE '%".mysql_real_escape_string($_GET['sSearch_'.$i])."%' ";
		}
	}
	
	
	/*
	 * SQL queries
	 * Get data to display
	 */
	$sQuery = "
		SELECT SQL_CALC_FOUND_ROWS `".str_replace(" , ", " ", implode("`, `", $aColumns))."`
		FROM   $sTable
		$sWhere
		$sOrder
		$sLimit
		";
	$rResult = mysql_query( $sQuery, $gaSql['link'] ) or fatal_error( 'MySQL Error: ' . mysql_errno() );
	
	/* Data set length after filtering */
	$sQuery = "
		SELECT FOUND_ROWS()
	";
	$rResultFilterTotal = mysql_query( $sQuery, $gaSql['link'] ) or fatal_error( 'MySQL Error: ' . mysql_errno() );
	$aResultFilterTotal = mysql_fetch_array($rResultFilterTotal);
	$iFilteredTotal = $aResultFilterTotal[0];
	
	/* Total data set length */
	$sQuery = "
		SELECT COUNT(`".$sIndexColumn."`)
		FROM   $sTable
	";
	$rResultTotal = mysql_query( $sQuery, $gaSql['link'] ) or fatal_error( 'MySQL Error: ' . mysql_errno() );
	$aResultTotal = mysql_fetch_array($rResultTotal);
	$iTotal = $aResultTotal[0];
	
	
	/*
	 * Output
	 */
	$output = array(
		"sEcho" => intval($_GET['sEcho']),
		"iTotalRecords" => $iTotal,
		"iTotalDisplayRecords" => $iFilteredTotal,
		"aaData" => array()
	);
	
	while ( $aRow = mysql_fetch_array( $rResult ) )
	{
		$row = array();
		for ( $i=0 ; $i<count($aColumns) ; $i++ )
		{
			if ( $aColumns[$i] == "version" )
			{
				/* Special output formatting for 'version' column */
				$row[] = ($aRow[ $aColumns[$i] ]=="0") ? '-' : $aRow[ $aColumns[$i] ];
			}
			else if ( $aColumns[$i] != ' ' )
			{
				/* General output */
				$row[] = $aRow[ $aColumns[$i] ];
			}
		}
		$output['aaData'][] = $row;
	}
	
	echo json_encode( $output );
?>
Comme je ne trouve toujours pas, je tente encore avec vous...
Pouvez-vous m'aider ?

Pour ce faire et pour être complet, voici ma structure des lignes de cette table :

echo "<tr onmouseover='search(".trim($back['item_id']).");' onmouseout='detailoff();' style='cursor:pointer;'>";
echo 	"<td align='center' style='width:25px;'>";
   $id= "comparer".sprintf('%02d', $nbresultat);
   echo "<input type='checkbox' name='comparer[".$nbresultat."]' id='".$id."' class='curseur' ";
   echo "value='".$nbresultat."'> ";
   echo "</td>";
echo 	"<td align='left'>".trim($back['item_id'])."</td>";
echo 	"<td align='left'>".trim($back['cut'])."</td>";
echo 	"<td align='right' style='width:30px;'>".number_format(trim($back['carat']), 2, ',', ' ')."</td>";
echo 	"<td align='left'>".trim($back['cut_grade'])."</td>";
echo 	"<td align='center' style='width:45px;'>".trim($back['color'])."</td>";
echo 	"<td align='center' style='width:45px;'>".trim($back['clarity'])."</td>";
echo 	"<td align='center' style='width:45px;'>".trim($back['polish'])."</td>";
echo 	"<td align='center' style='width:45px;'>".trim($back['symmetry'])."</td>";
echo 	"<td align='center' style='width:45px;'>".number_format(trim($back['depth']), 1, ',', ' ')."</td>";
echo 	"<td align='center' style='width:45px;'>".number_format(trim($back['table']), 1, ',', ' ')."</td>";
echo 	"<td align='center' style='width:45px;'>".trim($back['fluo_intensity'])."</td>";
echo 	"<td align='right' style='width:45px;'>".number_format(trim($back['price_per_carat']), 2, ',', ' ')."</td>";
echo 	"<td align='center' style='width:45px;'>".trim($back['culet_size'])."</td>";
echo 	"<td align='right' style='width:45px;'>".number_format($rll, 2, ',', ' ')."</td>";
echo 	"<td align='right'>délai</td>";
echo 	"<td align='right'>".number_format(trim($back['total_price']), 2, ',', ' ')."</td>";
echo 	"<td align='center'><a href=''><div class='voir'>Détails</div></a></td>";
echo "</tr>";