DataTables
Advanced interaction
features for your tables.
Editor
Comprehensive editing
library for DataTables.
Manual
Download
≡ Show site navigation

Semantic-UI integration

Semantic-UI integration

vincent-vincent- Posts: 4Questions: 0Answers: 0
in Free community support

It seems that the "show entries" dropdown behaves weirdly in the Semantic-UI example:

https://datatables.net/examples/styling/semanticui.html

Is that a known issue which is being fixed?

Replies

  • allanallan Posts: 63,823Questions: 1Answers: 10,517 Site admin

    It is now a known issue as you've pointed it out (I didn't know about it before).

    I've just taken a look into this and don't have an immediate answer for you I'm afraid. There isn't anything obvious in DataTables that is causing it, and I can't reproduce it in the Semantic UI examples, so there is something going on that I'm missing.

    Allan

  • vincent-vincent- Posts: 4Questions: 0Answers: 0
    edited March 2016

    Hi allan,

    first of all, thank you for having a quick look at that issue and to give me a reply.

    I've been trying to find what's going on but I haven't had success. Perhaps something needs to be changed in the jquery.dataTables.js, since just including the jquery.dataTables.js and the upstream Semantic-UI stuff (not the dataTables.semanticui.{js,css}) the problem still happen.

    Or maybe some "stopPropagation()" are needed in dataTables.semanticui.js, I don't know.

    This small example illustrates the problem:

    <html>
<head>
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.css">
<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="http://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.js"></script>
<script>
$(document).ready(function(){
  $('#a').DataTable();
  $('.dataTables_length select').addClass('ui dropdown').dropdown();
});
</script>
</head>
<body>
<table id="a" class="ui celled table">
  <thead><tr><th>a</th></tr></thead>
  <tbody><tr><td>a</td></tr></tbody>
</table>
</body>
</html>
  • allanallan Posts: 63,823Questions: 1Answers: 10,517 Site admin

    That's basically exactly what The Semantic UI integration for DataTables is doing. I've tried disabling the events that DataTables uses to update the select list, but that didn't appear to have any effect - problem still present.

    I need to do a bit more investigation I'm afraid.

    Allan

  • allanallan Posts: 63,823Questions: 1Answers: 10,517 Site admin

    I've just been looking into this a but more and it looks like its a bug in Semantic UI. Its flagged for their 2.2 milestone, so hopefully we'll see a fix then.

    There doesn't appear to be a wrong around other than to not use a label, but that's good for accessibility, so that's not a change I want to make in DataTables.

    Allan

  • vincent-vincent- Posts: 4Questions: 0Answers: 0

    Thank you very much Allan to investigate this issue. I've subscribed myself to the issue in GitHub and I hope Semantic UI gets fixed soon.

    Regards,

    Vincent

  • vincent-vincent- Posts: 4Questions: 0Answers: 0

    Hello Allan,

    Semantic-UI 2.2 has been released. Perhaps you want to update the Semantic-UI integration example (https://datatables.net/examples/styling/semanticui.html) in order to use that version and have the problem fixed :-)

    Regards,

    Vincent.

  • allanallan Posts: 63,823Questions: 1Answers: 10,517 Site admin

    Thanks for pointing out that 2.2.x is out. I've updated my libraries locally and it does indeed fix the issue. I'll push the update out to the site shortly.

    Regards,
    Allan

  • femtofemto Posts: 2Questions: 0Answers: 0

    Hi Allan,

    any hints when we're able to download the Semantic UI integration for DataTables using Bower?

    BR,
    ~ HD ~

  • allanallan Posts: 63,823Questions: 1Answers: 10,517 Site admin

    Should be early December when Editor 1.6 ships. That is the last component that needed Semantic UI support to complete the set for DataTables and its extensions.

    Allan

  • femtofemto Posts: 2Questions: 0Answers: 0

    Hi Allan,

    great to hear that!

    Thanks for the feedback!

    BR,
    ~ HD ~

This discussion has been closed.

DataTables

DataTables designed and created by SpryMedia Ltd.
© 2007-2023 MIT licensed. Privacy policy. Supporters.
SpryMedia Ltd is registered in Scotland, company no. SC456502.