ReynierPM ReynierPM -4 years ago 105
CSS Question

Can't get Datatables integrates with Bootstrap 3

I'm trying to get TB3 integrated with DataTables as this example show but I can't get it at all as you may see on the attached pic.

enter image description here

What's not working? The select element hasn't TB class applied, also the same with search box and finally the previous|next buttons. The only thing I do it here is add the dataTableBootstrap.js script and the dataTableBootstrap.css styles, the rest is a common TB3 table markup:

<table class="table table-striped table-hover table-condensed" id="dataTable">
<thead>
<tr>
<th></th>
<th>Tipo de TrĂ¡mite</th>
<th>No. Solicitud</th>
<th>Tipo de Solicitud</th>
<th>Estado</th>
<th>Fecha</th>
<th>Acciones</th>
</tr>
</thead>
<tbody>
... something goes here
</tbody>
</table>


If I debug the page through Chrome I can see this errors in the console:


Uncaught TypeError: Cannot read property 'pageButton' of undefined dataTables.bootstrap.js:38


Is the plugin/script outdated or I'm missing something here? Any help or advice?

Answer Source

Seems like this was an issue affecting the release from around the 9th July until patched on the 27th August 2014.

The link you are using is a very specific version of the dataTables plugin, which was breaking the pagination.

You will want to use the links referenced on the Datatable CDN page - rather than ones you may have found on example code page:

http://cdn.datatables.net/

For reference the latest version found is:

CSS: http://cdn.datatables.net/plug-ins/a5734b29083/integration/bootstrap/3/dataTables.bootstrap.css

JS: http://cdn.datatables.net/plug-ins/a5734b29083/integration/bootstrap/3/dataTables.bootstrap.js

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download