Table Reload by input

antoniocib

Hi, guys,
I have a problem, I have 3 tables of which two are only for display (the ones above, which return the data when the field "Autista Linea" is empty) all 3 work on the same data taken from the same server, and when I go to modify the main table the field "Autista Linea" to update the tables above I have to reload the page (F5) how can I do without reloading the page?

This is the link of my code: http://damoratraffico.netsons.org/project/scrivania1.html
Thanks in advance!

Translated with www.DeepL.com/Translator (free version)

rf1234

Antonio!
How are you doing?
Ajax Reload is what you need:
https://datatables.net/reference/api/ajax.reload()

not a code example but a little help ... hopefully:

yourParentTable
 .on('submitSuccess', function () {
     //do the ajax reload of your child tables!
 }); 

antoniocib

Hi @rf1234 , i'm tired you?, please can you give me some more concrete help that I have no idea how to do?

rf1234

Well, you have the parent table. I think you call it main table.

So you would need to add the event "submitSuccess" to your main table editor. So whenever you succeed in submitting something from your main table editor you would need to refresh the dependent tables from the server.

You need to insert this code right after the Editor definition for your main Table:

yourMainTableEditor
  .on('submitSuccess', function () {
    dependentTableOne.ajax.reload(null, false) //stay on the same page!!
                     .columns.adjust()
                     .responsive.recalc();
    dependentTableTwo.ajax.reload(null, false) //stay on the same page!!
                     .columns.adjust()
                     .responsive.recalc();
    //and more if you have more dependent tables
   });

Don't know whether you need columns.adjust() and responsive.recalc() as well. I certainly do because all of my data tables are responsive.

antoniocib

@rf1234 so in this way?

var editor = new $.fn.dataTable.Editor( {
ajax: 'php/table.scrivania1.php',
table: '#scrivania1'

('#scrivania1')
.on('submitSuccess', function () {
('#s2').ajax.reload(null, false) //stay on the same page!!

('#s3').ajax.reload(null, false) //stay on the same page!!

//and more if you have more dependent tables

});

rf1234

You would need to assign your data table and your editor to a variable in order to be able to reference them. i don't think a jQuery selector will do for that.

I am not a moderator, Antonio. So I can't make your code legible if it wasn't formatted using markdown .. Only you can do that yourself or the moderators of this forum ...

Just do it like this and it should work:

var mainEditor = new $.fn.dataTable.Editor( { ....

mainEditor
  .on('submitSuccess', function () {
    dependentTableOne.ajax.reload(null, false) //stay on the same page!!
                     .columns.adjust()
                     .responsive.recalc();
    dependentTableTwo.ajax.reload(null, false) //stay on the same page!!
                     .columns.adjust()
                     .responsive.recalc();
    //and more if you have more dependent tables
   });

var mainTable = $('#yourMainId').DataTable( { ...

var dependentTableOne = $('#yourDepOneId').DataTable( { ...

var dependentTableTwo = $('#yourDepTwoId').DataTable( { ...

antoniocib

@rf1234 You're very kind indeed, I don't understand what it means to use markdown, but anyway now I'm sending you the link of the code where you can see it because I don't understand how I should import this code, of the type:

var mainTable = $('#yourMainId').DataTable( { what should I put in this? }
var dependentTableOne = $('#yourDepOneId').DataTable( { what should I enter in this? }

var dependentTableTwo = $('#yourDepTwoId').DataTable( { what should I enter in this? }

The link for the code: http://damoratraffico.netsons.org/project/scrivania1.html

antoniocib

@rf1234 I followed this example which was much easier for me to understand, thank you for your time! https://editor.datatables.net/examples/advanced/parentChild

rf1234

There is a link underneath the "Leave a Comment" window. "Posts are formatted using Markdown".

var mainTable = $('#yourMainId').DataTable( { what should I put in this? }

All I am saying is that you need to assign your data tables and your editor instances to variables so that you can reference them later. I cannot repeat all of your table and editor definitions in my replies. Hence I used periods ... as placeholders for your own table and editor definitions.

You sent me this:

('#scrivania1') THIS IS NOT GOING TO WORK WITH A JQUERY SELECTOR
.on('submitSuccess', function () {
('#s2').ajax.reload(null, false) //stay on the same page!!

('#s3').ajax.reload(null, false) //stay on the same page!!

This is not going to work I am afraid. You are using a jQuery selector for the event and the reload while you need to reference the Editor instance (for the event) and the respective data table (for the reload) which is only possible if you assigned them to a variable previously.

In the example that you quote you can see that events etc. are NEVER assigned to a jQuery selector and ALL of the editor instances and data tables are assigned to variables!!

antoniocib

Ho risolto in questo modo allora:

La mainTable era dichiarata già come var editor

La secondaTabella l'ho dichiarata usando var table2

La terzaTabella l'ho dichiarata usando var table3

e lo script che ho inserito è:

editor.on( 'submitSuccess', function () {
table2.ajax.reload();
table3.ajax.reload();
} );