jquery - 如何将 select2 选择框与数据表一起使用？

Question

我想在我的引导数据表中使用 select2 选择框。我需要使用 full select2 js但它不起作用，我想知道为什么。

$(document).ready(function() {
    var table = $('#example').DataTable( {
        scrollY:        "300px",
        scrollX:        true,
        scrollCollapse: true,
        paging:         false,
        fixedColumns:   {
            leftColumns: 1,
            rightColumns: 1
        }
    } );
} );

$("#e1").select2();

td, th{background-color:white;}

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<link href="http://cdnjs.cloudflare.com/ajax/libs/select2/3.2/select2.css" rel="stylesheet"/>

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/fixedcolumns/3.2.2/js/dataTables.fixedColumns.min.js"></script>

<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>


<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.js"></script>


<table id="example" class="stripe row-border order-column" width="100%" cellspacing="0">
        <thead>
            <tr>
                <th>First name</th>
                <th>Last name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
                <th>Extn.</th>
                <th>E-mail</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><select  id="e1">
        <option value="AL">Alabama</option>
        <option value="Am">Amalapuram</option>
        <option value="An">Anakapalli</option>
        <option value="Ak">Akkayapalem</option>
        <option value="WY">Wyoming</option>
    </select></td>
                <td>Satou</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>33</td>
                <td>2008/11/28</td>
                <td>$162,700</td>
                <td>5407</td>
                <td>a.satou@datatables.net</td>
            </tr>
        </tbody>
    </table>

Answer 1

1. 您使用的是 CSS 3.2 版本以及 4.0.3 版本图书馆!由于版本 4 是完全重写的，所以任何 UI 都会失败。查找匹配版本 here .

2. 您需要在 dataTables 初始化后实例化 select2。您可以在 drawCallback 回调中执行此操作。

3. 不要使用id来引用select2。我猜你会在多个页面上有很多 select2，所以给它们一个像 dt-select2 这样的虚拟类，这样你就可以在一次调用中初始化所有可见的 select2。但无论如何，请保留 id 以供事件处理程序中引用。

示例:

$('#example').DataTable({
  ...
  drawCallback: function() {
     $('.dt-select2').select2();
  }
})  

demo