2012-02-13 18 views
6

Ok, he estado trabajando en un proyecto pequeño para usar con DataTables. Es un complemento de cuadrícula jQuery y tengo la mayor parte de la funcionalidad funcionando como estaba previsto ahora. Lo único que no puedo entender es hacer que la cuadrícula se actualice en la edición en línea de AJAX.jQuery DataTables, grid de actualización después de la actualización (procesamiento del lado del servidor)

<script type="text/javascript" charset="utf-8"> 
    $(document).ready(function() { 

     var oTable = $('#example').dataTable({ 

      "bJQueryUI": true, 
      "bProcessing": true, 
      "sAjaxSource": "/test/server_processing.php", 
      "sPaginationType": "full_numbers", 
      "aoColumns": [ { "bVisible": false }, 
     null, 
     null, 
     null 
    ] 
     }).makeEditable({ 
      sAddURL: "AddData.php", 
      sAddHttpMethod: "GET", 
      sDeleteHttpMethod: "GET", 
      sDeleteURL: "DeleteData.php", 
      sUpdateURL: "UpdateData.php", 

      oAddNewRowButtonOptions: { label: "Add...", 
       icons: {primary:'ui-icon-plus'} 
      }, 
      oDeleteRowButtonOptions: { label: "Remove", 
       icons: {primary:'ui-icon-trash'} 
      }, 

      oAddNewRowFormOptions: {  
       title: 'New Toll Free number', 
       show: "blind", 
       hide: "explode", 
       modal: true 
      }, 
      sAddDeleteToolbarSelector: ".dataTables_length"        
     }); 
}); 
</script> 

Este es mi archivo updatedata.php

$editedColumn = $_POST['columnId']; 
$editedValue = $_POST['value']; 
$id = $_POST['id']; 

if ($editedColumn == '1') { 
    $sql = "update Main set name='$editedValue' where id='$id'";      
} elseif ($editedColumn == '2') { 
    $sql = "update Main set dn='$editedValue' where id='$id'";     
} elseif ($editedColumn == '3') { 
    $sql = "update Main set dn1='$editedValue' where id='$id'";     
} 
/* Update a record using information about id, columnName (property 
of the object or column in the table) and value that should be 
set */ 
$sql2 = "select name from Main where id = '$id';"; 

mysql_query($sql) or die(mysql_error()); 

echo "Update ok, reload to see changes"; 

tengo el eco al final, ya que parece estallar una alerta() en algún lugar y el eco que se llena de alerta con la información.

Conozco las funciones para volver a dibujar la cuadrícula como fnDraw, pero no tengo ni idea de cómo implementarlas.

+0

Me encontré lo mismo que tú :) y esperando el truco. – sophie

+0

tenga cuidado con la inyección. –

Respuesta

-1

Ver http://code.google.com/p/jquery-datatables-editable/wiki/EditCell#PHP_Example su página debe devolver el mismo valor que el que ha tomado de la solicitud. De lo contrario, cualquier otro valor (diferente) se considerará como un mensaje de error, se mostrará en una ventana emergente y se cancelará la actualización.

Jovan

+0

¿Qué quieres decir? su página debe devolver el mismo valor que el que tomó de la solicitud. ¿Podrías explicar más claro sobre esto, porque también conocí este problema, y ​​todavía estoy atascado en él? Gracias – sophie

0

Para ampliar la respuesta anterior, debe devolver el valor se envía al archivo php.

por lo que en el caso de que su valor está en

$editedValue = $_POST['value']; 

Por lo que debe devolver (eco) que el valor de vuelta.

echo $editedValue; 

Cualquier otra cosa será tratado como un mensaje de error que es por eso que ver la alerta, por lo siguiendo este debe actualizar automáticamente la red, ya que ahora cree que no hay ningún error.

Todo lo anterior información se puede encontrar here

Como nota al margen de este

$sql2 = "select name from Main where id = '$id';"; 

no sería necesario que el valor a devolver ya está presente.

0

en lugar de ...

pidiendo para refrescar el mensaje de la página, ¿por qué no u escribir código para recargar la página para que el resultado actualizado aparece en la pantalla después de que los datos se ha actualizado. Para hacerlo, úsalo.

echo "<script>window.location='pageName.php'</script>"; 
+0

'window.location.reload()' –

-1

no podría hacer su guión updatedata.php echo a cabo el contenido interno de la mesa, de esta manera se puede, en caso de éxito AJAX ejecute el siguiente

jQuery('TABLE#referencedTable').html(newData); 

Esto luego actualizar su tabla con los últimos datos.

+1

La tabla está poblada por el complemento DataTables, que sirve datos (supuestamente como JSON) por PHP. El OP claramente busca API en DataTables para activar una actualización. –

0

En primer lugar no veo

"bServerSide": true 

establecer en cualquier lugar.

Intenta volver a dibujar con oTable.fnDraw() o oTable.fnDraw(oTable.fnSettings())

Cuando está utilizando ServerSide que el procesamiento de debe volversEcho variable que llegó a la petición (debe ser añadido a su dataTable automáticamente por dataTable). De lo contrario, la actualización no hace nada porque dataTable ignora las solicitudes de respuesta con sEcho diferente de lo esperado.

cheque que DataTables config mediante depuración bookmarklet: dataTable debugger

0

Por qué no puedes llamar a la llamada AJAX para poblar la red una vez más? después de cada agregar, eliminar o actualizar las operaciones?

se puede hacer eso, llamando a la misma

$('#example').dataTable({ 

      "bJQueryUI": true, 
      "bProcessing": true, 
      "sAjaxSource": "/test/server_processing.php", 
      "sPaginationType": "full_numbers", 
      "aoColumns": [ { "bVisible": false }, 
     null, 
     null, 
     null 
    ] 
     }); 
1

Si tiene que volver a cargar los datos de AJAX de su Datatable en base a un evento o algo, sólo tiene que utilizar el método fnReloadAjax. Puede encontrar la documentación here.

Cuestiones relacionadas