2012-01-02 45 views
9

Estoy mostrando los valores de la tabla de la base de datos usando tablas de datos. Estoy haciendo esto usando el método ajax. Aquí está el códigoJquery Datatables alineación de celda del método Ajax

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

      }); 

La salida del filename.php es

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

El código HTML está

<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> 

en el código HTML anterior se puede ver la primera columna es el centro Alineados y las dos columnas siguientes se alinean a la izquierda y la última se alinea a la derecha. Pero en la salida de datos, todos están alineados en el centro. He intentado utilizar el siguiente

{ "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>"]] } 

ahora tengo la correcta visualización pero mientras que la clasificación por edad no es correcto. Por favor ayuda. Gracias

Respuesta

10

Creo que deberías hacer algo como (uso aoColumns):

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

      }); 

y luego definir las clases CSS correctos

.right{ 
    align: right; 
} 

.left{ 
    align: left; 
} 

.center{ 
    align: center; 
} 

De esta forma los DataTables asas añadiendo las clases a los elementos y la la clasificación funciona correctamente Por supuesto, use el primer JSON

+0

Genial. Lo intentaré este y te lo hago saber. Gracias –

+0

@ Vasanthan.RP También publiqué un enlace donde puedes encontrar los documentos para aoColumns –

+0

Funciona muy bien. Gracias –

0

¡No puede agregar elementos DIV al cuerpo de TABLE! Debes crear un nuevo elemento TR para cambiar todos los DIV a TD y luego anexarlos al elemento TR y luego anexar el elemento TR al cuerpo de TABLE.

ACTUALIZACIÓN elemento DIV no tiene ningún atributo de alineación, debe usar CSS para esto.

+0

según tablas de datos, estos elementos se colocarán dentro de los tds automáticamente, espero. Entonces necesito una forma de alinearlos. Gracias –

+0

puede hacerlo, pero si lo hace, la ordenación no funcionará (a menos que elimine el html. Creo que puede usar las clases para hacer lo que quiera a través de la API de datos –

+0

Actualicé mi respuesta – Irmantas

0

Ahora tengo la pantalla correcta pero al ordenar por edad no es correcta. Por favor ayuda. Gracias

Como tiene HMTL en esa columna, DataTables lo detectará automáticamente como tipo 'cadena' y lo ordenará según corresponda. Si desea que se ordene numéricamente, eliminando los datos HTML, utilice este complemento: http://datatables.net/plug-ins/sorting#numbers_html

Cuestiones relacionadas