Question

这是我的HTML

<table id="template_table" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Select</th>
            <th>Template Number</th>
            <th>Message Kind</th>
            <th>Template Name</th>
            <th>Preview</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>Select</th>
            <th>Template Number</th>
            <th>Message Kind</th>
            <th>Template Name</th>
            <th>Preview</th>
        </tr>
    </tfoot>
</table>

JS：

        $('#template_table').DataTable({
            "data": EMAIL_TEMPLATES,
            "columns": [
                { "data": null },
                { "data": "subDirectory" },
                { "data": "msgKind" },
                { "data": "templateName" },
                { "data": null }
            ]
        });

我想在第一列添加单选按钮（选择），值为'msgKind/subDirectory'，在最后一列（预览）添加超链接，其href为'some_domain/msgKind/subDirectory'

任何人都可以帮忙吗？

Answer 1

使用此代码在数据表列中添加任何类型的html 这是你的代码：）

$('#template_table').DataTable({
        "data": EMAIL_TEMPLATES,
        "columns": [
            {
               mRender: function (data, type, row) {
                  return '<input type="radio" name="gender" value="msgKind/subDirectory">';
               }

            },
            { "data": "subDirectory" },
            { "data": "msgKind" },
            { "data": "templateName" },
            {
               mRender: function (data, type, row) {
                  return '<a href="some_domain/msgKind/subDirectory">Preview</a>';
               }

            },
        ]
    });

Answer 2

我已经通过为EMAIL_TEMPLATES创建新属性来解决它

            for (var i=0;  i<EMAIL_TEMPLATES.length; i++) {
                var template_path = EMAIL_TEMPLATES[i]['msgKind'] + '/' + EMAIL_TEMPLATES[i]['subDirectory'];
                EMAIL_TEMPLATES[i]['preview'] = '<a target="_blank" href="some_domain/' + template_path + '">Preview</a>';
                EMAIL_TEMPLATES[i]['radio_button'] = '<input type="radio" name="selected_template" value='+ template_path + '>';
            }
            $('#template_table').DataTable({
                data: EMAIL_TEMPLATES,
                "columns": [
                    { "data": "radio_button" },
                    { "data": "subDirectory" },
                    { "data": "msgKind" },
                    { "data": "templateName" },
                    { "data": "preview" },
                ]
            });

如何在jquery数据表中插入单选按钮和超链接？

2 个答案: