Foundation 6.3.x and latest DataTables

johansjoa

Hi,

I'm moving from foundation 5.5.x to 6.3.x and saw that foundation has changed the way they defines and style e.g. button-groups. In version 5.5.x foundation used ul/li to define button-groups, in 6.3.x they use div instead.

If you want to style datatables with foundation it seams that datatables expect the button-groups to be ul/li and this cause foundation to fail to style the button-groups correctly.

In general, hows the support for foundation 6.3.x in the latest datatables? Any plans to support the latest foundation versions?

Thanks in advance!

allan

The Foundation integration libraries for DataTables should support both 5 and 6. I made a bit of a mistake deciding to try and support them both with the same files and it means there are a few if statements in the code for that integration, but it should still be present.

For example, here is the div tag support for the buttons that you mention.

Allan

leslies61801

I am receiving a similar issue where the datatable pagination is now displaying as a div with a links within it (Foundation 6.4.3 and datatables 1.10.16):

<div class="dataTables_paginate paging_simple_numbers" id="myTable_paginate">
<a class="paginate_button previous disabled" aria-controls="myTable" data-dt-idx="0" tabindex="0" id="myTable_previous">Previous</a>
<span>
<a class="paginate_button current" aria-controls="myTable" data-dt-idx="1" tabindex="0">1</a>
<a class="paginate_button " aria-controls="myTable" data-dt-idx="2" tabindex="0">2</a></span>
<a class="paginate_button next" aria-controls="myTable" data-dt-idx="3" tabindex="0" id="myTable_next">Next</a>
</div>

See the attached image paginate1.png to see what this looks like.

From the examples online on the dataTables.net and Foundation websites (https://foundation.zurb.com/sites/docs/pagination.html) it looks like there should be a <ul> around the a tags and each a tag should be within an <li> tag.

With Foundation 5 and datatables 1.10.x the following:

<div class="dataTables_paginate paging_simple_numbers" id="myTable_paginate">
<ul class="pagination">
<li class="paginate_button previous unavailable" aria-controls="myTable" tabindex="0" id="myTable_previous">
<a href="#">Previous</a>
</li>
<li class="paginate_button current" aria-controls="myTable" tabindex="0">
<a href="#">1</a>
</li>
<li class="paginate_button " aria-controls="myTable" tabindex="0">
<a href="#">2</a>
</li>
<li class="paginate_button next" aria-controls="myTable" tabindex="0" id="myTable_next">
<a href="#">Next</a>
</li>
</ul>![](https://datatables.net/forums/uploads/editor/3q/w41onf0rf7sd.png "")
![](https://datatables.net/forums/uploads/editor/w0/7s0689nc75vg.png "")

</div>

See the attached image paginate2.png to see what this looks like.

Am I missing a configuration item in the datatable to have it use the <ul> and <li> tags as it did with foundation 5 versus foundation 6?

Any suggestions would be appreciated.

Thanks,

Leslie

allan

Regardless of the version a ul/li tag combination should be used.

Can you give me a link to a page showing the issue please?

Thanks,
Allan

ServiceSoftware

I'd love to use DataTables and Editor with Foundation 6.4.3 and X Y grid, but especially Editor seems to have a problem.

Foundation 5.5.2 example implements OK:
http://www.retaildesktop.com/staff_simple5.aspx

Foundation 6.4.3 example is a bit off and Editor has both positioning and format problems.
http://www.retaildesktop.com/staff_simple6.aspx

The only difference between these two pages is the foundation.min.css file and foundation.min.js file.

DataTables Issue with Foundation 6.4.3: Notice the positioning of the Search box and the pagination.

Editor issue with Foundation 6.4.3: Select a row and edit the record and the formatting and positioning of the popup is off. In fact, not even visible with an iPhone.

Any suggestions for making Foundation 6.4.3 happy?

allan

Hi,

Thanks for flagging this up! It appears that the old float grid that DataTables' used for the Foundation integration is disabled by default in Foundation 6.4. I've added suitable classes to have it work with 6.4's xy grid.

I've also made a small change to the Editor integration which addresses the issue with the modal not showing in the correct place.

The updates are in the attached files and will be in the next release versions. Let me know how you get on with them.

Regards,
Allan