Jquery DataTables如何用超链接填充列？

我正在使用DataTables服务器端处理，希望在某些表的第一个单元格中添加超链接

我能够添加一列并正确呈现表格，但我不知道如何将超链接导入单元格

我不希望每个桌子上都有这个，现在只会有两个，但这可能会改变

我对所有表使用相同的初始化，但所有表的列并不相同。根据我呈现的表的不同，可以有3到65列，所以我不能只将这些列添加到初始化中。下面是我现在初始化的方式：

$(document).ready(function ()
{
    // Setup - add a text input to each footer cell
    $('#DataTable tfoot th').each(function ()
    {
        var title = $(this).text();
        $(this).html('<input type="text" placeholder="Search ' + title + '" />');
    });

    var table = $('#DataTable').DataTable({
        "lengthMenu": [[25, 50, 75, 100, 150, -1], [25, 50, 75, 100, 150, 'All']],
        "dom": '<"top"Bifpl<"clear">>rt<"bottom"ip<"clear">>',
        "buttons": [{
            extend: 'collection',
            text: 'Selection',
            buttons: ['selectAll', 'selectNone']
        }, {
            extend: 'collection',
            text: 'Export',
            buttons: ['export', 'excel', 'csv', 'pdf', { extend: 'excel',
                text: 'Export Current Page',
                exportOptions: {
                    modifier: {
                        page: 'current'
                    }
                },
                customize: function (xlsx)
                {
                    var sheet = xlsx.xl.worksheets['sheet1.xml'];
                    $('row:first c', sheet).attr('s', '7');
                }
            },

            {
                text: 'Export All to Excel',
                action: function (e, dt, button, config)
                {
                    dt.one('preXhr', function (e, s, data)
                    {
                        data.length = -1;
                    }).one('draw', function (e, settings, json, xhr)
                    {
                        var excelButtonConfig = $.fn.DataTable.ext.buttons.excelHtml5;
                        var addOptions = { exportOptions: { 'columns': ':all'} };

                        $.extend(true, excelButtonConfig, addOptions);
                        excelButtonConfig.action(e, dt, button, excelButtonConfig);
                    }).draw();
                }
            }]
        }
        ],
        "fixedHeader": {
            header: true,
            footer: true
        },
        "select": true,
        "processing": true,
        "serverSide": true,
        "ajax": {
            "url": "./ServerSide.php",
            "type": "POST"
        },
//Added this to the initialization
        columnDefs: [
        {
            targets: 0,
            render: function (data, type, row, meta)
            {
                if (type === 'display')
                {
                    data = '<a href="FormToEdit.php?everything=' + encodeURIComponent(row) + '">' + data + '</a>';
                }
                return data;
            }
        }],
//It adds the hyperlink to all tables and not just the ones that I want
        initComplete: function ()
        {
            var api = this.api();

            // Apply the search
            api.columns().every(function ()
            {
                var that = this;

                $('input', this.footer()).on('keyup change', function ()
                {
                    if (that.search() !== this.value)
                    {
                        that
                          .search(this.value)
                          .draw();
                    }
                });
            });
        }
    });
});

$（文档）.ready（函数（）
{
//设置-向每个页脚单元格添加文本输入
$（'#DataTable tfoot th'）。每个（函数（）
{
var title=$（this.text（）；
$（this.html（“”）；
});
变量表=$（'#DataTable'）。DataTable({
“长度菜单”：[[25,50,75,100,150，-1]，[25,50,75,100,150，'全部']，
“dom”：“rt”，
“按钮”：[{
扩展：'集合'，
文本：“选择”，
按钮：['selectAll'，'selectNone']
}, {
扩展：'集合'，
文本：“导出”，
按钮：[“导出”、“excel”、“csv”、“pdf”、{扩展：“excel”，
文本：“导出当前页面”，
出口选择：{
修饰语：{
页面：“当前”
}
},
自定义：功能（xlsx）
{
var sheet=xlsx.xl.worksheets['sheet1.xml']；
$（'row:first c'，sheet）.attr（'s'，'7'）；
}
},
{
文本：“全部导出到Excel”，
动作：功能（e、dt、按钮、配置）
{
dt.one（'preXhr'，函数（e，s，数据）
{
data.length=-1；
}).one（'draw'，函数（e、设置、json、xhr）
{
var excelButtonConfig=$.fn.DataTable.ext.buttons.excelHtml5；
var addOptions={exportOptions:{'columns'：'：all'}}；
$.extend（true、excelButtonConfig、addOptions）；
excelButtonConfig.动作（e、dt、button、excelButtonConfig）；
}).draw（）；
}
}]
}
],
“fixedHeader”：{
标题：对，
页脚：对
},
“选择”：true，
“处理”：对，
“服务器端”：正确，
“ajax”：{
“url”：“../ServerSide.php”，
“类型”：“职位”
},
//将此添加到初始化中
columnDefs：[
{
目标：0，
呈现：函数（数据、类型、行、元）
{
如果（类型==‘显示’）
{
数据=''；
}
返回数据；
}
}],
//它将超链接添加到所有表，而不仅仅是我想要的表
initComplete:函数（）
{
var api=this.api（）；
//应用搜索
api.columns（）.every（函数（）
{
var=这个；
$（'input'，this.footer（））.on（'keyup change'，function（）
{
if（that.search（）！==此.value）
{
那个
.search（此.value）
.draw（）；
}
});
});
}
});
});

