title: DataTables buttons not showing
body: <p>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#.</p>
  
  <p>Here is the relevant code in BundleConfig.cs:</p>
  
  <pre><code>        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"));
  </code></pre>
  
  <p>Here is the script in the .cshtml:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $(function () {
  
      $('#budget-data-table').DataTable({
          //dom: 'lft&lt;B&gt;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');
  
  });
  </code></pre>
  
  <p></p>
  
  <p>Here is the HTML:
      </p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="col-md-12"&gt;
          &lt;div class="panel panel-primary list-panel" id="list-panel"&gt;
              &lt;div class="panel-heading list-panel-heading"&gt;
                  &lt;h1 class="panel-title list-panel-title"&gt;Construction Budget Line Items&lt;/h1&gt;
              &lt;/div&gt;
              &lt;div class="panel-body"&gt;
                  &lt;table id="budget-data-table" class="table table-striped table-bordered" style="width:100%;"&gt;
  
                  &lt;/table&gt;
                  &lt;div class="col-md-12" id="buttonHolder"&gt;This is where the buttons might go.&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="form-group"&gt;
      &lt;div class="col-md-offset-2 col-md-10"&gt;
          &lt;input type="submit" value="Save" class="btn btn-default" /&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>I'm not ready to do anything with the buttons since I can't get them to show up yet.</p>
  
  <p>Any insight would be appreciated.  Thank you,</p>