2016-05-12 13 views
1

Wenn ich serverseitige Verarbeitung in Datentabelle verwende, funktioniert die Sortierung, aber das Sortiersymbol ändert sich nicht und bleibt in der gleichen Richtung. Unten ist das Code-Snippet meiner Datat-Konfiguration.Sortierungssymbol ändert sich nicht in Datatable serverseitige Verarbeitung

$('#dtSearchResult').DataTable({ 
        "filter": false, 
        "pagingType": "simple_numbers", 
        "orderClasses": false, 
        "order": [[0, "asc"]], 
        "info": true, 
        "scrollY": "450px", 
        "scrollCollapse": true, 
        "bLengthChange": false, 
        "searching": true, 
        "bStateSave": false, 
        "bProcessing": true, 
        "bServerSide": true, 
        "sAjaxSource": VMCreateExtraction.AppSecurity.websiteNode() + "/api/Collection/SearchCustIndividual", 
        "fnServerData": function (sSource, aoData, fnCallback) { 
         aoData.push({ "name": "ccUid", "value": ccUid }); 
         //Below i am getting the echo that i will be sending to Server side 
         var echo = null; 
         for (var i = 0; i < aoData.length; i++) { 
          switch (aoData[i].name) { 
           case 'sEcho': 
            echo = aoData[i].value; 
            break; 
           default: 
            break; 
          } 
         } 
         $.ajax({ 
          "dataType": 'json', 
          "contentType": "application/json; charset=utf-8", 
          "type": "GET", 
          "url": sSource, 
          "data": aoData, 
          success: function (msg, a, b) { 
           $.unblockUI(); 

           var mappedCusNames = $.map(msg.Table, function (Item) { 
            return new searchGridListObj(Item); 
           }); 
           var data = { 
            "draw": echo, 
            "recordsTotal": msg.Table2[0].TOTAL_NUMBER_OF_RECORDS, 
            "recordsFiltered": msg.Table1[0].FILTERED_RECORDS, 
            "data": mappedCusNames 
           }; 
           fnCallback(data); 
           $("#dtSearchResult").show(); 
           ko.cleanNode($('#dtSearchResult')[0]); 
           ko.applyBindings(VMCreateExtraction, $('#dtSearchResult')[0]); 
          } 
         }) 
        }, 
        "aoColumns": [{ 
         "mDataProp": "C_UID" 
        }, { 
         "mDataProp": "C_LAST_NAME" 
        }, { 
         "mDataProp": "C_FIRST_NAME" 
        }, { 
         "mDataProp": "C_USER_ID" 
        }, { 
         "mDataProp": "C_EMAIL" 
        }, { 
         "mDataProp": "C_COMPANY" 
        }], 
        "aoColumnDefs": [{ "defaultContent": "", "targets": "_all" }, 
       //I create a link in 1 st column 
        ] 
       }); 

Es gibt einige Konfigurationen, die ich hier vermisse. Ich habe in Datatable-Foren gelesen und das einzige Problem, das von Leuten hervorgehoben wurde, war, dass das Zeichnen dasselbe sein sollte wie das, was wir auf der Serverseite senden.

+0

Können Sie sehen, ob der Server-Code die richtigen Daten zurückgibt? Möglicherweise müssen Sie sich die "success: function (msg, a, b)" des Codes ansehen. –

+0

msg ist das von DB zurückgegebene jsonResult und es ist korrekt. Ich erstelle die Daten für fnCallback mit dieser Zeile über 'var data = { "zeichnen": echo, "recordsTotal": msg.Table2 [0] .TOTAL_NUMBER_OF_RECORDS, "recordsFiltered": msg.Table1 [0] .FILTERED_RECORDS , "Daten": mappedCusNames }; ' –

+0

Ist dies der Fall? Https: //datatables.net/forums/discussion/25552/sorting-icons-do-not-change-when-using-server-side-processing –

Antwort

1

Für alle, die eine Antwort darauf suchen. Traurig, aber ich hatte meine eigene Funktion zu schreiben, wie unten:

function sortIconHandler(thArray, sortCol, sortDir) { 
 
     for (i = 0; i < thArray.length; i++) { 
 
      if (thArray[i].classList.contains('sorting_asc')) { 
 
       thArray[i].classList.remove('sorting_asc'); 
 
       thArray[i].classList.add("sorting"); 
 
      } 
 
      else if (thArray[i].classList.contains('sorting_desc')) { 
 
       thArray[i].classList.remove('sorting_desc'); 
 
       thArray[i].classList.add("sorting"); 
 
      } 
 
      if (i == sortCol) { 
 
       if (sortDir == 'asc') { 
 
        thArray[i].classList.remove('sorting'); 
 
        thArray[i].classList.add("sorting_asc"); 
 
       } 
 
       else { 
 
        thArray[i].classList.remove('sorting'); 
 
        thArray[i].classList.add("sorting_desc"); 
 
       } 
 
      } 
 
     } 
 
    }

tharrray-> Das Array aller Zeilenköpfe (Sie können nur einen jQuery-Selektor für dieses schreiben).

sortCol-> Spalte, auf die Art geklickt wird (Datatable param iSortCol_0)

sortDir -> Sortierrichtung (Datatable param sSortDir_0)

Verwandte Themen