検索

ホームページ  >  に質問  >  本文

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

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

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

巴扎黑巴扎黑2790日前661

全員に返信(2)返信します

  • 黄舟

    黄舟2017-04-11 10:21:25

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

    返事
    0
  • 阿神

    阿神2017-04-11 10:21:25

    @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": ": 以降序排列此列"
                    }
                }
            });

    返事
    0
  • キャンセル返事