DataTables buttons not showing

Question

I've tried everything. I've read every article, manual, and post I can find. I've tried downloading and running the examples, but it won't even compile. I am using Visual Studio 2013, writing an MVC application using C#.

Here is the relevant code in BundleConfig.cs:

        bundles.Add(new ScriptBundle("~/bundles/datatables").Include(
                    "~/Scripts/DataTables/jquery.dataTables.js",
                    "~/Scripts/DataTables/dataTables.colReorder.js",
                    "~/Scripts/DataTables/dataTables.select.js",
                    "~/Scripts/DataTables/dataTables.fixHeader.js",
                    "~/Scripts/DataTables/dataTables.buttons.js"));

        bundles.Add(new StyleBundle("~/Content/datatables").Include(
                  "~/Content/DataTables/css/jquery.dataTables.css",
                  "~/Content/DataTables/css/colReorder.dataTables.css",
                  "~/Content/DataTables/css/select.dataTables.css",
                  "~/Content/DataTables/css/fixedHeader.dataTables.css",
                  "~/Content/DataTables/css/buttons.dataTables.css"));

Here is the script in the .cshtml:

<script type="text/javascript">
$(function () {

    $('#budget-data-table').DataTable({
        //dom: 'lft<B>ipr',
        serverSide: true,
        processing: true,
        ajax: '/ConstructionBudget/Get',
        columns: [
           { data: 'ID', visible: false },
           { data: 'BudgetID', visible: false },
           { title: 'Code', data: 'Code' },
           { title: 'Description', data: 'Description' },
           { title: 'Contract Value', data: 'ContractValue' }
        ],
        select: true,
        buttons: ['copy', 'edit', 'delete']
    });

    table.buttons().container().appendTo('#buttonHolder');

});

Here is the HTML:

<div class="row">
    <div class="col-md-12">
        <div class="panel panel-primary list-panel" id="list-panel">
            <div class="panel-heading list-panel-heading">
                <h1 class="panel-title list-panel-title">Construction Budget Line Items</h1>
            </div>
            <div class="panel-body">
                <table id="budget-data-table" class="table table-striped table-bordered" style="width:100%;">

                </table>
                <div class="col-md-12" id="buttonHolder">This is where the buttons might go.</div>
            </div>
        </div>
    </div>
</div>
<div class="form-group">
    <div class="col-md-offset-2 col-md-10">
        <input type="submit" value="Save" class="btn btn-default" />
    </div>
</div>

You can see I've tried the dom: attribute. When I use it with the 'B' anywhere in the string, the table collapses and no data shows.

When I inspect the HTML, I can't find any buttons anywhere, other than the submit at the end, and the ones that are part of the shared layout. All of the .css and .js files are showing up in the source files.

I'm not ready to do anything with the buttons since I can't get them to show up yet.

Any insight would be appreciated. Thank you,

Hi Mary, are you sure the data which you are requesting through method "ConstructionBudget/Get" returning response ? — Prashant-Systematix
– Prashant-Systematix, Commented Mar 10, 2017 at 3:43
Yes, I get data which is filterable, searchable, pageable, etc. Until I add the 'B' to the dom: attribute. Then the table collapses. — Mary
– Mary, Commented Mar 10, 2017 at 15:22

Chandan Kumar · Accepted Answer · 2017-03-10 05:49:22Z

1

As per https://datatables.net/extensions/buttons

DataTables has a number of table control elements available and where they are placed in the DOM (i.e. the order) is defined by the dom parameter.

For Buttons the B character is the letter to use

So your dom shoud be

"dom": 'Bfrtip'

edited Mar 10, 2017 at 5:49

Chandan Kumar

4,6228 gold badges45 silver badges63 bronze badges

answered Mar 10, 2017 at 4:21

Azar Shaikh

44910 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Mary Over a year ago

Thank you Gyrocode ... yes, I've already tried that and it does not work.

Mary Over a year ago

Please, whoever marked this as an answer, it isn't. I still am having problems.

Azar Shaikh Over a year ago

sorry @marry it isn't help you

Community · Accepted Answer · 2017-05-23 12:02:17Z

1

There were actually a few things I ended up changing.
The reason why the "B" wasn't working was because I needed to add a couple more things to BundleConfig: dataTables.bootstrap.js, buttons.bootstrap.js, and buttons.flash.js for the JavaScript and buttons.bootstrap.css for the CSS. I'm not sure exactly which of these worked, but I got the idea from Buttons and pagination in datatables is showing incorrectly

One reason why the other attempt to add buttons (table.buttons().container().appendTo('#buttonHolder');) didn't work was because I forgot to put back in the assignment of the table variable to the DataTable. Testing with Internet Explorer led me to this one. Chrome and Firefox just ignored the statement. I still don't have that working, but I don't need it now that the "B" is working.

I suspect that the table collapsing might have been a problem with the browser cache, but I have no way of knowing for sure because I can't make it break now that it is working. Maybe it will break for me tomorrow ;)

Thanks anyways for everyone who tried. Wish me luck as I start trying to make this editable.

edited May 23, 2017 at 12:02

CommunityBot

11 silver badge

answered Mar 10, 2017 at 23:53

Mary

1015 bronze badges

1 Comment

Mary Over a year ago

Found out why adding one character, "B", collapsed the table ... It has to do with the limitation on the number of characters in a ajax "GET". I happened to be just at the cusp of going over that limit without the B. Adding that one character broke the ajax call.

Collectives™ on Stack Overflow

DataTables buttons not showing

2 Answers 2

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related