2016-05-12 20 views
1

當我在數據表中使用服務器端處理時,排序工作正常,但排序圖標不會更改並保持相同方向。以下是我的數據表配置的代碼片段。在Datatable服務器端處理中排序圖標不會更改

$('#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 
        ] 
       }); 

有一些配置,我在這裏失蹤。我在數據表論壇上閱讀,人們強調的唯一問題是繪製應該與我們在服務器端發送的相同。

+0

你可以看到,如果服務器代碼返回正確的數據?您可能需要查看代碼的「成功:函數(msg,a,b)」。 –

+0

msg是從數據庫返回的jsonResult,它是正確的。創建的數據fnCallback使用該線以上 'VAR數據= { 「畫」:回聲, 「recordsTotal」:msg.Table2 [0] .TOTAL_NUMBER_OF_RECORDS, 「recordsFiltered」:msg.Table1 [0] .FILTERED_RECORDS , 「data」:mappedCusNames };' –

+0

是這樣嗎?https://datatables.net/forums/discussion/25552/sorting-icons-do-not-change-when-using-server-side-processing –

回答

1

對於任何尋找答案的人。傷心,但我不得不寫下面我自己的函數:

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->所有的行標頭的數組(您可以只寫這個jQuery選擇)。

sortCol->列上排序點擊(數據表PARAM iSortCol_0)

sortDir - >選方向(數據表PARAM sSortDir_0)