以下是我创建表的方式：

<?php
    $hsql = "select Headings from TableHeadings where TableName = '$TableName' order by Id";

    $getHeadings = $conn->query($hsql);
    $rHeadings = $getHeadings->fetchALL(PDO::FETCH_ASSOC);
    $CountHeadings = count($rHeadings);
    $tsqlHeadings = '';
    for ($row = 0; $row < $CountHeadings; $row++)
    {
        $headings[$row] = $rHeadings[$row]["Headings"];
    }
?>
<table id="DataTable" class="display nowrap" style="width: 100%; border: 1px">
    <thead>
        <tr>
            <?php
            foreach($headings as $heading)
            {?>
            <th class="cell"><?php echo $heading; ?></th><?php
            }?>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <?php
            foreach($headings as $heading)
            {?>
            <th class="cell"><?php echo $heading; ?></th><?php
            }?>
        </tr>
    </tfoot>
</table>

编辑

---

我已经用我添加的内容编辑了上面的初始化脚本。现在的问题是，它将此超链接添加到所有表中，而不仅仅是包含Edit列的表中。如果第一列标题是“编辑”，我将如何进一步修改它以使其仅出现在表中？

我已决定以不同的方式进行此操作

可编辑的表格将被赋予不同的

ID

，然后用上述代码初始化。其余部分将在第一列中不包含创建超链接的部分的情况下初始化。现在我有了创建表的方法：

<table id="<?php if($Edit == 1){echo "DataTableEdit";}elseif($Edit == 0){echo "DataTable";}?>" class="display nowrap" style="width: 100%; border: 1px">

---

这允许我有可编辑的表和不可编辑的表。我可以将

$Edit

添加到任何需要编辑的表中。

请参阅：@EhsanSajjad如果我不命名所有列，这会起作用吗？此外，由于我对所有表都使用相同的初始化，因此在没有hyperlink列的表上，这会不会弄乱它们？您可以看到：@EhsanSajjad和@EhsanSajjad我根据您提供的内容对代码进行了一些编辑。不过，它会在每个表的第一列中放置一个超链接。是否有办法将其限制为仅包含第一列标题为Edit的表？或者没有Id作为第一个标题？为了避免出现空的

Id

，对于礼宾，我会使用这个：

Id=“”

。顺便说一句，你可以接受你自己的答案。@GustavoStraube我忘了那个符号，谢谢。我知道我可以接受我自己的答案，这让我等了6个小时才发帖。

