Datatable checkbox selezionati in altre pagine

[pippuccio76]

Salve a tutti ho una datatable con paginazione automatica ( di default datatable) , alla prima colonna ho un checkbox con value = all'id del record del database , quando seleziono i singoli checkbox su pagine diverse mi riporta solamente quello della pagina visibile .

Il tutto funziona invece se seleziono tutti i valori con questa funzione :

$( "#seleziona_tutto" ).change(function() {


                var checked ;


                if($("#seleziona_tutto").is(':checked')){


                    checked = 1 ;
                
                }else{


                    checked = 0 ;
                }


              
                table.column(0).nodes().to$().each(function(index) {    
                    if (checked) {
                      $(this).find('.scegli_viaggi').prop('checked', 'checked');
                    } else {
                      //$(this).find('.scegli_viaggi').removeProp('checked');            
                      $(this).find('.scegli_viaggi').prop('checked', false);            
                    }
                  });    
                table.draw()


            });

Come posso fare per i singoli record ?

[pippuccio76]

Salve a tutti ho una datatable con paginazione automatica ( di default datatable) , alla prima colonna ho un checkbox con value = all'id del record del database , quando seleziono i singoli checkbox su pagine diverse mi riporta solamente quello della pagina visibile .

Il tutto funziona invece se seleziono tutti i valori con questa funzione :

$( "#seleziona_tutto" ).change(function() {


                var checked ;


                if($("#seleziona_tutto").is(':checked')){


                    checked = 1 ;
                
                }else{


                    checked = 0 ;
                }


              
                table.column(0).nodes().to$().each(function(index) {    
                    if (checked) {
                      $(this).find('.scegli_viaggi').prop('checked', 'checked');
                    } else {
                      //$(this).find('.scegli_viaggi').removeProp('checked');            
                      $(this).find('.scegli_viaggi').prop('checked', false);            
                    }
                  });    
                table.draw()


            });

Come posso fare per i singoli record ?

Scusate in realtà la funzione che controlla tutti i checkbox di tutta la datatable è questa :

            $('form').on('submit', function(e){
               var $form = $(this);


                // Iterate over all checkboxes in the table
                table.$('input[type="checkbox"]').each(function(){
                    // If checkbox doesn't exist in DOM
                    if(!$.contains(document, this)){
                       // If checkbox is checked
                        if(this.checked){
                        
                            // Create a hidden element 
                            $form.append(
                                $('<input>')
                                    .attr('type', 'hidden')
                                    .attr('name', this.name)
                                    .val(this.value)
                            );
                        
                        }else{




                            // remove input type hidden
                            $("input[type='hidden']").remove();
                            


                        }
                    } 
                });          
            });

Ma non funziona con i checkbox selezionati singolarmente ma solo con tutti

[KillerWorm]

Ciao, non uso quel plugin. Da quel che posso intuire, ciò che viene mostrato a video è solo un "clone" della parte di contenuto che sta nell'oggetto table. Deduco quindi che i checkbox "cloni" non siano connessi con l'oggetto originario; per tale motivo, anche selezionandoli a video, non risulteranno selezionati in table.

Bisognerebbe capire come puoi "connettere" l'istanza mostrata a video, con il relativo oggetto originario.

Il primo script che hai postato, riguardo "seleziona tutto", va a ciclare tutti i nodi della tabella e, per ciascuno, va a cercare l'elemento ".scegli_viaggi" per renderlo checked o no.

Nel tuo caso, per "fissare" il check agendo sul singolo checkbox, bisogna capire come relazionare ogni checkbox al suo corrispettivo elemento originario che sta dentro table.

Presumo sia necessario prima di tutto aggiungere un gestore per l'evento "change" dei vari checkbox; eventualmente delegando l'evento sul contenitore dove è mostrata la tabella. Bisogna conoscere il contesto html della tabella per capire come intervenire.

