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

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 } ] } );

请注意 - 此属性需要 DataTables 的 Buttons 扩展。

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

Answer 3

另一种选择是使用表初始值设定项的 DOM 属性。 例如

    "dom": "<'row'<'col-sm-4'f><'col-sm-2 customDropDown'><'col-sm-2'r><'col-sm-4'l>>" +
        "<'row'<'col-sm-12't>>" +
        "<'row'<'col-sm-6'i><'col-sm-6'p>>",

有关不同字母的含义，请参阅https://datatables.net/reference/option/dom (flrti...)

您可以添加自定义类 (customDropDown)，然后使用它来附加下拉框。

$('<div>' +
    '<select class="form-control">' +
    '<option value="Processing">Processing</option>' +
    '<option value="Error">Error</option>' +
    '<option value="Completed">Completed</option>' +
    '</select>' +
    '</div>').appendTo("#DocumentsTable_wrapper .customDropDown");