jQuery Datatables makeEditable中Token库分页后失效求助

这问题我之前也碰到过，核心原因是Datatables的分页机制是动态渲染DOM：第一页的元素在页面初始化时就加载完成，但切换到第二页时，当前页的DOM会被销毁，新页的元素才会被动态插入到页面中。你一开始写的Token库初始化代码只在页面加载时执行了一次，自然只能捕获第一页的.token-input元素，后续分页加载的元素根本没被初始化。

下面是具体的解决步骤和代码示例：

1. 利用Datatables的draw.dt事件重新初始化Token库 #

Datatables每次完成表格重绘（包括分页、排序、搜索操作）时，都会触发draw.dt事件。我们可以把Token的初始化逻辑绑定到这个事件上，确保每次新元素渲染完成后，都能被正确初始化。

2. 编写可复用的初始化函数 #

为了避免重复初始化导致的冲突，我们先写一个专门的初始化函数，里面先销毁已有的Token实例，再重新初始化当前页的所有.token-input元素。

完整代码示例 #

$(document).ready(function() {
    // 初始化Datatables及makeEditable插件
    var yourTable = $('#your-table-id').DataTable({
        // 你的表格配置项（比如分页、列定义等）
        makeEditable: {
            columns: {
                // 假设第0列是需要使用Token输入的可编辑列
                0: {
                    type: 'text',
                    cssclass: 'token-input'
                }
                // 其他列的可编辑配置...
            }
        }
    });

    // 定义Token输入框的初始化函数
    function initTokenInputs() {
        $('.token-input').each(function() {
            // 先销毁已存在的Token实例，避免重复绑定
            if ($(this).data('tokenInputObject')) {
                $(this).tokenInput('destroy');
            }
            // 重新初始化Token输入框
            $(this).tokenInput('your-token-source-url', {
                // 你的Token库配置项，比如：
                theme: 'facebook',
                tokenLimit: 5,
                preventDuplicates: true
                // 其他配置...
            });
        });
    }

    // 页面加载完成后，先初始化第一页的元素
    initTokenInputs();

    // 监听Datatables的draw事件，每次分页/重绘后重新初始化
    yourTable.on('draw.dt', function() {
        initTokenInputs();
    });
});

为什么这个方案有效？ #

• draw.dt事件会在每次表格渲染完成后触发，不管是首次加载第一页，还是切换到第二/第三页，都能保证新渲染的.token-input元素被及时初始化。
• 先销毁旧的Token实例，再重新初始化，能避免重复绑定导致的功能异常（比如多次触发输入事件）。

如果你的makeEditable插件有专属的编辑回调（比如onEditOpen这类元素创建完成时的钩子），也可以把初始化逻辑放到这些回调里，但draw.dt是更通用的解决方案，覆盖所有表格重绘场景。

内容的提问来源于stack exchange，提问作者Nitin Jain