datatable llamada por parametro

petete2007 · #1 (**permalink**) 11/02/2010, 11:53

Hola, necesito vuestra ayuda a ver si algún ilustrado tiene la solución.
Estoy usando el plugin php datatables.net y mi idea es la siguiente :
Tengo una table y varios enlaces ( consulta1, consulta2, consulta3). Dependiendo de la consulta seleccionada mostrará unos resultados en tabla u otros.

Código:

			var oTable3;
			var giRedraw = true;
			
			$(document).ready(function() {

	
				oTable3 = $('#example3').dataTable( {
					/* "sDom": '<"top"iflp<"clear">>rt',   */
					/* "bInfo": false, */    /* texto de mostrando nºencontrados */
					"bFilter": true,         /* ocultar buscador */
					"sSearch":true,
					"iDisplayLength": 4,
					"iDisplayStart": 0,					
					"bProcessing": false,  
					/* "sPaginationType": "full_numbers", */
					"aoColumns": [ 
						{ "bVisible": false, "asSorting": [ "asc" ] },  
						{ "sWidth": "50%", "bSortable": false , "bSearchable": false},   /* foto */
						{ "sWidth": "50%", "bSortable": false , "bSearchable": false},  /* detalle */
						{ "bVisible": false},
						{ "bVisible": false},
						{ "bVisible": false}
						],						
					/* "bServerSide": true,  */
					"sAjaxSource": "./server_accesory.php?valor=6" 
				} );
		

			} );

No sé como llamar a la función server_accesory.php para pasarle un parámetro y sobre no se cómo refrescar la tabla.

Resumiendo...me valdría saber como cambiar la SQL dependiendo de la opción que elija.

HELP MEE por favor !!

petete2007 · #2 (**permalink**) 12/02/2010, 04:06

$('#boton1').click( function () {
alert('dsfa');
// oTable.fnReloadAjax();
oTable.sAjaxSource="./server_accesory.php?valor=6";
alert('2');
oTable.fnReloadAjax();
return true;

} );

¿cómo se llama a la función sajaxsource para volver a cargar la tabla con otros valores???

petete2007 · #3 (**permalink**) 12/02/2010, 04:40

$('#boton1').click( function () {
var oSettings = oTable.fnSettings();
alert(x);
oTable.fnClearTable();
oTable.sAjaxSource="./server_catalog.php";

} );

con esto lo que hago es borrar la tabla y luego volver a cargar los datos pero no me carga ningun dato.
¿que estoy haciendo mal?

petete2007 · #4 (**permalink**) 12/02/2010, 04:55

Os pongo el codigo fuente por si alguien me puede ayudar.
Quiero que al pulsar sobre el enlace que tengo vuelva a llamar al datatable y cargue unos valores distintos, es decir una llamada a SAjaxSource distinta.

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<link rel="shortcut icon" type="image/ico" href="http://www.sprymedia.co.uk/media/images/favicon.ico" />
		
		<title>Panel de administraci&oacute;n</title>
		<style type="text/css" title="currentStyle">
			@import "./media/css/demo_page.css";
			@import "./media/css/demo_table.css";
		</style>
				        <link href="jquery.tab.css" rel="stylesheet" type="text/css" />
		<script type="text/javascript" language="javascript" src="./media/js/jquery.js"></script>
		<script type="text/javascript" language="javascript" src="./media/js/jquery.dataTables1.js"></script>
		<script type="text/javascript" charset="utf-8">
			var oTable;
			var x=5;
					
			
			$(document).ready(function() {
				
				//var ireference = document.getElementById('reference1').value;
				//$("#form_tabvinculos").hide();  // ocultar por defecto las pestañas
				$("#form_mostrarcomentario").hide();  // ocultar por defecto el formulario de comentario al administrador						
						
				oTable = $('#example').dataTable( {
					//"sDom": '<"top"iflp<"clear">>rt<"bottom"iflp<"clear">>',
					/* "bInfo": false, */    /* texto de mostrando nºencontrados */
					"bFilter": false,         /* ocultar buscador */
					"sSearch":false,
					"iDisplayLength": 1,
					"iDisplayStart": 0,
					"aoColumns": [ 
						{ "bVisible": false, "asSorting": [ "asc" ] },  
						{ "sWidth": "50%", "bSortable": false , "bSearchable": false},   /* foto */
						{ "sWidth": "50%", "bSortable": false , "bSearchable": false},  /* detalle */
						{ "bVisible": false},
						{ "bVisible": false},
						{ "bVisible": false}
						],					
					"bProcessing": true,
					/*"sPaginationType": "full_numbers",  */
					/* "bServerSide": true,  */
					"sAjaxSource": "./server_catalog.php"
				} );


	$('#boton1').click( function () {
	    var oSettings = oTable.fnSettings();
		alert(x);
 	oTable.fnClearTable();
	oTable.sAjaxSource="./server_catalog.php";
	return false;
	} );



});
		
			
		</script>
	</head>
	<body id="dt_example1">

