Datatables 如何给单元格添加自定义按钮?

发布于 2022-09-02 15:37:58 字数 231 浏览 15 评论 0

使用Datatables这个插件生成表格的时候想实现如下功能:

  • 表格容初始为空,可以动态添加数据。

  • 在每一行数据的最后面的单元格是一个按钮,实现本行的删除功能。

现在我实现了第一条功能,但是苦于不知道如何实现第二条,单元格内如何添加按钮?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

无人问我粥可暖 2022-09-09 15:37:58

使用javascript创建一个button,给button再绑定一个点击事件

违心° 2022-09-09 15:37:58

@Seay 找到解决方法了,这是我的demo

$('#eq_table').DataTable({
            data: tmp,
            columns:[
                {data: "id"},
                {data: "name"},
                {data: "ip"},
                {data: "description"},
                {data: null}
            ],
            columnDefs:[{
                targets: 4,
                render: function (data, type, row, meta) {
                    return '<a type="button" class="btn btn-danger btn-block" href="#" onclick=delFromID(' + row.id + ') >删除</a>';
                }
            },
                { "orderable": false, "targets": 4 },
            ],
            language:{
                "sProcessing":   "处理中...",
                "sLengthMenu":   "显示 _MENU_ 项结果",
                "sZeroRecords":  "没有匹配结果",
                "sInfo":         "显示第 _START_ 至 _END_ 项结果,共 _TOTAL_ 项",
                "sInfoEmpty":    "显示第 0 至 0 项结果,共 0 项",
                "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
                "sInfoPostFix":  "",
                "sSearch":       "搜索:",
                "sUrl":          "",
                "sEmptyTable":     "表中数据为空",
                "sLoadingRecords": "载入中...",
                "sInfoThousands":  ",",
                "oPaginate": {
                    "sFirst":    "首页",
                    "sPrevious": "上页",
                    "sNext":     "下页",
                    "sLast":     "末页"
                },
                "oAria": {
                    "sSortAscending":  ": 以升序排列此列",
                    "sSortDescending": ": 以降序排列此列"
                }
            }
        });
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文