如何使我的 select2 元素与数据表和分页一起使用？

Question

我的 select2 元素与我的 jquery 数据表配合得很好：

  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 () {
       $('select').select2();
     },
 });

但它只在我的分页的第一页上有效。当我转到第二页或只是显示更多结果时，它不再工作了。

Answer 1

draw.dt函数在每次分页页面变化时初始化 select2 元素：

 initComplete: function () {
       $('#table').on('draw.dt', function() {
            $('select').select2();
        });
   },

Answer 2

带数据宽度属性：

function Select2() {
    $('select').each(function() {
        $(this).off('change');
        var width = $(this).attr("data-width") || '100px';
        var x = this.required;
        $(this).select2({
            theme: 'bootstrap4',
            width: width,
            dropdownAutoWidth: true
        });
        if (x) {
            $(this).next().children().children().each(function() {
                $(this).css("border-color", "#f8ac59");
            });
        }
    });
}