<table width="100%" cellpadding="0" cellspacing="0" border="0" class="display" id="example">
	<tbody>
		<tr>
			<td colspan="6" class="dataTables_empty">Cargando datos del servidor...</td>
		</tr>
	</tbody>
</table>


<a href="#" id="boton1"> boton1</a>
	</body>
</html>

petete2007 · #5 (**permalink**) 12/02/2010, 05:57

solucion!!

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<link rel="shortcut icon" type="image/ico" href="http://www.sprymedia.co.uk/media/images/favicon.ico" />
		
		<title>Panel de administraci&oacute;n</title>
		<style type="text/css" title="currentStyle">
			@import "./media/css/demo_page.css";
			@import "./media/css/demo_table.css";
		</style>
		<link href="jquery.tab.css" rel="stylesheet" type="text/css" />
		<script type="text/javascript" language="javascript" src="./media/js/jquery.js"></script>
		<script type="text/javascript" language="javascript" src="./media/js/jquery.dataTables1.js"></script>
		<script type="text/javascript" charset="utf-8">

$.fn.dataTableExt.oApi.fnReloadAjax = function ( oSettings, sNewSource, fnCallback )
{
	if ( typeof sNewSource != 'undefined' )
	{
		oSettings.sAjaxSource = sNewSource;
	}
	this.oApi._fnProcessingDisplay( oSettings, true );
	var that = this;
	
	oSettings.fnServerData( oSettings.sAjaxSource, null, function(json) {
		/* Clear the old information from the table */
		that.oApi._fnClearTable( oSettings );
		
		/* Got the data - add it to the table */
		for ( var i=0 ; i<json.aaData.length ; i++ )
		{
			that.oApi._fnAddData( oSettings, json.aaData[i] );
		}
		
		oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();
		that.fnDraw( that );
		that.oApi._fnProcessingDisplay( oSettings, false );
		
		/* Callback user function - for event handlers etc */
		if ( typeof fnCallback == 'function' )
		{
			fnCallback( oSettings );
		}
	} );
}

	var oTable;							
	$(document).ready(function() {										
		oTable = $('#example').dataTable( {
			"bFilter": false,         /* ocultar buscador */
			"sSearch":false,
			"iDisplayLength": 1,
			"iDisplayStart": 0,
			"aoColumns": [ 
				{ "bVisible": false, "asSorting": [ "asc" ] },  
				{ "sWidth": "50%", "bSortable": false , "bSearchable": false},   /* foto */
				{ "sWidth": "50%", "bSortable": false , "bSearchable": false},  /* detalle */
				{ "bVisible": false},
				{ "bVisible": false},
				{ "bVisible": false}
				],					
			"bProcessing": true,
			"sPaginationType": "full_numbers",  
			/* "bServerSide": true,   */
			"sAjaxSource": "./server_catalog.php"
		} );


	$('#boton1').click( function () {
		/* Example call to load a new file */
		oTable.fnReloadAjax( './server_catalog_p.php' );
		/* Example call to reload from original file */
		//oTable.fnReloadAjax();	
	} );

	$('#boton2').click( function () {
		/* Example call to reload from original file */
		oTable.fnReloadAjax( './server_catalog.php' );	
	} );	



});
		
			
		</script>
	</head>
	<body id="dt_example1">

<table width="100%" cellpadding="0" cellspacing="0" border="0" class="display" id="example">
	<tbody>
		<tr>
			<td colspan="6" class="dataTables_empty">Cargando datos del servidor...</td>
		</tr>
	</tbody>
</table>


<a href="#" id="boton1"> boton1</a>
<a href="#" id="boton2"> boton2</a>
	</body>
</html>