Visualizzazione dei risultati da 1 a 5 su 5
  1. #1
    Utente di HTML.it
    Registrato dal
    Sep 2004
    Messaggi
    1,344

    jQuery DataTable: aggiungere proprietà dopo inizializzata table

    Ho questo script che utilizza DataTable (http://www.datatables.net/index)

    Codice PHP:
    <script type="text/javascript">
        $(
    document).ready(function()
            {
                
    /*
                 * Table sorting
                 */
                
                // Apply to table
                
    $('.tabella').each(function(i)
                {
                    
    // DataTable config
                    
    var table = $(this),
                        
    oTable table.dataTable({
                            
    /*
                             * We set specific options for each columns here. Some columns contain raw data to enable correct sorting, so we convert it for display
                             * @url [url]http://www.datatables.net/usage/columns[/url]
                             */
                            
    aoColumns: [
                                { 
    bSortablefalse },    // No sorting for this columns, as it only contains checkboxes
                                
    sType'string' },
                                { 
    bSortablefalse },
                                { 
    sType'numeric'bUseRenderedfalsefnRender: function(obj// Append unit and add icon
                                    
    {
                                        return 
    '[size="1"][img]images/icons/fugue/image.png[/img] '+obj.aData[obj.iDataColumn]+' Ko[/size]';
                                    }
                                },
                                { 
    sType'date' },
                                { 
    sType'numeric'bUseRenderedfalsefnRender: function(obj// Size is given as float for sorting, convert to format 000 x 000
                                    
    {
                                        return 
    obj.aData[obj.iDataColumn].split('.').join(' x ');
                                    }
                                },
                                { 
    bSortablefalse }    // No sorting for actions column
                            
    ],
                            
                            
    /*
                             * Set DOM structure for table controls
                             * @url [url]http://www.datatables.net/examples/basic_init/dom.html[/url]
                             */
                            
    sDom'<"block-controls"<"controls-buttons"p>>rti<"block-footer clearfix"lf>',
                            
                            
    /*
                             * Callback to apply template setup
                             */
                            
    fnDrawCallback: function()
                            {
                                
    this.parent().applyTemplateSetup();
                            },
                            
    fnInitComplete: function()
                            {
                                
    this.parent().applyTemplateSetup();
                            }
                        });
                    
                    
    // Sorting arrows behaviour
                    
    table.find('thead .sort-up').click(function(event)
                    {
                        
    // Stop link behaviour
                        
    event.preventDefault();
                        
                        
    // Find column index
                        
    var column = $(this).closest('th'),
                            
    columnIndex column.parent().children().index(column.get(0));
                        
                        
    // Send command
                        
    oTable.fnSort([[columnIndex'asc']]);
                        
                        
    // Prevent bubbling
                        
    return false;
                    });
                    
    table.find('thead .sort-down').click(function(event)
                    {
                        
    // Stop link behaviour
                        
    event.preventDefault();
                        
                        
    // Find column index
                        
    var column = $(this).closest('th'),
                            
    columnIndex column.parent().children().index(column.get(0));
                        
                        
    // Send command
                        
    oTable.fnSort([[columnIndex'desc']]);
                        
                        
    // Prevent bubbling
                        
    return false;
                    });
                });
    </script> 
    Quello che voglio fare è utilizzare questo nell'head dei documenti per inizializzare tutte le tabelle con classe 'tabella' ma la parte 'aoColumns' la voglio eliminare da qui ed inserire solo nelle pagine in cui utilizzerò delle tabelle delle quali fare il sorting in modo di specificare per ogni tabella il tipo di dato che viene utilizzato.
    Non so come fare però perchè il datatable risulta già inizializzato per quella tabella.
    In pratica ho bisogno di aggiungere solo il comportamento delle colonne:

    Codice PHP:
    <script type="text/javascript">
            $(
    document).ready(function() {
                $(
    '.tabella').dataTable( {
                    
    "aoColumns": [
                        
    null,
                        
    null,
                        
    null,
                        
    null,
                        { 
    "sType""numeric-comma" }
                    ]
                } );
            });
    </script> 
    Questo codice mi restituisce questo messaggio:

    DataTables warning: Cannot reinitialise DataTable.

    To retrieve the DataTables object for this table, please pass either no arguments to the dataTable() function, or set bRetrieve to true. Alternatively, to destory the old table and create a new one, set bDestroy to true (note that a lot of changes to the configuration can be made through the API which is usually much faster).

    Il motivo è ovvio, che non posso re-inizializzare data table. Oppure dice di utilizzare bRetrieve a true.
    Settandolo a true non ricevo alcun errore ma non aggiunge il comportamento che voglio.

  2. #2
    Utente di HTML.it
    Registrato dal
    Sep 2004
    Messaggi
    1,344
    UP

  3. #3
    Utente di HTML.it
    Registrato dal
    Oct 2009
    Messaggi
    636
    premetto che sconosco il plugin, ma a quanto pare quell'errore è dovuto alla presenza di un'altra istanza dell'oggetto dataTable, il messaggio di errore ti consiglia di reperire tale istanza e di lavorare su quella.

    Guardando un pò in giro, mi pare di aver capito che per interagire su istange dell'oggetto dataTable già presenti occorre recuperarle nel seguente modo:
    var myDataTable = $('.tabella').dataTable();

    Ora dovresti poter gestire l'oggetto con la dot notation per i metodi, cioè:
    myDataTable.metodo

    per i metodi vedi se trovi quello che ti serve nelle api:
    http://datatables.net/api

  4. #4
    Utente di HTML.it
    Registrato dal
    Sep 2004
    Messaggi
    1,344
    Da quanto ho capito:

    per poter recuperare un'istanza dell'oggetto datatable devo mettere come opzione bRetrieve:true al primo lancio.

    Poi è possibile recuperare l'istanza come da te indicato ma non è comunque possibile modificare i parametri. Riporto quello trovato sul sito:

    " Retrieving with an initialisation object - $(...).dataTable({"bRetrieve":true, ...}); - It is not possible to alter the table parameters after initialisation like this, but it is useful to be able to just use a single call to $().dataTable(). Setting bRetrieve to true, tells DataTables that you acknowledge this. "

    In realtà se faccio così:

    Codice PHP:
    bRetrievetrue// Al lancio della prima istanza evita l'errore di avvertimento che è già stato istanziato 
    e poi in fondo alla pagina:

    Codice PHP:
    <script type="text/javascript">
        
    MyDataTable = $().dataTable({
            
    aoColumns: [
                { 
    sType'string' },
                { 
    sType'string' },
                { 
    sType'numeric' },
                { 
    sType'string' },
                { 
    sType'string' },
                { 
    sType'string' },
                { 
    bSortablefalse }
            ]
        });
    </script> 
    Prende le ultime configurazioni ma non le prime (quelle nella head).

    A questo punto non so.

  5. #5
    Utente di HTML.it
    Registrato dal
    Oct 2009
    Messaggi
    636
    non saprei dirti, non ho mai utilizzato quel plugin. Per le tabelle uso flexigrid.

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.