New: Semantic UI support for Buttons

css/buttons.semanticui.scss

@@ -0,0 +1,43 @@
+
+@import 'mixins.scss';
+@import 'common.scss';
+
+div.dt-button-collection {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 150px;
+	margin-top: 3px !important;
+	z-index: 2002;
+	background: white;
+
+	@include dtb-fixed-collection();
+}
+
+button.buttons-collection.ui.button span:after {
+	display: inline-block;
+	content: "▿";
+	padding-left: 0.5em;
+}
+
+div.dt-button-background {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	z-index: 2001;
+}
+
+@media screen and (max-width: 767px) {
+	div.dt-buttons {
+		float: none;
+		width: 100%;
+		text-align: center;
+		margin-bottom: 0.5em;
+
+		a.btn {
+			float: none;
+		}
+	}
+}

examples/styling/icons.xml

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8" ?>
-<dt-example table-type="html" order="5">
+<dt-example table-type="html" order="6">
 
 <css lib="datatables buttons font-awesome"/>
 <js lib="jquery datatables buttons jszip pdfmake vfsfonts buttons-html5">

examples/styling/semanticui.xml

@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<dt-example table-type="html" order="5" framework="semanticui">
+
+<css lib="datatables buttons"/>
+<js lib="jquery datatables buttons jszip pdfmake vfsfonts buttons-html5 buttons-print buttons-colvis">
+<![CDATA[
+
+$(document).ready(function() {
+	var table = $('#example').DataTable( {
+		lengthChange: false,
+		buttons: [ 'copy', 'excel', 'pdf', 'colvis' ]
+	} );
+
+	table.buttons().container()
+		.appendTo( $('div.eight.column:eq(0)', table.table().container()) );
+} );
+
+]]>
+</js>
+
+<title lib="Buttons">Semantic UI styling</title>
+
+<info><![CDATA[
+
+This example shows DataTables and the Buttons extension being used with the [Semantic UI](http://semantic-ui.com/) framework providing the styling. The DataTables / Semantic UI integration provides seamless integration for DataTables to be used in a Semantic UI page.
+
+Note that for ease of implementation, the `b-init buttons` option is specified with a basic set of buttons, and the `b-api buttons().container()` method then used to insert the buttons into the document. It is possible to use the `dt-init dom` option to insert the buttons like in the DataTables styled examples, but the default `dt-init dom` option used for Semantic UI styling is quite complex and would need to be fully restated.
+
+]]></info>
+
+</dt-example>
+

js/buttons.semanticui.js

@@ -0,0 +1,57 @@
+/*! Bootstrap integration for DataTables' Buttons
+ * ©2015 SpryMedia Ltd - datatables.net/license
+ */
+
+(function( factory ){
+	if ( typeof define === 'function' && define.amd ) {
+		// AMD
+		define( ['jquery', 'datatables.net-se', 'datatables.net-buttons'], function ( $ ) {
+			return factory( $, window, document );
+		} );
+	}
+	else if ( typeof exports === 'object' ) {
+		// CommonJS
+		module.exports = function (root, $) {
+			if ( ! root ) {
+				root = window;
+			}
+
+			if ( ! $ || ! $.fn.dataTable ) {
+				$ = require('datatables.net-se')(root, $).$;
+			}
+
+			if ( ! $.fn.dataTable.Buttons ) {
+				require('datatables.net-buttons')(root, $);
+			}
+
+			return factory( $, root, root.document );
+		};
+	}
+	else {
+		// Browser
+		factory( jQuery, window, document );
+	}
+}(function( $, window, document, undefined ) {
+'use strict';
+var DataTable = $.fn.dataTable;
+
+
+$.extend( true, DataTable.Buttons.defaults, {
+	dom: {
+		container: {
+			className: 'dt-buttons ui basic buttons'
+		},
+		button: {
+			tag: 'button',
+			className: 'ui button'
+		},
+		collection: {
+			tag: 'div',
+			className: 'dt-button-collection ui basic vertical buttons'
+		}
+	}
+} );
+
+
+return DataTable.Buttons;
+}));