Pagination not showing bootstrap css

Pagination not showing bootstrap css

Rougarou72Rougarou72 Posts: 5Questions: 1Answers: 0

I have a working test for datatables, using oho/mysqli to pull the table rows, the table formats great and all functionality is there, but the pagination looks just like bare links, as i am new to datatables |I am using CDN links to all the scripts and css, what could be wrong?

Replies

  • colincolin Posts: 15,240Questions: 1Answers: 2,599

    The bootstrap examples are working fine here, so I suspect the issue due to missing files. If you look at this examples there, ensure you have the necessary files listed on the Javascript and CSS tabs beneath the table.

    If it's still not working for you, please can you link to your page so that we can see the problem.

    Cheers,

    Colin

  • Rougarou72Rougarou72 Posts: 5Questions: 1Answers: 0
    edited February 2023

    I have checked that all the links are there,
    I have placed the page on my server at: https://teeseyed.online/ussastoria/_sto_systems/stod.php

  • kthorngrenkthorngren Posts: 21,276Questions: 26Answers: 4,938

    Take a look at the browser's console. You are getting this error:

    Uncaught ReferenceError: jQuery is not defined

    Load order is important. Change the order of your .js files to match this example.

    Kevin

  • Rougarou72Rougarou72 Posts: 5Questions: 1Answers: 0
    edited February 2023

    Seems to be working now, I was always told that calling js scripts were to be before the </body> tag and the last thing on the page.

    I used 'view page source' on the example and copied the <link> and <script> blocks exactly

  • kthorngrenkthorngren Posts: 21,276Questions: 26Answers: 4,938
    edited February 2023

    Where you had them on the page is ok. The problem was with the load order of the files themselves. You had this:

        <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.13.2/js/dataTables.bootstrap5.min.js"></script>
        <script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
        <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.13.2/js/jquery.dataTables.min.js"></script>
    

    Which caused this error:

    Uncaught ReferenceError: jQuery is not defined

    The error is because dataTables.bootstrap5.min.js requires utilities from jquery-3.5.1.js. So jquery-3.5.1.js needs to load first.

    Kevin

Sign In or Register to comment.