2012-01-02 6 views
9

Sto visualizzando i valori della tabella del database utilizzando le tabelle di dati. Lo sto facendo usando il metodo Ajax. Ecco il codiceJquery Datatables allineamento cella metodo Ajax

$('#example1').dataTable({ 
       "bProcessing": true, 
       "sAjaxSource": "filename.php", 
       "bJQueryUI": true, 
       "sPaginationType": "full_numbers" 

      }); 

L'uscita del filename.php è

{ "aaData": [["1","<input type='checkbox' name='user'>&nbsp;Test Name","Leader","35"]] } 

il codice HTML è

<table cellpadding="0" cellspacing="0" border="0" class="display tablehead" id="example1"> 
       <thead> 
        <tr class="colhead newbg"> 
        <th width="17" align="center">No</th> 
        <th width="194" align="left">User</th> 
        <th width="56" align="left">Role</th> 
        <th width="31" align="right">AGE</th> 
        </tr> 
        </thead> 
        <tbody> 

        </tbody> 
       </table> 

Nella sopra html si può vedere la prima colonna è allineato al centro e le prossime due colonne sono allineate a sinistra e l'ultima è allineata a destra. Ma nei dati fuori tutto sono allineati al centro. Ho cercato di utilizzare il seguente

{ "aaData": [["<div align='center'>1</div>","<div align='left'><input type='checkbox' name='user'>&nbsp;Test Name</div>","<div align='center'>Leader</div>","<div align='right'>35</div>"]] } 

Ora ho il display corretto, ma mentre l'ordinamento per l'età non è corretto. Per favore aiuto. Grazie

risposta

10

Credo che si dovrebbe fare qualcosa di simile (uso aoColumns):

$('#example1').dataTable({ 
       "bProcessing": true, 
       "sAjaxSource": "filename.php", 
       "bJQueryUI": true, 
       "sPaginationType": "full_numbers", 
      "aoColumns": [ 
         {"sClass": "center"}, 
         {"sClass": "left"}, 
         {"sClass": "left"}, 
         {"sClass": "right"}, 

      }); 

e quindi definire le classi CSS corrette

.right{ 
    align: right; 
} 

.left{ 
    align: left; 
} 

.center{ 
    align: center; 
} 

In questo modo DataTable maniglie aggiungendo classi per gli elementi e la l'ordinamento funziona correttamente. Naturalmente usa il primo JSON

+0

Grande. Proverò grazie e –

+0

@ Vasanthan.RP ho anche postato un link dove puoi trovare i documenti per aColumns –

+0

Funziona alla grande Grazie –

0

Non è possibile aggiungere elementi DIV al corpo TABLE! Devi creare un nuovo elemento TR cambiare tutti i DIV in TD e quindi aggiungerli a un elemento dell'elemento TR, quindi aggiungere l'elemento TR al corpo TABLE.

UPDATE L'elemento DIV non ha alcun attributo allineato, devi usare CSS per questo.

+0

come da tabelle di dati questi elementi verranno inseriti all'interno di tds automaticamente spero. Quindi ho bisogno di un modo per allinearli. Grazie a –

+0

, può farlo, ma se lo fa, l'ordinamento non funzionerà (a meno che non rimuova l'html. Penso che tu possa usare le classi per fare ciò che vuole attraverso l'API dei datatables –

+0

Ho aggiornato la mia risposta – Irmantas

0

Ora ho il display corretto ma mentre lo smistamento per età non è corretto. Per favore aiuto. Grazie

Come hai HMTL in quella colonna, DataTables lo rileverà automaticamente come tipo 'stringa' e lo ordinerà di conseguenza. Se si desidera ordinare numericamente, rimuovere i dati HTML, utilizzare questo plug-in: http://datatables.net/plug-ins/sorting#numbers_html