So fügen Sie statische Spalten in jQuery DataTables hinzu

Question

Ich verwende jQuery DataTables 1.10.7. Ich habe wenige Spalten gebunden. In diesen wenigen Spalten sind statische und wenige sind dynamisch.

Also habe ich derzeit etwa 20 Spalten (statisch + dynamisch) in DataTable gebunden. Jetzt bin ich bis zu 20 cols binded angenommen, wenn ich 21 Spalten bin es gibt mir Fehler wie

DataTables Warnung: Tabelle ID = DataGrid - ungültige JSON Antwort. Weitere Informationen zu diesem Fehler finden Sie unter http://datatables.net/tn/1

Bitte fügen Sie Screenshots hinzu. Im ersten Schnappschuss funktioniert es bis auf die Handspalten und die nächsten Screenshots zeigen Fehler an, während ich die nächste Spalte von OnHand binde.

Ich habe diesen Teil auch in meine DataTable gesetzt.

"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%' } 
], 

meinen Code Hier wie diese

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); 
    } 
    }); 
} 

Answer 1

Schließlich bekam ich Antwort auf Ihre Frage. Eigentlich war mein Problem, ich hatte bis 20 Spalten binden (einschließlich statisch und dynamisch). Bis 20 Cols funktionierte es sehr gut. Aber als ich vorgehe und versuche, zu dieser Zeit einen weiteren Col (21th Cols) hinzuzufügen, war ich mit dem Problem konfrontiert.

Lösung ist Nur müssen unter der Linie in Table Config einzustellen Einstellung

"sServerMethod": "POST",

zB

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

Da POST-Methode Kapazität Speicherung der Antwort ist besser als GET-Antwort. Get-Methode mit Einschränkung der Speicherantwort