Live demo

ID headline blog pub date


Description

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="//cdn.datatables.net/plug-ins/be7019ee387/integration/bootstrap/3/dataTables.bootstrap.css" rel="stylesheet" /> 
 <script src="//cdn.datatables.net/plug-ins/be7019ee387/integration/bootstrap/3/dataTables.bootstrap.js"></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': [
                'id',
                'headline',
                'blog',
                'pub_date',
            ],
        }