<script type="text/javascript" class="init">
    $.fn.dataTable.ext.buttons.export =
    {
        className: 'buttons-alert',
        "text": "Export All Test",
        action: function (e, dt, node, config)
        {
            alert('Export All Test');
        }
    };

    $(document).ready(function ()
    {
        // Setup - add a text input to each footer cell
        $('#DataTableEdit tfoot th').each(function ()
        {
            var title = $(this).text();
            $(this).html('<input type="text" placeholder="Search ' + title + '" />');
        });

        var table = $('#DataTableEdit').DataTable({
            "lengthMenu": [[25, 50, 75, 100, 150, -1], [25, 50, 75, 100, 150, 'All']],
            "dom": '<"top"Bifpl<"clear">>rt<"bottom"ip<"clear">>',
            "buttons": [{
                extend: 'collection',
                text: 'Selection',
                buttons: ['selectAll', 'selectNone']
            }, {
                extend: 'collection',
                text: 'Export',
                buttons: ['export', 'excel', 'csv', 'pdf', { extend: 'excel',
                    text: 'Export Current Page',
                    exportOptions: {
                        modifier: {
                            page: 'current'
                        }
                    },
                    customize: function (xlsx)
                    {
                        var sheet = xlsx.xl.worksheets['sheet1.xml'];
                        $('row:first c', sheet).attr('s', '7');
                    }
                },

                {
                    text: 'Export All to Excel',
                    action: function (e, dt, button, config)
                    {
                        dt.one('preXhr', function (e, s, data)
                        {
                            data.length = -1;
                        }).one('draw', function (e, settings, json, xhr)
                        {
                            var excelButtonConfig = $.fn.DataTable.ext.buttons.excelHtml5;
                            var addOptions = { exportOptions: { 'columns': ':all'} };

                            $.extend(true, excelButtonConfig, addOptions);
                            excelButtonConfig.action(e, dt, button, excelButtonConfig);
                        }).draw();
                    }
                }]
            }
            ],
            "fixedHeader": {
                header: true,
                footer: true
            },
            "select": true,
            "processing": true,
            "serverSide": true,
            "ajax": {
                "url": "./ServerSide.php",
                "type": "POST"
            },
            columnDefs: [
            {
                targets: 0,
                render: function (data, type, row, meta)
                {
                    if (type === 'display')
                    {
                        data = '<a href="FormToEdit.php?everything=\'' + encodeURIComponent(row) + '\'">' + data + '</a>';
                    }
                    return data;
                }
            }],
            initComplete: function ()
            {
                var api = this.api();

                // Apply the search
                api.columns().every(function ()
                {
                    var that = this;

                    $('input', this.footer()).on('keyup change', function ()
                    {
                        if (that.search() !== this.value)
                        {
                            that
                              .search(this.value)
                              .draw();
                        }
                    });
                });
            }
        });
    });
</script>
<script type="text/javascript" class="init">
    $.fn.dataTable.ext.buttons.export =
    {
        className: 'buttons-alert',
        "text": "Export All Test",
        action: function (e, dt, node, config)
        {
            alert('Export All Test');
        }
    };

    $(document).ready(function ()
    {
        // Setup - add a text input to each footer cell
        $('#DataTable tfoot th').each(function ()
        {
            var title = $(this).text();
            $(this).html('<input type="text" placeholder="Search ' + title + '" />');
        });

        var table = $('#DataTable').DataTable({
            "lengthMenu": [[25, 50, 75, 100, 150, -1], [25, 50, 75, 100, 150, 'All']],
            "dom": '<"top"Bifpl<"clear">>rt<"bottom"ip<"clear">>',
            "buttons": [{
                extend: 'collection',
                text: 'Selection',
                buttons: ['selectAll', 'selectNone']
            }, {
                extend: 'collection',
                text: 'Export',
                buttons: ['export', 'excel', 'csv', 'pdf', { extend: 'excel',
                    text: 'Export Current Page',
                    exportOptions: {
                        modifier: {
                            page: 'current'
                        }
                    },
                    customize: function (xlsx)
                    {
                        var sheet = xlsx.xl.worksheets['sheet1.xml'];
                        $('row:first c', sheet).attr('s', '7');
                    }
                },

                {
                    text: 'Export All to Excel',
                    action: function (e, dt, button, config)
                    {
                        dt.one('preXhr', function (e, s, data)
                        {
                            data.length = -1;
                        }).one('draw', function (e, settings, json, xhr)
                        {
                            var excelButtonConfig = $.fn.DataTable.ext.buttons.excelHtml5;
                            var addOptions = { exportOptions: { 'columns': ':all'} };

                            $.extend(true, excelButtonConfig, addOptions);
                            excelButtonConfig.action(e, dt, button, excelButtonConfig);
                        }).draw();
                    }
                }]
            }
            ],
            "fixedHeader": {
                header: true,
                footer: true
            },
            "select": true,
            "processing": true,
            "serverSide": true,
            "ajax": {
                "url": "./ServerSide.php",
                "type": "POST"
            },
            initComplete: function ()
            {
                var api = this.api();

                // Apply the search
                api.columns().every(function ()
                {
                    var that = this;

                    $('input', this.footer()).on('keyup change', function ()
                    {
                        if (that.search() !== this.value)
                        {
                            that
                              .search(this.value)
                              .draw();
                        }
                    });
                });
            }
        });
    });
</script>