2015-06-16 11 views
5

Sto usando jQuery DataTables 1.10.7. Ho limitato alcune colonne. In quel poche colonne sono statici e pochi sono dinamici.Come aggiungere colonne statiche in jQuery DataTables

Così attualmente ho legato circa 20 colonne (statiche + dinamiche) in DataTable. Ora, ho vincolato fino a 20 colonne ora suppongo che se sto rilegando 21 cols mi dà errore come

Avviso DataTables: tabella id = DataGrid - Risposta JSON non valida. Per ulteriori informazioni su questo errore, vedere http://datatables.net/tn/1

Si prega di allegati screenshot. Nella prima istantanea funziona fino alle colonne a portata di mano e le prossime schermate visualizzeranno un errore mentre collego la prossima colonna di OnHand.

Ho impostato anche questa parte nel mio DataTable.

"aoColumns": [ 
    { sWidth: '1%' }, { sWidth: '5%' }, { sWidth: '5%' }, { sWidth: '5%' }, { sWidth: '5%' }, { sWidth: '5%' }, 
    { sWidth: '5%' }, { sWidth: '5%' }, { sWidth: '5%' }, { sWidth: '5%' }, { sWidth: '5%' }, { sWidth: '5%' }, 
    { sWidth: '5%' }, { sWidth: '5%' }, { sWidth: '5%' }, { sWidth: '5%' }, { sWidth: '5%' }, { sWidth: '5%' }, 
    { sWidth: '5%' }, { sWidth: '5%' }, { sWidth: '5%' }, { sWidth: '5%' } 
], 

enter image description here enter image description here

Ecco il mio codice come questo

function OnddlRegionRankGroupChange(val) { 

    var Tblheader = ''; 
    var trHTML = ''; 

    Re_Bind_DataTable(); 
    $("#DataGrid").empty() 

    Tblheader = '<thead><tr><th rowspan="2" style="width: 5%;">Excl.</th><th rowspan="2">CUC</th> <th rowspan="2"> Late Model </th><th colspan="2">' + '1 Year Rank </th><th colspan="2"> 1 Year Sales Qty </th> <th rowspan="2"> Whse Looksup </th><th colspan="12" align="center"> Qty of Parts Sold by Mo.' + 
    '</th> <th rowspan="2"> Days OOS </th> <th rowspan="2"> On Hand </th> <th colspan="4" align="center"> Re-Order High </th> <%--<th> &nbsp; </th>--%> ' + 
    '</tr> <tr> <th> Whse </th> <th> Region </th><th> Whse </th> <th>Region</th><th> 12 </th> <th>11</th> <%--<th> .... </th>--%> <th class="cellhidden"> ' + 
    '10 </th> <th class="cellhidden">9 </th> <th class="cellhidden"> 8 </th> <th class="cellhidden"> 7 </th> <th class="cellhidden"> 6 </th>' + 
    '<th class="cellhidden"> 5 </th> <th class="cellhidden">4 </th> <th> 3</th> <th>2 </th> <th> 1 </th> <th> Current </th> <th> Diff </th> <th>' + 
    ' Recomd </th> <th> Last </th> <%--<th> &nbsp; </th>--%> </tr> </thead>'; 

    $("#DataGrid").append(Tblheader); 

    $('#DataGrid').DataTable({ 
    "iDisplayLength": 25, 
    "aaSorting": [[0, 'desc']], 
    "bServerSide": true, 
    "bProcessing": false, 
    "bPaginate": true, 
    "sDom": 'fltip', 
    "bDeferRender": true, 
    "sAjaxSource": '<%= Url.Action("GetTest") %>', 
    "fnServerParams": function (aoData) { 
     aoData.push({ "name": "WhseID", "value": $("#ddlWarehouse").val() }, 
        { "name": "strCatg", "value": $("#ddlCategory").val() }) 
    }, 
    "aoColumns": [ 
     { sWidth: '1%' }, { sWidth: '5%' }, { sWidth: '5%' }, { sWidth: '5%' }, { sWidth: '5%' }, { sWidth: '5%' }, 
     { sWidth: '5%' }, { sWidth: '5%' }, { sWidth: '5%' }, { sWidth: '5%' }, { sWidth: '5%' }, { sWidth: '5%' }, 
     { sWidth: '5%' }, { sWidth: '5%' }, { sWidth: '5%' }, { sWidth: '5%' }, { sWidth: '5%' }, { sWidth: '5%' }, 
     { sWidth: '5%' }, { sWidth: '5%' }, { sWidth: '5%' }, { sWidth: '5%' } 
    ],  
    "fnInitComplete": function (oSettings, json) { 
     setTimeout(function() { $.loader('close'); }, 1000); 
    } 
    }); 
} 
+0

abbiamo bisogno di maggiori informazioni da voi. questo errore è stato attivato dalla tua chiamata ajax? – Mox

+0

E per favore mostraci come associ i tuoi dati al DT – Mox

+0

Mostra come stai aggiungendo colonne dinamiche e stai inizializzando nuovamente DataTable? –

risposta

1

Infine ho avuto risposta della mia domanda. In realtà, il mio problema era che avevo legato fino a 20 colonne (tra cui statico e dinamico). Fino a 20 cols stava funzionando molto bene. Ma una volta che vado avanti e provo ad aggiungere un altro col (21 ° cols) in quel momento, ero di fronte al problema.

Solution è sufficiente impostare sotto la linea in config DataTable impostazione

"sServerMethod": "POST",

esempio

$("#DataGrid").DataTable({ 
         "iDisplayLength": 10, 
         "bServerSide": true, 
         "sDom": 'fltip', 
         "sAjaxSource": '<%= Url.Action("GetTest") %>', 
         *"sServerMethod": "POST"* 
}) 

Perché metodo POST capacità di memorizzazione di risposta è meglio di GET Response. Ottieni il metodo con limiti di memorizzazione della risposta.

Problemi correlati