logo标签列表

jQuery DataTables渲染列数据

jqueryjsonsortingdatatables
6
我正在使用jQuery DataTables来显示来自JSON编码的PHP响应的信息。JSON响应包含对象“name”。 “name”包含“Full Name”，“Last Name”和“ID”。我一直在使用columns以我想要的方式显示数据，但是，我遇到了一个无法解决的问题。
在下面的代码中，示例1可以正常工作，并将按“Last Name”排序显示“Full Name”。但是，示例2根本不起作用。期望的输出将包含HTML呈现的显示，并按“Last Name”排序。在示例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>';
            } 
        },
]
});

更新：

这里是我正在处理的数据结构的JSFiddle。该工作示例仅按姓氏排序显示全名。 我正在尝试弄清楚如何使显示包含一个带ID作为id属性的span元素。

从我找到的所有例子来看，问题在于为了允许数据表的顺序，它们没有在单元格中创建任何额外的标签，那么为什么不尝试将 ID 添加到 td 中而不使用 span？以你的第一个例子为例。 - cralfaro
你能否制作一个简单的JSFiddle来说明你的用例吗？例如，你的表格有3列吗？你可以通过使用一个简单的JSON对象作为数据源来模拟ajax返回。 - annoyingmouse
@annoyingmouse，我不确定如何在JSFiddle中设置JSON响应。然而，我的代码示例应该只显示包含完整名称的HTML的一列。我只是展示了3个示例，以便人们可以更好地了解我要做什么。 - Austin
4个回答
11

原来使用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;
                }
            }
        }
   ]
1
如果您需要按姓氏对列进行排序，可以使用以下方法：
$.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'
  }]
});

这里正在工作。你也可以删除渲染函数，只需调整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'
  }]
});

这里是这里。希望能帮到你，我理解你的需求了。

我添加了一个我正在使用的数据结构的示例。我尝试使用你的代码，但是我无法让它工作。 - Austin
"data" only lets me use Full Name. It won't let me add any HTML formatting. I'm looking for the display to render as: <span id="'+ID+"'>'+Full Name+'</span>' - Austin
请再试一次，我已经更新了 JSFiddle 来输出正确的“span”。希望这可以帮到你。 - annoyingmouse
1
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];
                    }
                },

            ],
     });
  }
0
你可以尝试这个：
{
    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>`
                           }
                       },
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接