title: Angular 2, DataTables.net, and Pagination using DataTables.net-bs
body: <p>I'm currently writing an application using Angular 2 and have it configured to use DataTables.net, DataTables.net-bs, and DataTables.net-select.</p>
  
  <p>For the most part, everything looks and works great. With one exception,  the pagination for the application shows up with as though no styling is applied.</p>
  
  <p>I checked the source within the browser and the default classes and HTML structure is applied:</p>
  
  <pre><code>&lt;div class="dataTables_paginate paging_full_numbers" id="myTable_paginate"&gt;
      &lt;a tabindex="0" class="paginate_button first disabled" id="myTable_first" aria-controls="myTable" data-dt-idx="0"&gt;First&lt;/a&gt;
      &lt;a tabindex="0" class="paginate_button previous disabled" id="myTable_previous" aria-controls="myTable" data-dt-idx="1"&gt;Previous&lt;/a&gt;
      &lt;span&gt;
          &lt;a tabindex="0" class="paginate_button current" aria-controls="myTable" data-dt-idx="2"&gt;1&lt;/a&gt;
          &lt;a tabindex="0" class="paginate_button " aria-controls="myTable" data-dt-idx="3"&gt;2&lt;/a&gt;
          &lt;a tabindex="0" class="paginate_button " aria-controls="myTable" data-dt-idx="4"&gt;3&lt;/a&gt;
          &lt;a tabindex="0" class="paginate_button " aria-controls="myTable" data-dt-idx="5"&gt;4&lt;/a&gt;
          &lt;a tabindex="0" class="paginate_button " aria-controls="myTable" data-dt-idx="6"&gt;5&lt;/a&gt;
          &lt;span class="ellipsis"&gt;…&lt;/span&gt;
          &lt;a tabindex="0" class="paginate_button " aria-controls="myTable" data-dt-idx="7"&gt;580&lt;/a&gt;
      &lt;/span&gt;
      &lt;a tabindex="0" class="paginate_button next" id="myTable_next" aria-controls="myTable" data-dt-idx="8"&gt;Next&lt;/a&gt;
      &lt;a tabindex="0" class="paginate_button last" id="myTable_last" aria-controls="myTable" data-dt-idx="9"&gt;Last&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The functionality of the links work and the it just looks ugly on the display because I'm using the DataTables Bootstrap CSS and it is not outputting the appropriate HTML using an unordered list.  I went into the debugger in the browser and the code for the DataTables.net-bs is being loaded.  I added a bunch of break points to the JavaScript and the factory method is being called.  However, it appears that it is never called again. </p>
  
  <p>Here is the relevant code for my vendors.browser.ts</p>
  
  <pre><code>require('datatables.net')();
  require('datatables.net-bs')();
  require('datatables.net-select')();
  require('file-saver');
  </code></pre>
  
  <p>I also have AMD turned off because I know that was an issue for some people.  Here is the relevant code for the webpack.common.js file:</p>
  
  <pre><code>    {
        test: /datatables\.net.*/,
        loader: 'imports?define=&gt;false'
      },
  </code></pre>
  
  <p>As an aside, the other plugin, Datatables.net-select, functions properly.</p>
  
  <p>If I can't figure this out, I can use the styling included in DataTables.net-dt, but I would much rather get this working properly.</p>
  
  <p>Does anyone have any potential ideas on what is going on?</p>