7

I am using Datatable in my ruby on rails application. I follow the same one which is here..

https://github.com/rweng/jquery-datatables-rails

And My datatable sorting and searching working properly. But I can't see my table tool option (eg - copy, csv, excel, pdf, save ) in my table header.

I want to show my table just like this....

enter image description here

Please help.

Maruthi042
  • 145
  • 1
  • 5
  • 16

2 Answers2

0

Update (2016):

Although they are retiring the TableTools for Buttons and Select extensions (source), this is a slightly more recent version of the dom option example:

var oTable = $('#my-table').dataTable({
    autoWidth: false,
    autoHeight: false,
    paging: false,
    dom: 'TCfrtip', // <-- Update letters for whichever extensions you want to use
    responsive: false,
    searching: true,
    ordering: true,
    stateSave: true,
    scrollY: 550,
    scrollX: true,
    scrollCollapse: true,
    fixedHeader: false,
    buttons: [
        'copyHtml5',
        'csvHtml5',
        'excelHtml5',
        'pdfHtml5'
    ],
    columnDefs: [{
        targets: 'no-sort', // disable sorting on class="no-sort"
        orderable: false
    }],
    drawCallback: function (settings) { }
});

Previous Answer (2013):

The solution is to add this:

"sDom": '<"H"TCfr>t<"F"ip>'

Inside your javascript. It will work with show/hide columns nicely as well. If you are not using show/hide columns you can remove the capital "C".

Example (with show/hide columns):

// Users
$("#users-datatable").dataTable({
    "bStateSave": true,
    "bJQueryUI": true,
    "sPaginationType": "full_numbers",
    "bProcessing": true,
    "bServerSide": true,
    "sAjaxSource": $('#users-datatable').data('source'),
    "bScrollInfinite": true,
    "bScrollCollapse": true,
    "iDisplayLength": 100,
    "sScrollY": "500px",
    "sScrollX": "100%",
    "sDom": '<"H"TCfr>t<"F"ip>',
    "oTableTools": {
        "aButtons": [
            "copy",
            "csv",
            "xls",
            {
                "sExtends": "pdf",
                "sPdfOrientation": "landscape",
                "sPdfMessage": "Your custom message would go here."
            },
            "print"
        ]
    }
});

Hopefully this will help someone.

Tomanow
  • 7,247
  • 3
  • 24
  • 52
  • hi thank you for your answer - but what does: "sDom": '<"H"TCfr>t<"F"ip>' it actually do? – BenKoshy Nov 04 '16 at 01:30
  • Hey @BKSpurgeon, the dataTables key name and perhaps syntax has changed slightly since this answer, but you can find what each letter stands for in the [datatables options reference](https://datatables.net/reference/option/dom) – Tomanow Nov 04 '16 at 01:59
  • 1
    @BKSpurgeon I updated my answer with a more recent example ;) – Tomanow Nov 04 '16 at 02:11
0

i got this by adding ZeroClipboard.js 

<script src="http://localhost/assets/js/ZeroClipboard.js"></script>
Ahmad Tarawneh
  • 623
  • 9
  • 14