将带有引导按钮的 div 添加到 jquery 数据表列答案

【问题标题】：adding a div with bootstrap button to jquery datatable column将带有引导按钮的 div 添加到 jquery 数据表列
【发布时间】：2016-02-12 06:52:06
【问题描述】：

我有以下数据表

        <script>
            $(document).ready(function () {
                $("#productTable").DataTable({
                    "info": false,
                    "processing": true, // for show progress bar
                    "serverSide": true, // for process server side
                    "filter": false, // this is for disable filter (search box)
                    "orderMulti": false, // for disable multiple column at once
                    "ajax": {
                        "url": "/Home/LoadProductData",
                        "type": "POST",
                        "datatype": "json"
                    },
                    "columns": [
                            { "data": "Product_ID", "name": "Product_ID", "autoWidth": true },
                            { "data": "Product_Title", "name": "Product_Title", "autoWidth": true }                               
                               ]
                });
            });
        </script>

现在我想添加以下具有引导按钮的div

<div class="btn-group btn-group-sm" id="CreateButton">
    <button type="button" class="btn btn-warning" onclick="location.href='@Url.Action("Product_Edit","Home", new { })';return false;">Edit</button>
</div>

可以直接插入吗？如果没有，如何配置？

【问题讨论】：

您想在所有行的列中添加此按钮？

标签： jquery asp.net-mvc twitter-bootstrap datatables

【解决方案1】：

使用render:

'columns': [
            {
                'render': function (data, type, full, meta) {
                    return '<button type="button" class="btn btn-warning">Edit</button>';
                }
            },
...

我注意到您正在使用 MVC Razor 语法来生成 Url，这让我认为您在视图中包含了数据表初始化代码。为了解决这个问题，您需要生成这样的按钮：

<a class=\'btn\' href=\'' + $("#rooturl").val() + '/Home/Product_Edit/' + full[0] + '\'>Edit</a>';

$("#rooturl") 是一个包含应用程序 url 的隐藏字段。我假设Product_Edit 操作方法接受Product_ID 的参数。这样，您就可以使用数据表行数据将 id 附加到 url。

【讨论】：