Dynamical Tables In Django ?

Using Django
1

Hi, I have many tables in my Django website (a Horse Racing db with many statistics) and I would like to interact with them dynamically.

For the moment I use Bootstrap and DataTables, who is fine, but I have some conflict with Bootstrap:
DataTables CSS overrides Bootstrap CSS ( .table-sm attribute don’t work anymore for example).
I’m not specially experimented with Bootstrap neither with DataTables, I don’t know where to start.

So I would like some advice, Is DataTables a good choice ?
What do you use on your side ?

2

We use and rely upon DataTables for all our tabular reporting needs. We use it with django-datatables-view. It all works extremely well for us.

Make sure you include the proper DataTables Bootstrap files in your project.

3

Thanks, do I need to use obligatory a JSON output ?
For the moment I use some classic html tables with template tags.

4

We find that it works a whole lot better that way.

Yes, DataTables will work by dynamically modifying an existing HTML table that has been previously rendered. However, that is extremely inefficient as it takes time for the server to render the page as HTML and then more time for DataTables to convert it in the browser. Everything just seems to work much more smoothly when the Django view emits JSON and DataTables uses that directly to build its table.

But if you want to get started by just modifying your existing table, that does work.

5

Ok, I have another question: it is unclear for me what the good “DataTables Bootstrap files” are.
Should I download them from the download section ? or copy some links from the page you gave me ?

For the moment I have this files from bootstrap 4:

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https:/stackpath.bootstrapcdn.combootstrap4.3.1cssbootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH1fQ784j6cYiJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">


         <!-- Bootstrap JS -->
        <script src="https:/code.jquery.comjquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpujzy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"><script>
        <script src="https:/cdn.jsdelivr.netnpmpopper.js@1.16.0distumdpopper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"><script>
        <script src="https:/stackpath.bootstrapcdn.combootstrap4.5.0jsbootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7BhkR0JKI" crossorigin="anonymous"><script>

I assume I need to add a CSS link and some JS links specific to DataTables.
But from where ? Is it from the download section ? I need some help because they are too many options…

6

Below the sample table at https://datatables.net/examples/styling/bootstrap4, there’s a box showing the individual components that they load for their example. I’d try using them, first.
It should be enough to at least get you started with something you can see & fiddle with.

7

I cloned the " django-datatables-view" example too, just to see how all this works.
Thank you, I comeback if I need.