Implementing Bootstrap 4 DataTables

Question

I am attempting to implement a bootstrap 4 datatable, and cannot seem to get it to work. In My head I have the required CSS

    <link href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css" rel="stylesheet">

I then have the following required scripts below:

    <script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>

I then call the scripts onto my standard formatted HTML table, with the correct ID as follows:

<script>
$(document).ready(function() {
    $('#myTable').DataTable();
} );
</script>

None of this However works, and the table displays using normal Bootstrap 4 Table, with no search/sorting function. Could anyone explain what I'm doing wrong here?

Thanks

EDIT: I tried this unfortunately it seemed to break the CSS for the whole site. All I really want to do is only show the first 10 rows of my bootstrap 4 table, but every time I google it it comes up with results for data tables. Is there any way to show just the first 10 rows of a standard bootstrap 4 table?

Have you checked your console for error messages?

j08691
– j08691

2019-11-02 22:37:58 +00:00
Commented Nov 2, 2019 at 22:37 — j08691
– j08691, Commented Nov 2, 2019 at 22:37
Yep, nothing to be seen...

S.Stevens
– S.Stevens

2019-11-02 22:43:41 +00:00
Commented Nov 2, 2019 at 22:43 — S.Stevens
– S.Stevens, Commented Nov 2, 2019 at 22:43

Jahanzeb Nawaz · Accepted Answer · 2019-11-02 22:54:30Z

5

It seems like you haven't imported Jquery in your HTML File. you need to use 3 files for Data Tables as follow

https://code.jquery.com/jquery-3.3.1.js
https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js
https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js

But you only added

https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js
https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js

Import JQuery before

jquery.dataTables.min.js and
dataTables.bootstrap4.min.js

after the imports of js and jquery files write your Jquery Code

<script>
   $(document).ready(function() {
      $('#myTable').DataTable();
    });
</script>

and for header

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

check that as follow, This will work fine.

answered Nov 2, 2019 at 22:54

Jahanzeb Nawaz

1,23814 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

S.Stevens Over a year ago

I tried this unfortunately it seemed to break the CSS for the whole site. All I really want to do is only show the first 10 rows of my bootstrap 4 table, but every time I google it it comes up with results for data tables. Is there any way to show just the first 10 rows of a standard bootstrap 4 table?

Jahanzeb Nawaz Over a year ago

if it breaks CSS of the whole site it means you are using any files twice or used jquery twice .. it should not break the CSS, double-check it if you have imported CSS properly. if its possible upload your code on jsfiddle so i can check and let you know the exact problem.

Jahanzeb Nawaz Over a year ago

Working Example of DataTables. Try it jsfiddle.net/ebRXw/2985

S.Stevens Over a year ago

I will try again- if I have multiple versions of JQuery, should I use the most up to date version?

Jahanzeb Nawaz Over a year ago

yes use latest it will not make any issue.. and do check that fiddle I shared with you.. its working example. so you just need to copy and change as per your requirements.

|

Collectives™ on Stack Overflow

Implementing Bootstrap 4 DataTables

1 Answer 1

12 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

12 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related