ColReorder documentation and Bootstrap 4 styling js files to include

ColReorder documentation and Bootstrap 4 styling js files to include

LoloLolo Posts: 42Questions: 7Answers: 1

In documentation for ColReorder extension and Bootstrap 4 styling (see https://datatables.net/extensions/colreorder/examples/styling/bootstrap4.html) it is written that we have to use these js files:

https://code.jquery.com/jquery-3.5.1.js
https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js
https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js
https://cdn.datatables.net/colreorder/1.5.2/js/dataTables.colReorder.min.js

My question is the following:
Do we have to also include the file colReorder.bootstrap4.min.js from colreorder/1.5.2/js/ folder?

Thanks in advance and have a nice day.

Replies

  • kthorngrenkthorngren Posts: 20,139Questions: 26Answers: 4,735

    Click on the CSS tab to see the CSS files needed, from the example you linked:

    https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css
    https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css
    https://cdn.datatables.net/colreorder/1.5.2/css/colReorder.bootstrap4.min.css
    

    You can use the Download Builder to get the proper set of files.

    Kevin

  • LoloLolo Posts: 42Questions: 7Answers: 1

    Hi kthorngren,

    Thanks for your answer.

    I already know that for CSS tab and as you can see below, the specific css file for Bootstrap is used.

    https://cdn.datatables.net/colreorder/1.5.2/css/colReorder.bootstrap4.min.css
    

    So my question is on the specific JS file for Bootstrap 4

    <script type="text/javascript" src="DataTables-1.10.21/js/dataTables.bootstrap4.min.js"></script>
    

    Is it just a small mistake on the documentation and I have to include it or not?
    Otherwise, what is the aim of this file?

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    Nope, not a mistake, and yep, you do need it. It's the code specific for the BS4 styling.

    Colin

  • kthorngrenkthorngren Posts: 20,139Questions: 26Answers: 4,735

    The Bootstrap 4 Styling docs explains what is needed.

    Kevin

  • LoloLolo Posts: 42Questions: 7Answers: 1

    So if I understand what you told me and what is written in the documentation:

    Both of these Javascript files should be included - the main file to include the basic DataTables functionality and the styling file to set defaults as appropriate for the styling library.

    We should have this like files to include:

    https://code.jquery.com/jquery-3.5.1.js
    https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js
    https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js
    https://cdn.datatables.net/colreorder/1.5.2/js/dataTables.colReorder.min.js
    https://cdn.datatables.net/colreorder/1.5.2/js/colReorder.bootstrap4.min.js
    

    colReorder.bootstrap4.min.js file is missing isn't it?

  • LoloLolo Posts: 42Questions: 7Answers: 1

    For example if I take the "Buttons" extension, there is 4 files to include in the styling example.

    https://code.jquery.com/jquery-3.5.1.js
    https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js
    https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js
    https://cdn.datatables.net/buttons/1.6.2/js/dataTables.buttons.min.js
    https://cdn.datatables.net/buttons/1.6.2/js/buttons.bootstrap4.min.js
    ...
    

    So I suppose it should be the same for "colReorder", "Select", ... extensions.

    Thanks in advanced for your answer.

  • kthorngrenkthorngren Posts: 20,139Questions: 26Answers: 4,735
    edited May 2020

    The BS4 Styling doc I linked to states this:

    Please note that not all extensions require Javascript and / or CSS for the styling libraries. If the styling libraries are not present in the repo or package, then they are not required.

    Kevin

  • LoloLolo Posts: 42Questions: 7Answers: 1

    You are right, it is written.
    So, if the file exists in the folder extension, I have to include it or I am wrong?

    It is just for my understanding.
    And if there is a little oversight in the documentation, then the author will be able to correct it.

  • kthorngrenkthorngren Posts: 20,139Questions: 26Answers: 4,735
    edited May 2020

    So, if the file exists in the folder extension, I have to include it or I am wrong?

    Yes you should include the additional styling files. If you don't then minimally the styling for that component may not follow with the styling framework. You could also find that the UI will have more obvious display issues like elements not being aligned properly, etc.

    EDIT: You can use the Download Builder to generate the proper set of files for your solution.

    Kevin

  • LoloLolo Posts: 42Questions: 7Answers: 1

    Thanks a lot for your answer.

    In fact, I have already included the styling javascript file but I would like to be sure to do things like they should be.

    So, in the future it would be nice to update the documentation in order to be correct.

    Thanks again and have a nice day.

  • kthorngrenkthorngren Posts: 20,139Questions: 26Answers: 4,735

    So, in the future it would be nice to update the documentation in order to be correct.

    Please post the link and specifics of what documentation needs updating The developers will update it if appropriate.

    Kevin

This discussion has been closed.