DataTables
Advanced interaction
features for your tables.
Editor
Comprehensive editing
library for DataTables.
Manual
Download
≡ Show site navigation

Generator styling not working

Generator styling not working

mrsebfreymrsebfrey Posts: 6Questions: 2Answers: 0
in Free community support

I am very new to DataTables/Editor - just bought and downloaded it. I'm playing with the Generator, I created a download for a table on my database, uploaded it to my server etc - the data comes in OK from the database, but there is no styling (Bootstrap) applied. Hmm. Also I don't see jQuery included in the file generated by the Generator. I tried it on the live Generator site (https://editor.datatables.net/generator/index) and hit "Run Now" - and the live page also lacks CSS styling completely. What am I missing?

Answers

  • allanallan Posts: 61,663Questions: 1Answers: 10,095 Site admin

    I've just tried it this is the result - note that it will be deleted automatically in about an hour.

    Did you check the "Bootstrap" option after selecting Bootstrap 3 or 4 from the list? You need to make sure that you include the Bootstrap library - not just the Bootstrap styling option (its just after the styling options and appears after your select the Bootstrap 3/4 styling option.

    Allan

  • mrsebfreymrsebfrey Posts: 6Questions: 2Answers: 0

    Yes, I've included Bootstrap 4. Please see the attached screen shot:

    Here is what the un-styled live Generator page looks like:

    Here is what the generated HTML looks like:

    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />

    <title>DataTables Editor - Live test</title>

    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4-4.1.1/jq-3.3.1/moment-2.18.1/dt-1.10.18/b-1.5.4/fh-3.1.4/r-2.2.2/sl-1.2.6/datatables.min.css">
    <link rel="stylesheet" type="text/css" href="css/generator-base.css">
    <link rel="stylesheet" type="text/css" href="css/editor.bootstrap4.min.css">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="https://cdn.datatables.net/v/bs4-4.1.1/jq-3.3.1/moment-2.18.1/dt-1.10.18/b-1.5.4/fh-3.1.4/r-2.2.2/sl-1.2.6/datatables.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="js/dataTables.editor.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="js/editor.bootstrap4.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="js/table.5148e88e-d22e-11e8-91dd-002590dcfa5d.js"></script>
</head>

    **

    Any clue what the problem could be?

  • mrsebfreymrsebfrey Posts: 6Questions: 2Answers: 0

    Interestingly enough, Bootstrap 3 works fine. Bootstrap 4 does not.

  • allanallan Posts: 61,663Questions: 1Answers: 10,095 Site admin

    Are you getting any errors reported in the console or network tab?

    This is what I was using:

    And get this:

    Allan

  • mrsebfreymrsebfrey Posts: 6Questions: 2Answers: 0

    Interesting - when I select jQuery 1, it works with Bootstrap 4. When I select jQuery 3, it does not work. . I do not get any errors in the Chrome console either way.

This discussion has been closed.

DataTables

DataTables designed and created by SpryMedia Ltd.
© 2007-2023 MIT licensed. Privacy policy. Supporters.
SpryMedia Ltd is registered in Scotland, company no. SC456502.