【发布时间】:2018-05-08 19:33:06
【问题描述】:
我在我的一个项目中使用 MVC.JQuery.DataTables 版本 1.5.36。 我正在使用 Ajax 选项从服务器端查询数据。
获取数据的控制器动作如下:
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中客户端数据表的配置是这样的:
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();
});
}
从 1.3.xx 版本更新后,排序停止工作。
我无法弄清楚,我的数据/配置有什么问题,排序停止工作。
有没有人遇到过类似的问题并找到了解决方案?
这是我在 JavaScript 对象中看到的
【问题讨论】:
-
嗨,我编写了 Mvc.JQuery.DataTables .NET 代码。我对您要达到的目标感到有些困惑。您是否尝试仅在服务器端进行排序?即客户端不控制它?
-
嗨,我想做客户端排序。我已经在我的项目中从版本 1.3.56 更新到 1.5.36。更新后,客户端排序不再起作用。我已经尝试了很多方法让它再次工作,但我找不到任何原因,为什么排序停止工作。我再次降级后,它像以前一样工作。当我单击表中的列标题时,使用 1.5.36 根本没有任何反应。奇怪的是,服务器端与客户端有什么关系......你能重现这个问题还是它只是发生在我的项目中。
-
您可以使用 Fiddler 捕获发布的数据吗?查看过滤器选项是否正确传递。
-
确保 Datatables 版本与示例站点上的版本相匹配 - 您可以看到所有功能都在那里工作aspdatatables.azurewebsites.net
-
您好,感谢您的提示,我会尽快尝试并告诉您结果。
标签: javascript asp.net-mvc datatables mvc.jquery.datatables