How to refresh a datatable and not the entire window?

If you load the HTML again, the DOM elements are replaced, and the new ones have not been assigned the event. Reassign them after assigning the HTML again. Better with off / on as this avoids duplicating calls.

$(".crearhistoria").off('click');$(".crearhistoria").on('click', function() { ... };

I hope it's helpful

As the other friend says, try to make an AJAX request to update your datatable, something like this:

$.ajax({
        url: "ruta_de_mi_archivo_php_donde_haremos_la_consulta.php",
        type: "POST",
        data: {veruser:1},
        success: function(data) {
                 // En caso de que se ejecute
                 $('#mi_tabla > tbody').html(data);
        }
 });

Now, in route_of_my_file_php_where_we will_consult.php you should have something like that

if($_POST['veruser']==1){
     //Aqui haces tu consulta para ver todos los usuarios.
     // Pero en el while que harás, deberas retornarlo con lo valores en tr y td
     //Ejemplo
     while($row = mysql_fecth_array($resulconsulta)){
           $usuarios .= '<tr>
                             <td>'.$row['id'].'<td>
                             <td>'.$row['nombre'].'<td>
                             <td>'.$row['apellido'].'<td>
                         </tr>' 
     }
     echo $usuarios;
}

In this way you will directly return the content to fill in the body of the user table, or wherever you want, in fact you can do what you want, and of course, without updating the page. :) Good luck

They already gave you an answer that suggests you serve HTML code from the server. Another option (and more standard) is to serve the records as JSON .

  

Assuming you make a query with LIMIT to get the last 10 records

$json = array();
// convierte el resultset a array
// para convertirlo a JSON
for($row = $rs->fetch_assoc()) {
  $json[] = $row;
}
echo json_encode($json);

NOTE : You must take into account the order in the query.

In your JavaScript code, you get the records in JSON by AJAX.

$.getJSON('/get_records.php', function(records) {
  $('#tabla').empty(); // limpia la tabla -> forma "fácil"
  records.forEach(function (record, i) {
    const cell = document.querySelector('table td:nth-child(${i})');
    // obtiene la clave (columna) del JSON para obtener el valor
    let key = Object.keys(record)[0];
    cell.textContent = record[key];
  });
});

Proposal 1 : When using the DataTable plugin, also use the API that provides

When I go to: link

File: tables.js - Here you can make the following changes:

$('#tblPacientes').DataTable({
  deferLoading: 0, // Indicamos que la carga inicial se hace manual
  serverSide: true, // Indicamos que todos tipo de proceso se hace en el Backend
  ajax: {
    url: 'php/mod_listar_datos.php',
    type: 'POST',
    data: function(params) {
      // Aqui deberas analizar lo que DT envia
      // y de ser necesario modificarlo a tu antojo
      // IMPORTANTE: param.draw deber ser enviado y devuelto.
      return params;
    },
    dataSrc: function(response) {
      // Idealmnete el servidor devolveria una respuesta JSON
      // por lo que response seria un objeto
    }
  }
});

File: patients.js - Here I recommend removing the function carga_datos - And in the places where it is called, replace it with:

$('#tblPacientes').DataTable().ajax.reload();

More info: link

Proposal 2 : Do not use the DataTable plugin and do everything by hand.

There is a way to handle ajax with datatable, and I think it is the best way to work with the library.

javascript

$(document).ready(function() {
    $('#example').DataTable( {
        "ajax": "data/arrays.txt"
    } );
} );

html:

<table id="example" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Name</th>
            ....
        </tr>
    </thead>
</table>

source: link

You can also find it by paging, adding fields such as "total_paginas", "volumen_registros", "following" ...