CODEWITHSUNDEEP
c#jqueryhtmlbuttondatatables
Mary
Mary

Reputation: 101

DataTables buttons not showing

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,

Upvotes: 1

Views: 1907

Answers (2)

Mary
Mary

Reputation: 101

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.

Upvotes: 1

Azar Shaikh
Azar Shaikh

Reputation: 449

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'

Upvotes: 1

Related Questions