2017-11-24 11 views
0

私のプロジェクトの1つでMVC.JQuery.DataTablesバージョン1.5.36を使用しています。 Ajaxオプションを使用してサーバー側からデータを照会しています。データを取得するMVC.JQuery.DataTables - ソートが機能しない

コントローラのアクションは以下の通りです:私はバージョン1.3から更新された後

function CreateMyTasksDataTable(elementId, url, data) { 
    if (tasksTable != null) { 
     tasksTable.destroy(); 
    } 
    tasksTable = $('#' + elementId).DataTable({ 
     "language": { 
      "url": "/scripts/locales/DataTable/@(Model.DatatableLanguageCode).json" 
     }, 
     dom: '<"html5buttons"B>lTfgitp', 
     buttons: [ 
      { extend: 'copy' }, 
      { extend: 'csv' }, 
      { extend: 'excel', title: '@Strings.MyTasks' }, 
      { extend: 'pdf', title: '@Strings.MyTasks' }, 
      { 
       extend: 'print', 
       customize: function (win) { 
        $(win.document.body).addClass('white-bg'); 
        $(win.document.body).css('font-size', '10px'); 

        $(win.document.body).find('table') 
          .addClass('compact') 
          .css('font-size', 'inherit'); 
       } 
      } 
     ], 
     autoWidth: false, 
     pageLength: 50, 
     responsive: true, 
     ajax: { url: url, type: "POST", data: data }, 
     serverSide: true, 
     searching: false, 
     stateSave: true, 
     columns: [ 
         { data: "Title" }, 
         { data: "Id" }, 
         { data: "ListTitle" }, 
         { data: "DueDateString" }, 
         //{ 
         // data: { 
         //  _: "DueDateString", 
         //  sort: "DueDateFileTimeUTC" 
         // } 
         //}, 
         { data: "Status" }, 
         { data: "Effort" }, 
         { data: "WorkUnits" }, 
         { data: "TotalWork" }, 
         { data: "Id" } 
     ], 


     columnDefs: [ 
       { 
       render: function (data, type, row) { 
         var rowHtml = "<button class='ladda-button btn btn-sm btn-primary btn-3-3 btn-edit' data-style='slide-up' onclick='LoadEditTaskWindow(\"" + row.Id + "\", \"" + row.ListId + "\");'><i class='fa fa-pencil' style='margin-right:5px;'></i> @Strings.ButtonEdit</button>"; 
         return rowHtml; 
        }, 
        targets: 8 
       }, 
       { 
        render: function (data, type, row) { 
         var rowHtml = '<a href="@Url.Action("Tasks", "TaskBoard")?listId=' + row.ListId + '">' + row.ListTitle + '</a>'; 
         return rowHtml; 
        }, 
        targets: 1 
       }, 
       { 
        render: function (data, type, row) { 
         var rowHtml = ''; 
         if (row.IsNew) { 
          rowHtml = rowHtml + " <span class='label label-success'>@Strings.New</span>"; 
         } 

         if (row.Stuck) { 
          rowHtml = rowHtml + " <span class='label label-warning'>@Strings.OnHold</span>"; 
         } 

         if (row.IsOverdue) { 
          rowHtml = rowHtml + " <span class='label label-danger'>@Strings.OverDue</span>"; 
         } 

         return rowHtml; 
        }, 
        targets: 2 
       } 
     ] 
    }); 
    $('#' + elementId).on('draw.dt', function() { 
     stop_laddaButtons(); 
     init_laddaButtons(); 
    }); 
} 

 public async Task<ActionResult> GetAllMyTasksTable(DataTablesParam dataTableParam, DateRangeQueryOption queryParameters) 
    { 
     var currentUser = await UserService.CurrentUser(); 
     var timezoneOffsetMinutes = UserSettings.UTCOffsetMinutes; 
     var tasks = TaskBoardService.GetAllMyTasks(currentUser, queryParameters, timezoneOffsetMinutes).OrderBy(t => t.DueDate).ThenBy(t => t.ListTitle); 
     return DataTablesResult.Create(tasks.Select(t => new SPTaskViewModel(t.Id, t.Title) 
     { 
      ListTitle = t.ListTitle, 
      DueDateString = t.DueDateString, 
      Status = t.Status, 
      Effort = t.Effort, 
      WorkUnits = t.WorkUnits, 
      TotalWork = t.TotalWork 
     }).AsQueryable().Cast<SPTaskViewModel>(), dataTableParam, new ResponseOptions<SPTaskViewModel>() { ArrayOutputType = ArrayOutputType.ArrayOfObjects }); 
    } 

JavaScriptでクライアント側でのデータテーブルの構成はこれです。 xx、ソーティングが停止しました。

データ/設定に問題があり、ソートが機能しなくなったことがわかりません。

誰もが同様の問題を抱えており、解決策を見つけましたか?

これは私がモデルバインダーが登録されていないかもしれないと思う私は、JavaScriptのオブジェクト

enter image description here に見て、これはコントローラ enter image description here

+0

こんにちは、私はMvc.JQuery.DataTables .NETコードを書いています。私はあなたが達成しようとしていることで少し混乱しています。 サーバーサイドのみの並べ替えを実行しようとしていますか?つまりクライアントはそれを制御しません。 – mcintyre321

+0

こんにちは、私はクライアント側の並べ替えをしたいです。私は私のプロジェクトでバージョン1.3.56から1.5.36に更新しました。更新後、クライアント側のソートはもう機能しませんでした。私はそれを再び働かせるために多くのことを試しましたが、ソートがなぜ機能しなくなったのか、何らかの理由を見つけることができませんでした。私はもう一度格下げした後、前と同じように働いた。テーブルの列ヘッダーをクリックすると、1.5.36を使用しても何も起こりません。奇妙なことは、サーバー側がクライアント側と何をしなければならないのか...問題を再現できますか、それとも私のプロジェクトで起こっていますか? –

+0

Fiddlerを使用して投稿されたデータをキャプチャできますか?フィルタオプションが正しく渡されているかどうかを確認してください。 – mcintyre321

答えて

1

での.NETオブジェクトである - これを追加してみてください:

(Global.asaxの/のApplication_Start中など)のスタートアップコードに
if (!ModelBinders.Binders.ContainsKey(typeof (DataTablesParam))) 
       ModelBinders.Binders.Add(typeof (DataTablesParam), new DataTablesModelBinder()); 

+0

ありがとうございました。これはそれだった:-) –

関連する問題