如何让Select2组件与DataTables及分页功能正常兼容？

这个问题我之前也遇到过，核心原因很简单：DataTables在切换分页、搜索或者排序时，会动态销毁当前页的DOM元素，然后重新渲染新页的内容。你只在initComplete里初始化了一次Select2，这只会对页面加载完成时第一页的<select>元素生效，后续分页生成的新元素根本没被绑定Select2的初始化逻辑。

下面给你两种靠谱的解决方案，按需选择：

方案一：监听表格重绘事件（通用型） #

利用DataTables的draw.dt事件，每次表格完成重绘（包括分页、排序、搜索）时，重新初始化所有Select2组件。记得先销毁已有的Select2实例，避免重复绑定导致的异常：

var table = $('#table').DataTable({ 
    "ajax": { 
        "url": "data/table.json", 
        "dataSrc": "", 
    }, 
    "columnDefs": [ 
        { 
            "render": function (data, type, row) { 
                return '<select class="form-control select2" ><option selected value="one">one</option><option value="two">two</option></select>'; 
            }, 
            "targets": 0 
        }, 
    ], 
    "columns": [ 
        { "data": "content" }, 
    ], 
    "dom": "<row></row>", 
    initComplete: function () { 
        initSelect2(); // 初始化第一页的Select2
    }, 
}); 

// 监听表格重绘事件，每次分页/排序后重新初始化
table.on('draw.dt', function() {
    initSelect2();
});

// 封装Select2初始化逻辑，方便复用
function initSelect2() {
    // 先销毁已存在的Select2实例，再重新初始化
    $('.select2').select2('destroy').select2({
        width: '100%', // 建议加上宽度配置，避免布局错乱
        // 这里可以添加你的Select2自定义配置，比如占位符、搜索功能等
    });
}

方案二：针对单行创建时初始化（精准型） #

使用DataTables的createdRow配置项，每一行被创建（不管是初始化还是分页生成的新行）时，直接初始化该行内的Select2组件。这种方式更精准，不会重复操作已存在的元素：

var table = $('#table').DataTable({ 
    "ajax": { 
        "url": "data/table.json", 
        "dataSrc": "", 
    }, 
    "columnDefs": [ 
        { 
            "render": function (data, type, row) { 
                return '<select class="form-control select2" ><option selected value="one">one</option><option value="two">two</option></select>'; 
            }, 
            "targets": 0 
        }, 
    ], 
    "columns": [ 
        { "data": "content" }, 
    ], 
    "dom": "<row></row>",
    // 每一行创建完成后立即初始化该行的Select2
    createdRow: function(row, data, dataIndex) {
        $(row).find('.select2').select2({
            width: '100%',
            // 自定义配置放在这里
        });
    }
});

两种方案都能解决问题，如果你需要统一控制所有Select2的配置，方案一更方便；如果想减少不必要的DOM操作，方案二更高效。

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