CODEWITHSUNDEEP
javascriptjquerydatatabledatatables
code-8
code-8

Reputation: 58662

How can I position DataTables export button group?

I have a table

enter image description here I used Datatable to auto render that exports buttons. I have no idea how to force it to align with the search input box.

This is the code I have 

<div class="row">
    <div class="col-md-12">
        <div class="panel panel-filled">
            <div class="panel-body">

                <input type="text" class="form-control mb20" id="inputSearch" placeholder="Search">

                <table class="table table-responsive-sm">
                    <thead>
                        <tr>

                            <th></th>
                            <th>Event</th>
                            <th>Node ID</th>
                            <th>Timestamp</th>
                        </tr>
                    </thead>
                    <tbody>

                        @foreach($sysEvents as $sysEvent)


                        <?php

                        $faIcon = App\Models\Log::getLogIcon($sysEvent->logLevel);
                        $faHexColor = App\Models\Log::getLogColor($sysEvent->logLevel);

                        ?>

                        <tr>
                            <td class="text-center"><i class="fa fa-{{ $faIcon }}" style="color: {{ $faHexColor }}"></i></td>
                            <td> {{ $sysEvent->healthEventMessage }}</td>
                            <td style="color:#1bbf89; " >{{ $sysEvent->deviceId }}</td>
                            <td class="text-accent"> {{ $sysEvent->createdAt }}</td>
                        </tr>

                        @endforeach


                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

JS

<script src="https://cdn.datatables.net/plug-ins/1.10.10/features/searchHighlight/dataTables.searchHighlight.min.js" type="text/javascript"></script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://bartaz.github.io/sandbox.js/jquery.highlight.js"></script>


{{-- Export --}}
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.4.2/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.4.2/js/buttons.bootstrap.min.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/buttons/1.4.2/js/buttons.flash.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/buttons/1.4.2/js/buttons.html5.min.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/buttons/1.4.2/js/buttons.print.min.js"></script>


<script type="text/javascript">

    $('table').DataTable( {
        "bLengthChange": true,
        "Filter": true,
        "Info": true,
        "bSort": true,
        "bPaginate": false,
        "searchHighlight": true,
        "aoColumnDefs": [{
            "bSortable": false,
            "aTargets": ["no-sort"]
        }],
        "dom": 'Bfrtip',
        "buttons": ['copy','csv','pdf','excel','print']
    } );

    $('#inputSearch').keyup(function(){
        $('table').DataTable().search($(this).val()).draw();
    });

</script>

How can I position DataTables export button group to align with my search input ?

Any hints on how can I achive that ?

Updated

I even try 

$('table').DataTable({
    "bLengthChange": true,
    "Filter": true,
    "Info": true,
    "bSort": true,
    "bPaginate": false,
    "searchHighlight": true,
    "aoColumnDefs": [{
        "bSortable": false,
        "aTargets": ["no-sort"]
    }],
    "dom": 'Bfrtip',
    "buttons": ['copy','csv','pdf','excel','print'],

    initComplete: function() {

        var buttons = $('.dt-buttons');
        $('.dt-buttons').hide();
        $('.dt-buttons').show();
        $('div.panel-body').append(buttons);

    }
});

Upvotes: 1

Views: 2930

Answers (2)

code-8
code-8

Reputation: 58662

I had to do this to work, kind of a hack ... 

<script type="text/javascript">

    $('table').DataTable( {
        "bLengthChange": true,
        "Filter": true,
        "Info": true,
        "bSort": true,
        "bPaginate": false,
        "searchHighlight": true,
        "aoColumnDefs": [{
            "bSortable": false,
            "aTargets": ["no-sort"]
        }],
        "dom": '<"pull-right"B><"pull-right"f><"pull-right"l>tip',
        "buttons": ['copy','csv','pdf','excel','print']
    } );


    $('#inputSearch').hide();
    $('div .panel-body').prepend($('#inputSearch'));
    $('#inputSearch').show();
    $('#inputSearch').css('float','left');


    $('.dt-buttons').hide();
    $('div .panel-body').prepend($('.dt-buttons'));
    $('.dt-buttons').show();
    $('#inputSearch').css('float','right');

    $('#inputSearch').keyup(function(){
        $('table').DataTable().search($(this).val()).draw();
    });

</script>

Result

enter image description here

Upvotes: 1

Marcelo The Mage Coder
Marcelo The Mage Coder

Reputation: 2202

Take a look at https://datatables.net/extensions/tabletools/initialisation#Direct-initialisation

$(document).ready( function () {
    var table = $('#example').dataTable();
    var tableTools = new $.fn.dataTable.TableTools( table, {
        "buttons": [
            "copy",
            "csv",
            "xls",
            "pdf",
            { "type": "print", "buttonText": "Print me!" }
        ]
    } );

    $( tableTools.fnContainer() ).insertAfter('div.info');
} );

This should make what you are looking for

Upvotes: 3

Related Questions