在正确的布局中添加自定义下拉列表（数据表插件）

Question

如何dropdownlist在datatables插件的搜索字段旁边添加一个？

在插件初始化的外部添加一个并将其放置在内部太脏了。应该可以添加自定义下拉列表对吗？它不必是动态的，只是一个带有一些值的下拉列表。

像这样：

我怎样才能做到这一点 ？

<script>
    $(document).ready(function(){
      $('#myTable').DataTable({
        "language": {
            "sProcessing": "Bezig...",
            "sLengthMenu": "_MENU_ resultaten weergeven",
            "sZeroRecords": "Geen resultaten gevonden",
            "sInfo": "_START_ tot _END_ van _TOTAL_ resultaten",
            "sInfoEmpty": "Geen resultaten om weer te geven",
            "sInfoFiltered": " (gefilterd uit _MAX_ resultaten)",
            "sInfoPostFix": "",
            "sSearch": "Werknemers zoeken :",
            "searchPlaceholder": "Naam/BSN/Personeelsnr",
            "sEmptyTable": "Geen resultaten aanwezig in de tabel",
            "sInfoThousands": ".",
            "sLoadingRecords": "Een moment geduld aub - bezig met laden...",
            "oPaginate": {
                "sFirst": "Eerste",
                "sLast": "Laatste",
                "sNext": "Volgende",
                "sPrevious": "Vorige"
            }
        }
    });
      $(document).ready(function() {

        var table = $('#example').DataTable({
          "columnDefs": [
          { "visible": false, "targets": 2 }
          ],


          "order": [[ 2, 'asc' ]],
          "displayLength": 25,
          "drawCallback": function ( settings ) {
            var api = this.api();
            var rows = api.rows( {page:'current'} ).nodes();
            var last=null;

            api.column(2, {page:'current'} ).data().each( function ( group, i ) {
              if ( last !== group ) {
                $(rows).eq( i ).before(
                  '<tr class="group"><td colspan="5">'+group+'</td></tr>'
                  );

                last = group;
              }

            } );
          }
        } );

    // Order by the grouping
    $('#example tbody').on( 'click', 'tr.group', function () {
      var currentOrder = table.order()[0];
      if ( currentOrder[0] === 2 && currentOrder[1] === 'asc' ) {
        table.order( [ 2, 'desc' ] ).draw();
      }
      else {
        table.order( [ 2, 'asc' ] ).draw();
      }
    });
  });
    });
    $('#example23').DataTable( {
        dom: 'Bfrtip',
        buttons: [
            'copy', 'csv', 'excel', 'pdf', 'print'
        ]
    });
</script>

Answer 1

好吧，我们可以添加自定义按钮，DataTable但它们位于表格的左侧（离搜索框很远）。

我不知道是否有任何选项可用于在搜索框附近添加字段，但是当我得到类似的要求时，我在DataTable如下引导程序类的帮助下手动添加了（实际上是将其附加到搜索框 div）

演示： https : //jsfiddle.net/Prakash_Thete/uo110be1/4/

DataTable初始化后添加以下代码。

 $('<div class="pull-right">' +
        '<select class="form-control">'+
        '<option value="volvo">Volvo</option>'+
        '<option value="saab">Saab</option>'+
        '<option value="opel">Opel</option>'+
        '</select>' + 
        '</div>').appendTo("#example_wrapper .dataTables_filter"); //example is our table id

 $(".dataTables_filter label").addClass("pull-right");

Answer 2

您可以使用数据表集合。

$('#myTable').DataTable( {
    buttons: [
        {
            extend: 'collection',
            text: 'Flag',
            buttons: [
                { text: 'High priority',   action: function () {  } },
                { text: 'Medium priority', action: function () {  } },
                { text: 'Low priority',    action: function () {  } }
            ],
            fade: true
        }
    ]
} );

请注意 - 此属性需要数据表的按钮扩展。

<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js"></script>