actualizar DataTable sin recargar la página

Question

Estoy intentando volver a cargar las tablas de datos que se han insertado en las pestañas.

consulte la pregunta : AJAX Update DataTable después de On Success

una clase php userX.php tiene 3 tablas de datos con implementaciones del lado del cliente. Puedo cambiar una fila de la primera tabla usando un botón, una vez hecho esto, el registro irá a la pestaña 2 -> y el contenido de la tabla dos. Estoy cambiando el estado ahora usando AJAX como este

  $(".changeStatus").click(function(event){ if(confirm("Are you sure changing status?")){ event.preventDefault(); var status = "In Production"; var id = $(this).attr('data-id');
        $.ajax({ url : 'dbo.php', method : 'POST', data : {status : status , id : id}, success : function(data){ $('tr#'+id+'').css('background-color', '#ccc');
            $('tr#'+id+'').fadeOut('slow');
          }
        });
      }
      else{
        return false;
      }
    });

mientras tanto, también debe actualizarse en la tabla de la pestaña 2. He intentado lograr esto usando contenido div. ninguno de ellos parece funcionar. Qué me estoy perdiendo. abierto para sugerencias.

Answer 1

The table can simply be reloaded by reinitializing method of the datatable also reloading it through its built in AJAX. The below code block would help.

             $(document).on('click','#ChangeNext',function(event){ if(confirm("Are you sure changing status?")){ event.preventDefault(); var statusid = $(this).attr('data-id');
                    $.ajax({ url : 'dbo.php', method : 'POST', data : {statusid : statusid}, success : function(data) { $('#exampleone').DataTable().ajax.reload();
                        }
                    });
                }
                else{
                    return false;
                }
            });

Answer 2

the best way for putting data in a DataTables with ajax requests, is DataTables ajax api that you can see it in following link:

DataTables Ajax sourced data

jQuery sample:

jQuery('.changeStatus').click(function(event){
    $('#example').DataTable({ ajax: 'data.json' });
});

JSON Sample:

{
    "data": [
        [
            "Roshan Zaid",
            "Stackoverflow user",
            "New member"
        ],
        [
            "AmirAli Esteki",
            "Stackoverflow and AskUbuntu user",
            "New member"
        ]
    ]
}

the response of your ajax requests should be json by default