Live demo

ID headline blog pub date


The easiest way to get Bootstrap datatables is to use the alternate structural template datatableview/bootstrap_structure.html, which simply adds the table, table-striped, and table-bordered classes to the main table tag. You can specify the template directly in datatable_options["structure_template"], or you can create your own datatableview/default_structure.html template and simply paste the contents of the bootstrap version into it.

Overriding datatableview/default_structure.html will affect all datatables using the default template!

This gets the table itself looking better, but the rest of the controls added by dataTables.js are a little lackluster by comparison. To fix this, reference the latest integration helper CSS and javascript support files in the template:

 <link href="//" rel="stylesheet" /> 
 <script src="//"></script> 

See the official datatables documentation on the subject for more information.

The pagination buttons are currently a bit strange with Bootstrap 3.1.1 and Datatables 1.10.0. Please make sure you are using the latest integration files by checking the link just above.

Implementation in code

    class BootstrapTemplateOfficialDatatableView(DatatableView):
        model = Entry
        datatable_options = {
            'structure_template': "datatableview/bootstrap_structure.html",
            'columns': [