In secondo luogo, dentro il gestore dell'evento, potrebbe essere necessario recuperare il riferimento della riga relativa al checkbox su cui si sta agendo (potrebbe essere un tr=$(this).closest('tr')), per poi andare a selezionare tale riga nell'oggetto originario (potrebbe essere un table.row(tr)) e beccare il checkbox della prima colonna. A quel punto presumo sia possibile "fissare" il checked su tale elemento.

Ripeto, non conosco e non ho mai usato tale plugin; se puoi postare un esempio della pagina in azione, potrei provare ad indagare meglio, altrimenti attendi eventuali altre risposte.

[pippuccio76]

Ciao, non uso quel plugin. Da quel che posso intuire, ciò che viene mostrato a video è solo un "clone" della parte di contenuto che sta nell'oggetto table. Deduco quindi che i checkbox "cloni" non siano connessi con l'oggetto originario; per tale motivo, anche selezionandoli a video, non risulteranno selezionati in table.

Bisognerebbe capire come puoi "connettere" l'istanza mostrata a video, con il relativo oggetto originario.

Il primo script che hai postato, riguardo "seleziona tutto", va a ciclare tutti i nodi della tabella e, per ciascuno, va a cercare l'elemento ".scegli_viaggi" per renderlo checked o no.

Nel tuo caso, per "fissare" il check agendo sul singolo checkbox, bisogna capire come relazionare ogni checkbox al suo corrispettivo elemento originario che sta dentro table.

Presumo sia necessario prima di tutto aggiungere un gestore per l'evento "change" dei vari checkbox; eventualmente delegando l'evento sul contenitore dove è mostrata la tabella. Bisogna conoscere il contesto html della tabella per capire come intervenire.

In secondo luogo, dentro il gestore dell'evento, potrebbe essere necessario recuperare il riferimento della riga relativa al checkbox su cui si sta agendo (potrebbe essere un tr=$(this).closest('tr')), per poi andare a selezionare tale riga nell'oggetto originario (potrebbe essere un table.row(tr)) e beccare il checkbox della prima colonna. A quel punto presumo sia possibile "fissare" il checked su tale elemento.

Ripeto, non conosco e non ho mai usato tale plugin; se puoi postare un esempio della pagina in azione, potrei provare ad indagare meglio, altrimenti attendi eventuali altre risposte.

Ma perchè ( il secondo script funziona se seleziono tutto tramite checkbox iniziale ) mentre non funziona se seleziono solamente alcuni , non cicla comunque l'intera tabella ?

[KillerWorm]

non cicla comunque l'intera tabella ?

Certo ma penso proprio che il problema sia a monte, cioè l'oggetto table originario che viene ciclato (cioè l'istanza del datatable) non viene aggiornato nel momento in cui tu agisci sugli elementi cloni (cioè la rappresentazione a schermo). Anche se a schermo agisci sui checkbox, in realtà nell'oggetto table non succede proprio nulla.

Non ne sono sicuro ma mi pare che funzioni più o meno in quel modo.

Nell'evento change di #seleziona_tutto, puoi notare infatti che vengono ciclati i nodi dell'oggetto table e, trovati i relativi checkbox, ne viene aggiornato il valore.

Nel submit vengono quindi ciclati i checkbox che stanno dentro table, non quelli che stanno a video, per cui viene creata una copia momentanea dentro il form, in modo che tali dati siano trasmessi al server.

Nel tuo caso quindi è necessario aggiornare singolarmente il checkbox che sta dentro table, in base al suo clone a video che vai a manovrare. Se le API del plugin non permettono di "collegare" in modo semplice i controlli che sono dentro l'istanza datatable, con quelli rappresentati a video, allora dovrai farlo manualmente. Ti ho già indicato a grandi linee i passi su cui lavorare; non conoscendo il contesto e non avendo un esempio su cui lavorare, personalmente non so dirti di più.

[pippuccio76]

