2011-10-09 15 views
9

Sto utilizzando Datatables con server_processing per ottenere dati, il problema principale è che non desidero specificare il nome delle colonne in html (<th width="25" id ="th1">id</th>), Voglio creare colonne dinamicamente quando ottengo dati da ajax.Creazione di colonne dinamicamente con Datatables Jquery

Il mio codice è:.

$('#table').dataTable({ 

    "bProcessing": true, 
    "bServerSide": true, 
    "sAjaxSource": "server_processing.php?db="+pid+"&table="+id+"", //pid is the name of database and id the name of the table 
    "bJQueryUI": true, 
    "sPaginationType": "full_numbers" 

});    

risposta

5

"Anche se DataTable possono ottenere informazioni sulla tabella direttamente dal DOM, si potrebbe desiderare di dare DataTable istruzioni specifiche per ogni singola colonna Questo può essere fatto utilizzando la parametro aoColumnDefs o aoColumns e informazioni sull'oggetto fornite per ogni colonna. " - http://datatables.net/usage/columns

qualcosa di simile:

html

<table class="display" id="table"></table> 

js

$("#table").dataTable({ 
    bJQueryUI:true, 
    aoColumns:[ 
     {mDataProp:"foo",sTitle:"Foo Title"}, 
     {mDataProp:"bar",sTitle:"Bar Title"} 
    ], 
    fnServerData: function(sUrl, data, fnCallback){ 
     $.get('data.php', function(res) { 
      fnCallback({ // process results to match table format 
       "sEcho":config.sEcho, 
       "iTotalRecords":res.data.total || res.data.count, 
       "iTotalDisplayRecords":res.data.count || res.data.total, 
       "aaData":res.data.list 
      }) 
     }); 
    } 
}) 

Dove data.php è

{ 
    data:{ 
     total:200, 
     count:3, 
     list:[ 
      {foo:"Foo 1",bar:"Bar 1"}, 
      {foo:"Foo 2",bar:"Bar 2"}, 
      {foo:"Foo 3",bar:"Bar 3"}, 
     ] 
    } 
} 

C'è anche una buona sintesi di configurazione di questo qui: http://datatables.net/usage/options#aaData

+0

Questa è una bella risposta, tuttavia, non risponde alla OP vero e proprio. Sta chiedendo informazioni sui nomi delle colonne e sulle colonne e stai rispondendo dei dati. –

+0

Ehi Giovanni, grazie per il commento, ma per curiosità, ti sei perso la prima parte del post? aoColumns descrive i nomi delle colonne. Ho aggiunto i dati JSON per chiarezza. – Shanimal

Problemi correlati