2016-05-12 3 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 
        ] 
       }); 

いくつかの設定がここでは欠落しています。私はdatatableフォーラムで読んで、人々が強調した唯一の問題は、サーバー側で送信するものと同じでなければならないということでした。

+0

をソートサーバー・コードが正しいデータを返すかどうかを確認することはできますか?コードの "success:function(msg、a、b)"を調べる必要があるかもしれません。 –

+0

msgはDBから返されたjsonResultであり、正しいものです。 "recordsTotal"、エコー:msg.Table2 [0] .TOTAL_NUMBER_OF_RECORDS、 "recordsFiltered":msg.Table1 [0] .FILTERED_RECORDSを私は= { が "描く" 'VARデータ上にこのラインを使用してfnCallbackするためのデータを作成します、 "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->コラム(DataTableののparam iSortCol_0)

sortDir - >方向(DataTableののparam sSortDir_0)

関連する問題