jquery - 如何使用 Select2 设置数据表长度选择元素的样式

Question

我正在使用带有 jquery Select2 插件的 jquery 数据表插件。我尝试用我自己的类覆盖 css 类，但它没有用。它仍然以默认的操作系统/浏览器样式显示。

Answer 1

对于较早的事件，请使用preInit：

$(document).ready(function () {
  var dataTable = $('#datatables').DataTable({
  //your datatables settings
  });
});

$(document).on( 'preInit.dt', function (settings, json) {
    $('div.dataTables_length select').select2();
});

这样，您的选择就会在数据表上的 init 事件完成之前启动......如果因为您通过 Ajax 加载数据而出现延迟，那么这可能会更好。

https://datatables.net/reference/event/preInit

Answer 2

您还可以使用 DataTables 的fnInitComplete回调，它在 DataTables 初始化时调用。请参阅其文档中的回调页面。

这是一个扩展 DataTable 默认值以实现此目的的示例：

$.extend($.fn.dataTable.defaults, {
  "bPaginate": true,                /* just an example. can be false or removed altogether */
  "bLengthChange": true,            /* another example. */

  /* ... other options ... */

  "fnInitComplete": function(oSettings, json) {
    $(".dataTables_length .select2").select2({ 
      /* select2 options, as an example */
      minimumResultsForSearch: -1 
    });
  },
});

Answer 3

加载表格后，在 select 元素上调用 select2。

$(document).ready(function() {  

   // load datatable
   jQuery('#data_table').dataTable({
    ....do settings and other stuff
   });

   $('div.dataTables_length select').select2();

});