jQuery DataTables 呈现列数据答案

【问题标题】：jQuery DataTables render column datajQuery DataTables 呈现列数据
【发布时间】：2017-06-18 08:00:58
【问题描述】：

我正在使用 jQuery DataTables 来显示来自 JSON 编码的 PHP 响应的信息。 JSON 响应包含对象“名称”。 “name”包含“Full Name”、“Last Name”、“ID”。我一直在使用columns 以我想要的方式显示数据，但是我遇到了一个我无法弄清楚的问题。

在下面的代码中，示例 1 工作正常，在按“姓氏”排序时将显示“全名”。但是，示例 2 根本不起作用。所需的输出将包含 HTML 呈现的显示并按“姓氏”排序。在示例 3 中，显示以我想要的方式呈现，但排序不正确。

有谁知道如何调整示例 2 以输出我正在寻找的内容（渲染和排序的数据）？

var oTable = $('#table').DataTable({
'ajax': {
    url: 'PHP-file-returns-JSON.php',
    type: "POST",
    dataSrc: function ( data ) {
            return data.cols;
        },       
    data: function(d) {

       ///send additional values to POST
       var frm_data = $('#val1, #val2').serializeArray();
       $.each(frm_data, function(key, val) {
             d[val.name] = val.value;
       });
     }
},
'columns':[

        // exapmle 1 - works but not rendered with HTML
        { data: {
                _:    "name.Full Name",
                sort: "name.Last Name",
                } 
        },

        // example 2 not working at all
        { data: 'name', "render": function ( data, type, row ) {
                return '<span id="'+data.ID+'">'+data.Full Name+'</span>';
            },
            "sort" : "name.Last Name",
        },

        // example 3 works fine with HTML rendered display but not sorted
        { data: 'name', "render": function ( data, type, row ) {
                return '<span id="'+data.ID+'">'+data.Full Name+'</span>';
            } 
        },
]
});

更新：

HERE 是显示我正在使用的数据结构的 JSFiddle。工作示例仅显示按姓氏排序的全名。我试图弄清楚如何使显示包含一个以 ID 作为 id 属性的 span 元素。

【问题讨论】：

从所有示例中我发现问题在于，为了允许数据表的顺序，它们不会在单元格中创建任何额外的标签，那么为什么您尝试只将 id 添加到 td 并且不使用跨度?，用你的例子 1
你能设计一个简单的 JSFiddle 来说明你的用例吗？例如，您的表格是否有 3 列？您可以只使用简单的 JSON 对象作为数据源来模拟 ajax 返回。
@annoyingmouse 我不确定如何使用 JSFiddle 设置 JSON 响应。但是，我的代码示例应该只显示一列，其中包含呈现为 HTML 的全名。我只是展示了 3 个示例，以便人们更好地了解我正在尝试做什么。

标签： jquery json sorting datatables

【解决方案1】：

原来使用name.Full Name 是行不通的。它必须是 name.FullName 没有空格。这就是最终对我有用的东西。

  'columns': [
        { 
            "data": "name",                   
            "render": function ( data, type, row ) {
                if(type === 'display'){
                    return '<span id="'+data.ID+'">'+data.FullName+'</span>';
                }else if(type === 'sort'){
                    return data.LastName;
                }else{
                    return data;
                }
            }
        }
   ]

【讨论】：

【解决方案2】：

如果您需要按姓氏对列进行排序，这应该可以：

$.extend($.fn.dataTableExt.oSort, {
  "last-name-pre": function(a) {
    return $(a).data("lastname");
  },
  "last-name-asc": function(a, b) {
    return ((a < b) ? -1 : ((a > b) ? 1 : 0));
  },
  "last-name-desc": function(a, b) {
    return ((a < b) ? 1 : ((a > b) ? -1 : 0));
  }
});


$("#example").DataTable({
  "data": data,
  "columns": [{
    "title": "Full Name",
    "data": "Full Name",
    "render": function(data, type, row) {
      return $("<span></span>", {
        "text": data,
        "data-lastname": row["Last Name"]
      }).prop("outerHTML");
    },
    "type": 'last-name'
  }]
});

它正在工作here。您还可以删除渲染函数，只需调整 last-name 函数以拆分全名并返回姓氏：

$.extend($.fn.dataTableExt.oSort, {
  "last-name-pre": function(a) {
    return a.split(" ")[1];
  },
  "last-name-asc": function(a, b) {
    return ((a < b) ? -1 : ((a > b) ? 1 : 0));
  },
  "last-name-desc": function(a, b) {
    return ((a < b) ? 1 : ((a > b) ? -1 : 0));
  }
});


$("#example").DataTable({
  "data": data,
  "columns": [{
    "title": "Full Name",
    "data": "Full Name",
    "type": 'last-name'
  }]
});

这是here。希望对您有所帮助，并且我已正确理解您的要求。

【讨论】：

我添加了一个我正在使用的数据结构的示例。我尝试使用您的代码，但无法正常工作。
"data" 只允许我使用Full Name。它不会让我添加任何 HTML 格式。我正在寻找显示为：<span id="'+ID+"'>'+Full Name+'</span>'
再试一次，更新 JSFiddle 以输出正确的span。希望对您有所帮助。

【解决方案3】：

enter code herefunction Display() {
    $('#xyz').dataTable({
         "bServerSide": true,
            "bSort": false,
           "sAjaxSource": ,
            "lengthMenu": [10, 25, 50, 100],
            "iDisplayLength": 10,
            "bDestroy": true,
            "bFilter": true,
            "bPaginate": true,
            "bInfo": true,
            "sSearch": true,
            "bLengthChange": true,
            "sEmptyTable": "Loading data from server",
            "fnServerData": function (sSource, aoData, fnCallback) {
                $.ajax({
                    "dataType": 'json',
                    "type": "POST",
                    "url": sSource,
                    "data": aoData,
                    "success": fnCallback
                });
            },
            "columns": [
                {
                    "sWidth": "0.5%",
                    "render": function (data, type, row, meta) {
                        return '<a href="javascript:void(0);" User_ID="' + row[0] + 
                            '" Otp_Mobile="' + row[11] + '" IsActive="' + row[12] +

                            '"  onclick="GetEdit(this);"><i class="glyphicon glyphicon-edit"></i></a>';
                    }, "targets": 0
                },

                {
                    "sWidth": "0.5%",
                    "render": function (data, type, row, meta) {
                        return '<a href="javascript:void(0);" onclick="DeleteData(' + row[0] + ')"><i class="glyphicon glyphicon-trash"></i></a>';
                    }, "targets": 0
                },
                {
                    "sWidth": "2%",
                    "render": function (data, type, row) {
                      return row[2];
                    }
                },

                {
                    "sWidth": "2%",
                    "render": function (data, type, row) {
                        return row[1];
                    }
                },
                {
                    "sWidth": "2%",
                    "render": function (data, type, row) {
                        return row[5];
                    }
                },
                {
                    "sWidth": "2%",
                    "render": function (data, type, row) {
                        return row[7];
                    }
                },
                {
                    "sWidth": "2%",
                    "render": function (data, type, row) {
                        return row[12];
                    }
                },

            ],
     });
  }

【讨论】：

【解决方案4】：

你可以试试这个：

{
    data: null,
    title: "Audio",
    render: function (data) {
    return `<a onclick="UpdateRecord('${data.audio_status_id_string}','${"Audio"}','${data.request_id}')">${AudioStatusColor(data.audio_status_id_string)}</a>`
                           }
                       },

【讨论】：