Certo ma penso proprio che il problema sia a monte, cioè l'oggetto table originario che viene ciclato (cioè l'istanza del datatable) non viene aggiornato nel momento in cui tu agisci sugli elementi cloni (cioè la rappresentazione a schermo). Anche se a schermo agisci sui checkbox, in realtà nell'oggetto table non succede proprio nulla.

Non ne sono sicuro ma mi pare che funzioni più o meno in quel modo.

Nell'evento change di #seleziona_tutto, puoi notare infatti che vengono ciclati i nodi dell'oggetto table e, trovati i relativi checkbox, ne viene aggiornato il valore.

Nel submit vengono quindi ciclati i checkbox che stanno dentro table, non quelli che stanno a video, per cui viene creata una copia momentanea dentro il form, in modo che tali dati siano trasmessi al server.

Nel tuo caso quindi è necessario aggiornare singolarmente il checkbox che sta dentro table, in base al suo clone a video che vai a manovrare. Se le API del plugin non permettono di "collegare" in modo semplice i controlli che sono dentro l'istanza datatable, con quelli rappresentati a video, allora dovrai farlo manualmente. Ti ho già indicato a grandi linee i passi su cui lavorare; non conoscendo il contesto e non avendo un esempio su cui lavorare, personalmente non so dirti di più.

Ecco un jsfiddle : https://jsfiddle.net/pa6exwzk/3/

NOn capisco però l'errore in console

[KillerWorm]

Ecco un jsfiddle

Bene gli do uno sguardo.

NOn capisco però l'errore in console

Se intendi questo "$ is not defined" si tratta di jQuery che non è stato trovato.

Tra le risorse, prima dell'inclusione di jquery.dataTables, devi includere la libreria jQuery

[KillerWorm]

Ho dato uno sguardo

Prima cosa: non tenere conto di quanto ho indicato nei post precedenti. Non conoscendo il plugin ho scritto qualche castroneria facendo supposizioni errate

In realtà la tabella viene aggiornata regolarmente quando manovri i checkbox. Gli elementi che sono mostrati a video sono esattamente parte di quelli che stanno dentro l'istanza dataTable.

Il problema sta in quel ciclo del submit, come avevi immaginato tu.

Analizzando meglio ciò che va a fare quello script, si può rilevare un problemi di logica.

Traducendo lo script in umanese:

- Ciclo tutti i checkbox
- Considero solo quelli che NON sono già mostrati sulla pagina (dal momento che quelli visibili sulla pagina sono già considerati come dati da inviare col form)
- Per ognuno di quelli non mostrati, verifico se è selezionato
- Se lo è, allora creo una sua copia hidden nel form (così che sia considerato come dato del form)
- Se non lo è, allora rimuovo dalla pagina TUTTI gli hidden

Puoi capire quindi che quest'ultima azione, se l'ultimo box esaminato NON risulta selezionato, va a rimuovere comunque TUTTI gli hidden appena creati dal ciclo stesso.

Ora, nel caso in cui si usa la funzione "seleziona tutto", l'ultimo checkbox nella tabella risulterà selezionato, e per tale motivo non avverrà quell'ultima azione.

Invece, selezionando qualche checkbox in una singola pagina della tabella, questi saranno comunque considerati perché sono già presenti nel form; non le copie hidden che invece verrebbero erroneamente rimosse.

Spero di aver chiarito la causa del problema, o quantomeno di non averti creato maggiore confusione

Per risolvere, basterà spostare quell'azione prima che sia eseguito il ciclo; per cui, tutti gli hidden del form sono rimossi preventivamente, quindi sono ricreati, attraverso il ciclo, solo quelli relativi ai ceckbox selezionati e non presenti già nel DOM.

Potrebbe essere una cosa del genere:

$('form').on('submit', function(e){

   var $form = $(this);

   // Rimuovo TUTTI gli input hidden del form
   $form.find("input[type='hidden']").remove();

   // Ciclo SOLO i checkbox selezionati della tabella
   table.$('input:checked').each(function(){

      // Se questo checkbox non è già nel DOM
      if (!$.contains(document, this)){

         // Creo la copia hidden
         $form.append(
            $('<input>')
               .attr('type', 'hidden')
               .attr('name', this.name)
               .val(this.value)
         );
      }
   });
});

