Question

我有以下DataTable

        <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>

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

Answer 1

使用render：

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

我注意到您正在使用MVC Razor语法生成Url，这让我觉得您在View中包含了数据表初始化代码。要绕过这个，你需要生成如下按钮：

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

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

将带有引导按钮的div添加到jquery datatable列

1 个答案: