ETA on semantic ui styling :)

kmd1970

Just wanted to inquire on when we might see an official Semantic UI style for Datatables :) or if you could enhance the one I submitted here:

https://datatables.net/forums/discussion/comment/78075/

A recent try:

https://jsfiddle.net/kmd1970/37enwegd/

allan

As soon as I'm able to get the time to do it :-). It is nearing the top of my todo list.

Allan

dts_sl

@kmd1970 I'm anxious for a semantic-ui integration, too. I've looked at your demo (not the actual code) and was wondering if you feel there's stuff missing, or maybe not done right? Or something that prevents its usage? Or maybe you're just looking for something official? Just curious how you'd summarize the state of what you posted. Thanks!

kmd1970

@dts_sl

Sadly, I am not a CSS, Javascript, Semantic UI or Datatables guru, but I am always trying to learn.

The demo sample I posted amounts to just few hours of effort trying to duplicate what I saw in the Datatables Bootstrap styling example :

https://www.datatables.net/examples/styling/bootstrap.html

Allan is the Datatables expert, so I seek his input on the proper way to implement changes.

I am currently using my Semantic ui / Datatables stylesheet for a company project and it seems to display properly so far.

When I have more time, i will refine my work and include some JavaScript code to automatically add the dom: codes and classes into the paging toolbar, table and wrapper. Eventually I will switch to Allan's official version.

kmd1970

Fiddle js, css, html has been updated

https://jsfiddle.net/kmd1970/37enwegd/

allan

I have to say, it looks like a darn nice table the Semantic styled table. Nice work on the integration there.

Allan

kmd1970

Thanks!

I am working on a using your foundation and bootstrap examples to create a Datatables.semantic.js file so I can remove my dom: declaration.

kmd1970

Also, it looks even better with a font family and size change.

1. Removed 'Lato' from all font-family: in semantic.css
2. Changed font-size: from 14px to 12px in semantic.css.

http://i.imgur.com/eiyBHCF.jpg

kmd1970

New and Improved!

1. Removed all custom paging toolbar CSS to use built-in semantic UI menu and pagination classes. (less custom css!)
2. Add JavaScript code for automatic DataTables / Semantic UI style integration (will be move to a Datatables.semantic.js file)
3. remove dom from datatables initialisation.
4. Added semantic ui pointer icons to buttons (will be made optional later)

https://jsfiddle.net/kmd1970/37enwegd/

kmd1970

1. Added to full_numbers_icon to pagingType

This turns on the semantic ui pointer icons on buttons.

var dtable = $('#example').DataTable({
     "pagingType": "full_numbers_icon"

});

http://jsfiddle.net/kmd1970/37enwegd/

kmd1970

Responsive example:

Add unstackable class to the table to disable semantic ui table responsive adjustments.

http://jsfiddle.net/kmd1970/1c5uvg0q/