如何将selt2选择框与数据表一起使用？ [英] How can I use a select2 selectbox with dataTables?

问题描述

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

数据-lang="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>[e-mail]</td>
            </tr>
        </tbody>
    </table>

推荐答案

1. 您正在使用3.2版本的css和4.0.3版本的Libray！因为版本4是完全重写的，所以任何用户界面都将失败。查找匹配的版本here。

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

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

示例：

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

demo

这篇关于如何将selt2选择框与数据表一起使用？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！