Buttons no showing with Bootstrap and AJAX loaded data

ngsbioinformatics

Hi all - I've looked around all night for an answer to this and tried different variations but haven't been able to figure it out.

I used the Download Builder to construct the list off CSS and JS to include. I have:

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.13/css/dataTables.bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.2.4/css/buttons.bootstrap.css"/>

<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.13/js/dataTables.bootstrap.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.2.4/js/dataTables.buttons.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.2.4/js/buttons.bootstrap.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.2.4/js/buttons.colVis.js"></script>

My table is constructed as follows:

    $(document).ready( function () {
        var table = $('#projectlist').DataTable({
            "ajax": {
                url: "/projectregistry_json",
                dataSrc: ''
            },
            "buttons": [ 'colvis' ],
            "columns": [
                { sortable: false, "render": function(data, type, full, meta) {
                    var buttonid = full.projectid
                    return '<button type="button" class="btn btn-xs btn-success" onclick="confirmImport(this)" id="'+ buttonid +'">Import</button>';
                  }
                },
                { "data": "projectid" },
                { "data": "projectname" },
                { "data": "genomebuild" }
            ],
            "deferRender": true,
            "order": [[1, 'asc']]
        });
        table.buttons().container()
            .appendTo( $('.col-sm-6:eq(0)', table.table().container() ) );
    } );

However I never see the colvis buttons. What am I missing?

kthorngren

Your code looks like it should work. Do you get any console errors?

Can you post a link to your page for troubleshooting?

Kevin

ngsbioinformatics

No console errors. The page sites in a corporate network and isn't available to the public. I don't have a place can move it either to make it public. Is there another way to debug this before I find a public hosting place?

kthorngren

This page shows some options for posting a test case of the issue.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

I was able to take your JS and CSS includes and see the Colvis button in a basic page. My approach would be to start as basic as possible then start adding things back to the page until it fails.

Kevin

ngsbioinformatics

Here is a test case:

http://jsbin.com/tucora/edit?html,js,output

kthorngren

Interesting.... Removing your ajax allows the Colvis button to appear. My project has Bootstrap buttons loading just fine with ajax but I use a different button init procedure.

Your init is like the first example here:
https://datatables.net/extensions/buttons/#Direct-insertion

Mine is like the second. Took the second example and applied to your test case and it works.

I'm not sure what the difference is but apparently any delays with ajax cause the first example to not work. I also tried with using the first example using 'buttons but moving the table.buttons().container() into initComplete which also works.

Kevin

allan

Yup - Kevin is spot on as usual. You need to use initComplete: https://jsbin.com/mitesajice/edit?js,output .

The reason is that the DOM structure setup by DataTables isn't in place until after the initial Ajax call has been started.

Allan

ngsbioinformatics

Moving the table.buttons().container() into initComplete works. That's what I'll use. Thanks for your help.

techie

Not sure but it's working with col-md-6 when using responsive

initComplete: function () {
                table.buttons().container()
                    .appendTo( $('.col-md-6:eq(0)', table.table().container() ) );
            }