Fomantic UI and Datatables (Styling)

sgiesen

I just would like to style my datatable with the fomantic UI.

What I did so far:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.9.2/semantic.min.css" />

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/2.0.2/css/dataTables.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/2.0.2/css/dataTables.semanticui.css">

and in my
$(document).ready(function() {

$('#table1').DataTable({
"paging": true,

  "lengthChange": false,  
  "searching": false,
  "info": false,
  "language": {
        "url": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/German.json"
    },
  "order": [[3, "desc"]],
  "columnDefs": [
   { type: 'de_date', targets: 3 }
 ] 
});

I've got a simple table, beginning it like this:

<

table class="ui sixteen wide centered column unstackable table nowrap" id="table1" name="table1">

Sadly, Paging, Searching etc. are not being skinned correctly as shown in the examples on the website.

What I am doing wrong, can you help me?

kthorngren

It doesn't look like you are using the Datatables Formantic styling library. Use the Download Builder to get the proper files/CDN for Formantic integration.

Kevin

sgiesen

Thank you! I can confirm that using only these works:

    <link href="https://cdn.datatables.net/v/se/dt-2.0.2/datatables.min.css" rel="stylesheet">

    <script src="https://cdn.datatables.net/v/se/dt-2.0.2/datatables.min.js"></script>