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

时间:2018-01-23 14:33:43

标签: pagination datatables jquery-select2

我的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();
     },
 });

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

2 个答案:

答案 0 :(得分:1)

draw.dt函数正在初始化每个分页页面上的select2元素:

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

答案 1 :(得分:1)

具有数据宽度属性:

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");
            });
        }
    });
}