DataTables Implmentation in Bootstrap

cslack

Hello,
This is probably a really simple question but I cannot get the DataTables extension to work in Bootstrap 3. All I am wanting to do is create the button in the first column so that when the table is loaded it displays on the page and the further information can be clicked on. Quite a simple use of the product I would have thought?

I am calling the following at the top of my page - which have been created using the download builder:

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/t/bs-3.3.6/jqc-1.12.0,dt-1.10.11,r-2.0.2/datatables.min.css"/> <script type="text/javascript" src="https://cdn.datatables.net/t/bs-3.3.6/jqc-1.12.0,dt-1.10.11,r-2.0.2/datatables.min.js"></script>

(From the Download Builder I selected jQuery1, Bootstrap Include Library, DataTables, Responsive)

My table starts with:

<table id="table_example" class="table dt-responsive nowrap">

And I call:

<script type="javascript"> $(document).ready(function() { $('#table_example').DataTable(); } ); </script>

Anything obvious as to why it isn't working?

allan

Do you mean something like this example?

I don't see any immediate reason your code isn't working above. I'd need a test page showing the issue as per the forum rules.

Allan

cslack

Apologies Allan. First time here.

Here is a webpage with just a table on with all the code that I mentioned in my post:
http://www.viewfromtheclubhouse.co.uk/articles/timeline.php

I want it to behave like this table when shrunk down:
https://datatables.net/extensions/responsive/examples/styling/bootstrap.html

Regards,
Chris

allan

Hi Chris,

The issue is that jQuery is being loaded twice on the page:

1. From datatables.min.js
2. From <script src="../js/jquery.js"></script>

The way jQuery works is if you load it again it will overwrite the original, taking any plug-ins with it - hence why you are getting an error about DataTables not being present.

The fix is to load jQuery only once.

Off topic - where is the ground in the picture? And any chance of an RSS feed for your posts - I'm looking forward to reading them :-). Plenty to talk about after the SA tour for both the Test and ODI teams...

Allan

cslack

Thanks Allan.

I have removed the standard jquery as I believe the library is in the datatables load too? However, that hasn't made any difference?

The only jQuery I now load is
<script type="text/javascript" src="https://cdn.datatables.net/t/bs-3.3.6/jqc-1.12.0,dt-1.10.11,r-2.0.2/datatables.min.js"></script>

Apologies if I have missed something else - I am ok at basic coding but get stuck when it gets more advanced!

The ground is actually Bath Rugby club - but when it is occasionally used for a Somerset game! I will look at sorted an RSS :)

Chris

allan

I have removed the standard jquery as I believe the library is in the datatables load too?

Its is as configured (the jqc-1.12.0 part).

There is a difference - the error has changed. It is now:

Uncaught TypeError: Cannot read property 'mData' of undefined

That is happening because the table doesn't have thead and tbody elements. See this page for details on the required table structure.

The ground is actually Bath Rugby club

I thought it looked somewhat familiar (I lived in Bristol for a few years)! I had no idea the Somerset played a few games there though.

Allan

cslack

Many thanks for all your help with this Allan. The piece is now live here: http://goo.gl/gf6Fvk with the use of DataTables on mobile :)