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

您可以使用数据表collection。

＆＃13;

$('#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
        }
    ]
} );

＆＃13;

请注意 - 此属性需要DataTables的按钮扩展名。

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

Answer 3

另一个选择是使用表初始值设定项的DOM属性。 e.g。

    "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");

以正确的布局添加自定义下拉列表（datatables插件）

3 个答案: