Datatable Plugin Not Working For HTML Table in Blogspot

Onyebuchim

I'm new to the DataTables tool. I want to add a dynamic table in my blogger so i used the javascript method with the CDN option but nothing worked. No effect, just plain appearance.

See code below

<!--CDN Loader-->
<link href="//cdn.datatables.net/1.10.10/css/jquery.dataTables.css" rel="stylesheet" type="text/css"></link>
  
<script charset="utf8" src="//cdn.datatables.net/1.10.10/js/jquery.dataTables.js" type="text/javascript"></script>
<script>
 $(document).ready( function () {
    $('#example').DataTable( {
        "scrollX": true
    } );
} );

div.dataTables_wrapper {
        width: 800px;
        margin: 0 auto;
    }
</script>

<table id="brokers" class="display nowrap" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>First name</th>
                <th>Last name</th>
                <th>Position</th>
                <th>Office</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tiger</td>
                <td>Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
            </tr>
            <tr>
                <td>Garrett</td>
                <td>Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
            </tr>
            <tr>
                <td>Ashton</td>
                <td>Cox</td>
                <td>Junior Technical Author</td>
                <td>San Francisco</td>
            </tr>
          
        </tbody>
    </table>
<!-----table</script><!----table-->

allan

<table id="brokers"

But in the Javascript you use:

$('#example')

That is the issue.

Allan

Onyebuchim

ok thanks, i'll correct it and see if it works

Onyebuchim

I effected the corrections and it's still plain. Nothing works. See website: http://fxtradecity.blogspot.com.ng/p/blog-page_8.html

allan

If you open your browser's console you'll see there are errors on the page:

blog-page_8.html:1205 Uncaught SyntaxError: Unexpected token {
blog-page_8.html:2388 Uncaught TypeError: $(...).on is not a function

Also you are using a very old version of jQuery - 1.3.2. DataTables requires 1.7 or newer.

Allan

Onyebuchim

Thanks for the response. I checked my template and i cannot find where i used an old version. This is what i have:

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'/>

Also about the syntax error i copied the sample code directly from this website in order to test the functionality of the tool.

Anyway how can i get it cleared.

allan

The syntax error is because you have CSS in a script tag. Move it into your stylesheet.

As for jQuery - it looks like you are loading three different versions:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

Allan

Onyebuchim

I took off the first version and left the 1.10.2 jquery version.

I searched hard for the 1.3.2 and cannot find it on my blog template.

Secondly i took the css tag to the template above the [[b:skin section

After trying the above nothing still worked.

Do i take off the CDN loader script from the html page and place it on my template instead?

<link href="//cdn.datatables.net/1.10.10/css/jquery.dataTables.css" rel="stylesheet" type="text/css"></link>

allan

All I can really say is that if you "View source" in your browser you'll find:

...
<div class='widget-content'>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" >

/***********************************************
* Scroll To Top Control script- &#169; Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Modified by www.MyBloggerTricks.com
* This notice MUST stay intact for legal use
* Visit Project Page at http://www.dynamicdrive.com for full source code
***********************************************/
...

That is where jQuery 1.3.2 is being included. Perhaps it is part of some other plug-in - I couldn't say.

Allan

Onyebuchim

Thanks a lot. I saw the plugin. It's a scroll to the top widget. I changed the version in the code to 1.10.2

Tested it and still the same ol plain table without any effect or dynamic features. I really dont know what i'm missing or have not added.

I used the sample on your website on my blog to ensure it follows suit but it's not helping.

Can i get a step by step guide or tutotrial here that has Requirements, Checklist, and so on.

Thanks for your patience and help

allan

You changed the version, but you are still loading two different jQuery files! As I stated above, you should really only load one. There is no tutorial for such an instance - you simply need to include only one jQuery.

Allan

Onyebuchim

Thanks a lot. I finally got it working. I removed unnecessary and duplicated js files. I also used the CDN Method to handle proper loading of the css and js file.

However i'm having a challenge resizing my table to fit the post page. Is there any feature that helps to do that? I've tried putting the table into a DIV and then set the DIV to control the resizing but it does not work. I get a serious overflow off the post screen.

See web: http://fxtradecity.blogspot.com.ng/p/brokers.html

allan

In your CSS:

div.dataTables_wrapper {
    width: 800px;
    margin: 0 auto;
}

Remove the width part.

Allan

Onyebuchim

Please how can i get access to the css file and edit it. My table refuses to collapse cells. I have tried using internal css style to collapse table borders but it does not work.

I understand the file for the css is in this link:

<link href='//cdn.datatables.net/1.10.10/css/jquery.dataTables.css' rel='stylesheet' type='text/css'/>

How do i access it and make amendments?

Onyebuchim

I just observed that the DataTable plugin does not allow wide tables to fit into containers like DIVs.

I tried several style css codes to wrap the table but it still didn't work.

But when i took of the Datatable plugin, the table perfectly resized to the container.

See code:

<style>
.page { width: 700px; border:solid 1px blue;}

.my-table { word-wrap: break-all; table-layout:fixed; width: 100%; display: block;
overflow: auto;}
</style>

Broker	Country	Broker Type	Acct. Type	Min Deposit	Platform	Payment-Withdrawal	Leverage	Currency pairs	Instruments	Bonus	Others
Smith	John	STP	$50.00	$1,000	Smith	John	$50.00	EURUSD	Smith	John	John
Bach	Frank	ECN	$50.00	$100	Smith	John	$50.00	EURUSD,GBPUSD	Smith	John	John
Doe	Jason	ECN, STP	$100.00	$500	Smith	John	$50.00	USDJPY	Smith	John	John
Conway	Tim	STP	$50.00	$2000	Smith	John	$50.00	NZDUSD, XAUUSD	Smith	John	John
Smith	John	ECN	$50.00	$2000	Smith	John	$50.00	GBPUSD	Smith	John	John

$(document).ready( function () { $('#BrokerTable').DataTable( { scrollX: 400}); } );

allan

I understand the file for the css is in this link: <link href='//cdn.datatables.net/1.10.10/css/jquery.dataTables.css' rel='stylesheet' type='text/css'/>

No it isn't. It is inline in the brokers.html page source - line 796. How you access that file to edit it - I don't know. Perhaps SFTP to the server and use an editor, but it will depend upon your system.

Allan

Onyebuchim

Thanks i have been able to wrap it and it's manageable although not too presentable. The search button is almost wrapped off from view unless you scroll through the DIV container scrollbar. I wish the search form was on the left. Also I had to take off some columns and I am looking for a way to hide other columns and enable a turn on/turn off toggle button to display hidden columns. I dont know if this feature is available.

Also the samples of CSS styling in your website is good but there's none that deals with alternate color of rows, header color background, and selecting a choice of color.

I aslo noticed that the JqueryUI Theme is not working with this version of table. The styling is very beautiful and professional but unfortunately not working.

Please help.

Onyebuchim

I have been able to find a solution here that uses an API to dynamically hide and show columns. That's great.

However i tried the codes and nothing worked. Just plain.

Please help me check what i'm doing wrong: http://fxtradecity.blogspot.com.ng/p/brokers.html

My sincere apologies for any inconveniences. Thanks

allan

Have you looked in your browser's developer tools? If so you would clearly see the error:

Uncaught TypeError: $(...).DataTable is not a function

It looks like, once again, you are including jQuery more than once on the page (three times in fact).

I've noted that issue a number of times before and once again here.

Allan

Onyebuchim

Ok thanks. I have other widgets that uses other jquery libraries.

I actually followed the instructions on the example: http://datatables.net/examples/api/show_hide.html where it advised that certain libraries needs to be added to enable it work.

The statement says "In addition to the above code, the following Javascript library files are loaded for use in this example":

//code.jquery.com/jquery-1.11.3.min.js
https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js

I added both files to my template. This means i have to remove already existing library files which i'm thinking might disrupt other widgets using them. I'll give it a try and see if that's the problem

allan

As we discussed above, load jQuery just once per page.

Onyebuchim

Thanks. I was able to detect the duplicate jquery and removed it. However i tried the example here: https://datatables.net/extensions/buttons/examples/column_visibility/columnsToggle.html

I followed the instructions but the buttons do not appear on my page. The example will help me hide some columns and thereby reduce table size.

Please kindly help me check what i'm doing wrong.

Onyebuchim

I looked thoroughly at the example and included the necessary js file and cs file for the button column visibility example. I understand that the colVis option has been retired so i removed it.

Having tried all this the button does not appear.

Please help

allan

Looks like you are loading Buttons before DataTables. I would suggest doing it the other way around since Buttons is a plug-in for DataTables!

Also your page is still loading three different jQuery files.

Onyebuchim

Wowwww you're right it worked. I rearranged it. The main jquery on top and then the buttons below. Then i deleted the extra jquery (1.11.3).

So how do i make some columns to appear hidden in page load and make the size of the table shrink when columns are hidden.

Is this possible?

allan

So how do i make some columns to appear hidden in page load

Use columns.visible.

Onyebuchim

Thanks a lot. I tried the codes but it took off all the effects on the table and made it plain html table.

See code below:

$(document).ready(function() {
$('#BrokerTable').DataTable( {dom: 'Bfrtip', buttons: [{extend: 'colvis', columns: ':not(:first-child)'}]}

 "columnDefs": [{ "visible": false, "targets": 0 }]); 

} );
</script>

What could be the problem?

allan

Did you look in your browser's error console? The error is fairly clear:

brokers.html:1331 Uncaught SyntaxError: missing ) after argument list

You have Javascript syntax errors in that block.

Allan

Onyebuchim

I've looked very deep at the codes and i seem not to know where the errors are coming from. I'm not too good at jquery codes. I'm more of a VB.Net programmer. I appreciate if someone who is good at jquery help me out. I'm trying to combine two features here (The toggle button and hide column before load)

$(document).ready(function() {
$('#BrokerTable').DataTable( {dom: 'Bfrtip', buttons: [{extend: 'colvis', columns: ':not(:first-child)'}]} );
"columnDefs": [{ "visible": false, "targets": 0 }];

} );

Thanks

Onyebuchim

This time around i copied the raw code from the samples here (http://datatables.net/reference/option/columns.visible) to ascertain if my codes were wrong. But i found out that the issue is from the sample code i got here:

$('#BrokerTable').dataTable( {
"columnDefs": [
{ "visible": false, "targets": 0 }
]
} );

See error below:
TypeError: $(...).dataTable is not a function

allan

I would suggest you run your little Javascript block through JSBeautify. Properly formatted it is fairly clear where the error is.

Have a look also at the "Setting options" section of the manual which documents how to combine options into a single object.

Allan