Ultima considerazione: dal momento che al submit vengono considerati i checkbox visibili sulla pagina (che siano checked oppure no), mentre gli hidden non posseggono la proprietà "checked", lato server dovrai fare attenzione a come valutare questi elementi; cioè dovrai prendere in considerazione tutti gli hidden come fossero dei checkbox checked, mentre i checkbox (che sono quelli restati visibili nella pagina) vanno verificati considerando solo i checked. Presumo tu abbia già considerato questo, in quanto valeva anche nel caso del "seleziona tutto".

Fai sapere.

[pippuccio76]

Ho dato uno sguardo

Prima cosa: non tenere conto di quanto ho indicato nei post precedenti. Non conoscendo il plugin ho scritto qualche castroneria facendo supposizioni errate

In realtà la tabella viene aggiornata regolarmente quando manovri i checkbox. Gli elementi che sono mostrati a video sono esattamente parte di quelli che stanno dentro l'istanza dataTable.

Il problema sta in quel ciclo del submit, come avevi immaginato tu.

Analizzando meglio ciò che va a fare quello script, si può rilevare un problemi di logica.

Traducendo lo script in umanese:

- Ciclo tutti i checkbox
- Considero solo quelli che NON sono già mostrati sulla pagina (dal momento che quelli visibili sulla pagina sono già considerati come dati da inviare col form)
- Per ognuno di quelli non mostrati, verifico se è selezionato
- Se lo è, allora creo una sua copia hidden nel form (così che sia considerato come dato del form)
- Se non lo è, allora rimuovo dalla pagina TUTTI gli hidden

Puoi capire quindi che quest'ultima azione, se l'ultimo box esaminato NON risulta selezionato, va a rimuovere comunque TUTTI gli hidden appena creati dal ciclo stesso.

Ora, nel caso in cui si usa la funzione "seleziona tutto", l'ultimo checkbox nella tabella risulterà selezionato, e per tale motivo non avverrà quell'ultima azione.

Invece, selezionando qualche checkbox in una singola pagina della tabella, questi saranno comunque considerati perché sono già presenti nel form; non le copie hidden che invece verrebbero erroneamente rimosse.

Spero di aver chiarito la causa del problema, o quantomeno di non averti creato maggiore confusione

Per risolvere, basterà spostare quell'azione prima che sia eseguito il ciclo; per cui, tutti gli hidden del form sono rimossi preventivamente, quindi sono ricreati, attraverso il ciclo, solo quelli relativi ai ceckbox selezionati e non presenti già nel DOM.

Potrebbe essere una cosa del genere:

$('form').on('submit', function(e){

   var $form = $(this);

   // Rimuovo TUTTI gli input hidden del form
   $form.find("input[type='hidden']").remove();

   // Ciclo SOLO i checkbox selezionati della tabella
   table.$('input:checked').each(function(){

      // Se questo checkbox non è già nel DOM
      if (!$.contains(document, this)){

         // Creo la copia hidden
         $form.append(
            $('<input>')
               .attr('type', 'hidden')
               .attr('name', this.name)
               .val(this.value)
         );
      }
   });
});

Ultima considerazione: dal momento che al submit vengono considerati i checkbox visibili sulla pagina (che siano checked oppure no), mentre gli hidden non posseggono la proprietà "checked", lato server dovrai fare attenzione a come valutare questi elementi; cioè dovrai prendere in considerazione tutti gli hidden come fossero dei checkbox checked, mentre i checkbox (che sono quelli restati visibili nella pagina) vanno verificati considerando solo i checked. Presumo tu abbia già considerato questo, in quanto valeva anche nel caso del "seleziona tutto".

Fai sapere.

Funziona tutto perfettamente , grazie mille

[KillerWorm]

Bene buon proseguimento