C# 在JSON对象属性上排序jquery数据表-使用正交数据

使用正确的UI代码进行更新-使用正交数据进行自定义渲染

我在框架4.5.1中使用MVC，在使用jquery datatables 1.10.7在表中创建自定义排序时遇到了一个问题。引导也在项目中使用

最初一切正常，但当我决定自定义渲染列以显示图像时，情况发生了变化。图像的渲染很好，但是对于这个新列，排序根本不起作用。作为此列的数据源返回的JSON是一个具有3个属性的对象：Process.Id、Process.Description和Process.ImageUrl。排序应基于Process.Id进行。渲染只是创建一个图像标记，其中有一些逻辑可以动态地向标题添加一些信息。最后一次渲染将创建一个按钮链接以查看更多详细信息

以下是我视图中的datatable初始化，在doc ready期间调用：

更新：columnDefs已更新，以便在需要自定义排序值或图像标记时正确渲染

function LoadDataTable() {
    table = $('#accountsRequests').DataTable(
      {
          "destroy": true,
          "processing": true,
          "ajax":
              {
                  "type": "GET",
                  "url": "@Url.Action(MyActionName, MyControllerName)"
              }
          , "paging": true
          , "columns": [
                { "data": "UserId" },
                { "data": "Process", title: "Status" },
                { "data": "LastName", "title": "Last Name" },                 
                { "data": "UserId" }
          ]
          , "columnDefs": [
              {
                  "targets": 0, // hiding first column, userId
                  "visible": false,
                  "searchable": false,
                  "sortable": false
              },
                 {
                     "targets": 1,
                     "render": function (data, type, row) {
                         var element = "<img id='status_" + row["UserId"] + "' src='" + data["ImageUrl"] + "' data-order='" + data["Id"] + "' data-sort='" + data["Id"] + "'  title='" + data["Description"] + "";

                           if (type === "sort" || type === 'type') {
                                 return data["Id"];
                             }
                             else {
                                 if (data["Id"] == "2") // add in-process name
                                 {
                                     var userId = row["ProcessUserId"].trim();
                                     element = element + " by " + userId;
                                 }
                                 return element + "'/>";
                             }                         },
                     "searchable": false,
                     "sortable": true
                 },                            
              {
                  "targets": 3,
                  "render": function (data, type, row) {
                      return "<a class='btn btn-default' role='button' href=\"@Url.Action(MyOtherAction, MyController)?userId=" + row["UserId"] + "\">View Details</a>"
                  },
                  "searchable": false,
                  "sortable": false
              }
          ]           
      });
}

为了确保它能像预期的那样工作，我插入了一个createRow函数来确保。我以前用过这个，所以我知道它在工作时应该是什么样子。作品博耶

 "createdRow": function (row, data, index) {
              $(row).attr('data-userId', 'fadsafasdfdasfasfasa');           }

这里的输出显示createdRow函数正在工作，但是createdCell没有任何结果

---

那么，我做错了什么，如何添加我想要的排序属性（Process.Id），而不管实际显示的是什么？我可以向列定义添加排序属性吗？我见过类似的东西，但我不确定。感谢您的帮助！请告诉我上述解释中是否需要任何澄清。

我缺少的问题是，根据类型（排序、显示、类型），可以多次调用渲染函数（无论是在Column中还是ColumnDefs中）。在RENDER函数中，我需要添加逻辑来返回所呈现的给定类型所需的值。当我需要自定义排序值（Id，而不是自定义图像标记）时，请确保我具有呈现排序类型的逻辑（我猜，其中type也为'type'）。否则，渲染我需要的自定义IMG。简单，对吗

这是一段新代码，它可以按照我的要求正确处理排序和显示。检查类型并执行所需操作

 {
                     "targets": 1,
                     "render":
                         function (data, type, row) {
                             var element = "<img id='status_" + row["UserId"] + "' src='" + data["ImageUrl"] + "' title='" + data["Description"] + "";

                             if (type === "sort" || type === 'type') {
                                 return data["Id"];
                             }
                             else {
                                 if (data["Id"] == "2") // add in-process name
                                 {
                                     var userId = row["ProcessUserId"].trim();
                                     element = element + " by " + userId;
                                 }
                                 return element + "'/>";
                             }
                         },
                     "searchable": false,
                     "sortable": true,
                 },

{
"目标":一,，
“渲染”：
函数（数据、类型、行）{
var元素=”；
}
},
“可搜索”：错误，
“可排序”：正确，
},

看一看，我将正交数据添加到了列定义中，但仍然无法对字段进行排序。当我移除渲染并只显示Id值时，所有排序都很好（并且可能在没有正交数据的情况下工作得很好）。我仍然缺少一些东西，我已经更新了上面的问题来说明我的更改。请看一看并查看我的更改。如果您看一看文档，

：

和

排序：

应该放在

呈现：

选项中，而不是

数据：

选项中。试试看有没有什么变化。我发现的所有示例要么在列中有render（而不是像你说的那样在数据中），要么在columnDefs配置中。在config列中，我只找到了使用单个数据源的示例。在columnDefs中，我只看到了返回自定义输出的函数。就我的工作而言，这两种方法都不会返回我需要的两个部分（自定义排序和自定义输出）。我遗漏了什么？首先，

columnDefs

和

columns

本质上是一样的；可以在

columnDefs

中定义的任何内容也可以在

column

中定义。一个问题（我之所以要评论而不是回答）是因为我从未尝试使用

render

作为正交数据的函数，所以我不知道它是否是完全相同的语法。如果有帮助，请尝试将所有

columndef

内容移动到

列

声明中。请参阅文档以了解这些和。

 {
                     "targets": 1,
                     "render":
                         function (data, type, row) {
                             var element = "<img id='status_" + row["UserId"] + "' src='" + data["ImageUrl"] + "' title='" + data["Description"] + "";

                             if (type === "sort" || type === 'type') {
                                 return data["Id"];
                             }
                             else {
                                 if (data["Id"] == "2") // add in-process name
                                 {
                                     var userId = row["ProcessUserId"].trim();
                                     element = element + " by " + userId;
                                 }
                                 return element + "'/>";
                             }
                         },
                     "searchable": false,
                     "sortable": true,
                 },