Question

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

我在框架4.5.1中使用MVC C＃，并且我在使用jquery数据表1.10.7在表中创建自定义排序时遇到问题。 Bootstrap也在项目中使用。

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

这是我视图中的数据表初始化，在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
              }
          ]           
      });
}

这就是UI上的样子：

这里是Process对象的定义：

我试图将数据排序和数据顺序HTML5属性动态添加到我的render语句中，但似乎没有做任何事情。这会将这些属性添加到图像本身，这可能对排序无效。

我还试图使用createCell回调函数，如下所示，并且根本不用，我不会放在那里。在我的例子中，作为一个快速测试，我试图向所有单元格添加内容。我一无所获。

"createdCell": function (cell, cellData, rowData, rowIndex, colIndex) {
              $(cell).attr('data-userId', 'adsfadsasfas');}

为了确保这是按预期工作，我插入了一个createRow函数，以确保。我以前一直在使用它，所以我知道工作时应该是什么样子。作品。 Boooyah！

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

这里的输出显示createdRow函数正在工作，但创建的Cell没有任何内容。

那么，我做错了什么，如何添加我想要的排序属性（Process.Id），无论实际显示的是什么？我可以在Column定义中添加sort属性吗？我见过类似的东西，但我不确定。任何帮助表示赞赏！如果上述说明中有任何必要的说明，请与我们联系。

Answer 1

我缺少的问题是RENDER函数（无论是在Column还是ColumnDefs中）可以多次调用，具体取决于TYPE（排序，显示，类型）。在RENDER函数中，我需要添加逻辑，该逻辑返回我所呈现的给定类型所需的值。当我想要自定义排序值（Id，而不是自定义图像标签）时，请确保我有渲染SORT类型的逻辑（我想，TYPE =＆＃39; type＆＃39;）。否则，渲染我需要的自定义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,
                 },

在JSON对象属性上对jquery DataTables进行排序 - 使用Orthogonal数据

1 个答案: