javascript - 按钮单击功能在数据表工具栏自定义按钮上不起作用

Question

作为 this question 的延续,

我自己将切换按钮添加到数据表工具栏 dom 元素中

 "dom": "T<'clear'><'row DatatableRow'<'col-xs-3'l><'col-xs-3'><'col-xs-3'<'#ToggleButton'>><'col-xs-3 text-right'f>r>t<'row DatatableRow'<'col-xs-3'i><'col-xs-3'><'col-xs-3'><'col-xs-3 text-right'p>>"

按钮添加为

$("div#ToggleButton").html('<br/><button type="button" class="btn btn-primary btn-sm" id="ToggleColumns">Toggle</button>');

但是在 this case ，点击功能不起作用？

Answer 1

它不起作用，因为您试图绑定(bind) DOM 上尚不存在的按钮。并且您正在重新创建表以更改固定列索引。我不能说这是一个好方法，但我找不到更改文档中渲染数据表的固定列。

但我修复了你的 fiddle正在路上。

这个想法是在添加自定义按钮 html 之后立即将按钮绑定(bind)到数据表的 init 上。

$(document).ready(function () {
    foo(2);

    function foo(columnNumber) {
        table = $('#example').on('init.dt', function () {
            $("div#ToggleButton").html('<br/><button type="button" class="btn btn-primary btn-sm" id="ToggleColumns">Toggle</button>');
            $('#ToggleColumns').click(function () {
                table.destroy();
                debugger;
                if (columnNumber == 2) {
                    columnNumber = 0;
                } else {
                    columnNumber = 2;
                }
                foo(columnNumber);
            });
        }).DataTable({
            scrollY: "300px",
            scrollX: true,
            scrollCollapse: true,
            paging: false,
                "dom": "T<'clear'><'row DatatableRow'<'col-xs-3'l><'col-xs-3'><'col-xs-3'<'#ToggleButton'>><'col-xs-3 text-right'f>r>t<'row DatatableRow'<'col-xs-3'i><'col-xs-3'><'col-xs-3'><'col-xs-3 text-right'p>>",
        });


        new $.fn.dataTable.FixedColumns(table, {
            leftColumns: columnNumber
            //   rightColumns: 1
        });
    }
});

如果您能找到更改固定列编号的方法...

$('#ToggleColumns').click(function () {

// replace the following codes with changing fixedColumn columns
                table.destroy();
                if (columnNumber == 2) {
                    columnNumber = 0;
                } else {
                    columnNumber = 2;
                }
                foo(columnNumber);
            });