Question

我想在我的bootstrap数据表中使用select2选择框。我需要使用完整的select2 js（https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.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

您正在使用CSS 3.2 版本以及libray的 4.0.3 版本！由于版本4是完全重写，因此任何UI都将失败。找到匹配的版本here。
在初始化 dataTables之后，您需要实例化select2 。您可以在drawCallback回调中执行此操作。

请勿使用id来引用select2。我想你会在多个页面上有很多select2，所以给它们一个像dt-select2这样的虚拟类，这样你就可以在一次调用中初始化所有可见的select2。但是，所有意味着保留id以供事件处理程序中的参考。

示例：

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

演示 - ＆gt;的 http://jsfiddle.net/u91javfy/

Answer 2

请参见以下示例，在标头上包含select选项以过滤数据： http://jsfiddle.net/73zawd5b/5/#&togetherjs=fgu5BihnA7

演示[此处]（https://http://jsfiddle.net/73zawd5b/5/#&togetherjs=fgu5BihnA7“当您将鼠标悬停在此文本上时会出现”）！

$('#example').DataTable({
  initComplete: function() {
    this.api().columns('.fName').every(function() {
      var column = this;
      var select = $('<select class="f"><option value="">First Name</option></select>')
        .appendTo($(column.header()).empty())
        .on('change', function() {
          var val = $.fn.dataTable.util.escapeRegex(
            $(this).val()
          );

          column
            .search(val ? '^' + val + '$' : '', true, false)
            .draw();
        });

      column.data().unique().sort().each(function(d, j) {
        select.append('<option value="' + d + '">' + d + '</option>')
      });
    });
    this.api().columns('.lName').every(function() {
      var column = this;
      var select = $('<select class="f"><option value="">Last Name</option></select>')
        .appendTo($(column.header()).empty())
        .on('change', function() {
          var val = $.fn.dataTable.util.escapeRegex(
            $(this).val()
          );

          column
            .search(val ? '^' + val + '$' : '', true, false)
            .draw();
        });

      column.data().unique().sort().each(function(d, j) {
        select.append('<option value="' + d + '">' + d + '</option>')
      });
    });
  }


})
$(document).ready(function($) {
  $('.f').select2();
});

如何在dataTables中使用select2选择框？

2 个答案: