Menu icon Foundation
dataTables.foundation.js in 5.0.2

I've tried to include dataTables into the Foundation 5.0.2 version.

I downloaded the default Foundation 5.0.2 version and opened the default Foundation index.html.

Then I downloaded the dataTables js and css files for the integration to foundation from
https://github.com/DataTables/Plugins/tree/master/integration/foundation

and included them into the js/foundation/ and css/ folder.

The only thing that I have changed in the header was to include

<link rel="stylesheet" href="css/dataTables.foundation.css" />

<script src="js/foundation/dataTables.foundation.js"></script>
<script type="text/javascript" charset="utf-8">
	$(document).ready(function() {
		$('#example').dataTable();
	} );
</script>

after the modernizr.js part and left the rest unchanged.

In the body I only included a small test table

<table cellpadding="0" cellspacing="0" border="0" class="display" id="example" width="100%">
    <thead>
		<tr>
			<th>Platform(s)</th>
			<th>Engine version</th>
			<th>CSS grade</th>
		</tr>
	</thead>
	<tbody>
		<tr class="odd gradeX">
			<td>dd</td>
			<td class="center"> 4</td>
			<td class="center">X</td>
		</tr>
		<tr class="gradeC">
			<td>Misc</td>
			<td class="center">67</td>
			<td class="center">C</td>
		</tr>
	</tbody>
</table>

But unfortunately the table is just formatted with the foundation styles and not with the dataTable styles.

What am I doing wrong?

Thanks for your help!
Matt

tables

I've tried to include dataTables into the Foundation 5.0.2 version.

I downloaded the default Foundation 5.0.2 version and opened the default Foundation index.html.

Then I downloaded the dataTables js and css files for the integration to foundation from
https://github.com/DataTables/Plugins/tree/master/integration/foundation

and included them into the js/foundation/ and css/ folder.

The only thing that I have changed in the header was to include

<link rel="stylesheet" href="css/dataTables.foundation.css" />

<script src="js/foundation/dataTables.foundation.js"></script>
<script type="text/javascript" charset="utf-8">
	$(document).ready(function() {
		$('#example').dataTable();
	} );
</script>

after the modernizr.js part and left the rest unchanged.

In the body I only included a small test table

<table cellpadding="0" cellspacing="0" border="0" class="display" id="example" width="100%">
    <thead>
		<tr>
			<th>Platform(s)</th>
			<th>Engine version</th>
			<th>CSS grade</th>
		</tr>
	</thead>
	<tbody>
		<tr class="odd gradeX">
			<td>dd</td>
			<td class="center"> 4</td>
			<td class="center">X</td>
		</tr>
		<tr class="gradeC">
			<td>Misc</td>
			<td class="center">67</td>
			<td class="center">C</td>
		</tr>
	</tbody>
</table>

But unfortunately the table is just formatted with the foundation styles and not with the dataTable styles.

What am I doing wrong?

Thanks for your help!
Matt

Diogo Santos over 5 years ago

I have the same problem with foundation 5.1.1.

Did you get the answer to your problem ? Or anyone knows how to resolve this issue.

Coury R Richards over 5 years ago

Hey I just got this working you need both the datatables.js and the foundation_plugin.js that seems to have it working
```HTML



Demo

<!--Stylesheets-->
<style type="text/css">
    @import "lib/foundation-5.0.3/css/foundation.min.css";
    @import "lib/DataTables-1.9.4/integration/foundation/dataTables.foundation.css";
</style>

<!-- Scripts -->
<script src="lib/foundation-5.0.3/js/vendor/jquery.js"></script>
<script src="lib/foundation-5.0.3/js/vendor/modernizr.js"></script>

<!-- Datatable -->
<script type="text/javascript" src="lib/DataTables-1.9.4/media/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="lib/DataTables-1.9.4/integration/foundation/dataTables.foundation.js"></script>
<script type="text/javascript">
    $(document).ready( function () {
            $('#tableThing').dataTable();
        } );
</script>

```

Not sure how correct this is for the head of my html just started with Foundation (which I am digging).

I am having an issue though with the inputs being unusually large compared to the example over on datatables. Not sure what to do there.

Ivan Ogassawara about 5 years ago

Hi folks,

Anyone have tried use the Table Tools (datatables ext.)?

foundation.css breaks the table tools buttons.

My best regards,

Ivan Ogassawara about 5 years ago

Fixed using this:

/* datatables.TableTools */
div.DTTT.button-group div embed{
width: 48px!important;
height: 32px!important;
}