Datatables Semantic UI styling

by vaibhav saxena

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.4/semantic.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.4/semantic.min.js"></script>
<script src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
<div class="ui main container" >
<p></p>
<div class="ui raised segment" > 
  <table id="example" class="ui compact selectable striped celled table" cellspacing="0" width="100%" >
  <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
 
  
 
        <tbody>
                <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
            </tr>
            <tr>
                <td>Ashton Cox</td>
                <td>Junior Technical Author</td>
                <td>San Francisco</td>
                <td>66</td>
                <td>2009/01/12</td>
                <td>$86,000</td>
            </tr>
            <tr>
                <td>Cedric Kelly</td>
                <td>Senior Javascript Developer</td>
                <td>Edinburgh</td>
                <td>22</td>
                <td>2012/03/29</td>
                <td>$433,060</td>
            </tr>
            <tr>
                <td>Airi Satou</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>33</td>
                <td>2008/11/28</td>
                <td>$162,700</td>
            </tr>
         ...

CSS

.ui.table.dataTable thead th {
  cursor: pointer;
  white-space: nowrap;
  border-left: 1px solid rgba(34, 36, 38, 0.15);
  color: rgba(0, 0, 0, 0.87);
}

.ui.table.dataTable thead th:first-child {
  border-left: none;
}

.ui.table.dataTable thead .sorting,
.ui.table.dataTable thead .sorting_asc ,
.ui.table.dataTable thead .sorting_desc ,
.ui.table.dataTable thead .sorting_asc_disabled ,
.ui.table.dataTable thead .sorting_desc_disabled,
.ui.table.dataTable thead .sorting:hover,
.ui.table.dataTable thead .sorting_asc:hover ,
.ui.table.dataTable thead .sorting_desc:hover ,
.ui.table.dataTable thead .sorting_asc_disabled:hover ,
.ui.table.dataTable thead .sorting_desc_disabled:hover  {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.ui.table.dataTable thead th:after {
  display: none;
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
  content: '';
  height: 1em;
  width: auto;
  opacity: 0.8;
  margin: 0em 0em 0em 0.5em;
  font-family: 'Icons';
}

.ui.table.dataTable thead th.sorting_asc:after {
  /*content: '\f0d8';*/
  content: '\f160';
}

.ui.table.dataTable thead th.sorting_desc:after {
  /*content: '\f0d7';*/
  content: '\f161';
}

.ui.table.dataTable thead th.sorting:after {
    content: '\f0dc';
    opacity: 0.2;
}

/* Hover */

.ui.table.dataTable th.disabled:hover {
  cursor: auto;
  color: rgba(40, 40, 40, 0.3);
}

.ui.table.dataTable thead th:hover {
  background: rgba(0, 0, 0, 0.05);
  color: rgba(0, 0, 0, 0.8);
}

/* Sorted */

.ui.table.dataTable thead .sorting_asc ,
.ui.table.dataTable thead .sorting_desc ,
.ui.table.dataTable thead .sorting_asc_disabled ,
.ui.table.dataTable thead .sorting_desc_disabled {
  background: rgba(0, 0, 0, 0.05);
  color: rgba(0, 0, 0, 0.95);
}

.ui.table.dataTable thead .sorting:after ,
.ui.table.dataTable thead .sorting_asc:after ,
.ui.table.dataTable thead .sorting_desc:after ,
.ui.table.dataTable thead .sorting_asc_disabled:after...

JavaScript

/*! DataTables Semantic integration
 */

/**
 * DataTables integration for Semantic UI. This requiresSemantic UI and
 * DataTables 1.10 or newer.
 *
 * This file sets the defaults and adds options to DataTables to style its
 * controls using Bootstrap. See http://datatables.net/manual/styling/
 * for further information.
 */
(function(window, document, undefined){

var factory = function( $, DataTable ) {
"use strict";

/* Set the defaults for DataTables initialisation */
$.extend( true, DataTable.defaults, {
	dom:
		"<'left aligned eight wide column'l><'right aligned eight wide column'f>" +
		"<'sixteen wide column'tr>" +
		"<'left aligned four wide column'i><'right aligned twelve wide column'p>",
	renderer: 'semantic'
} );

$.extend( DataTable.ext.pager, {
		full_numbers_icon: DataTable.ext.pager.full_numbers
});

/* Default class modification */
$.extend( DataTable.ext.classes, {
	sWrapper:      "ui grid dataTables_wrapper ",
	sFilterInput:  "",
	sLengthSelect: ""
} );

/* Bootstrap paging button renderer */
DataTable.ext.renderer.pageButton.semantic = function ( settings, host, idx, buttons, page, pages ) {
	var api     = new DataTable.Api( settings );
	var classes = settings.oClasses;
	var lang    = settings.oLanguage.oPaginate;
	var btnDisplay, btnClass, btnIcon, counter=0;
    var addIcons = (( !api.init().pagingType ? '' : api.init().pagingType.toLowerCase() ).indexOf('icon') !== -1 );
	
	var attach = function( container, buttons ) {
		var i, ien, node, button;
		var clickHandler = function ( e ) {
			e.preventDefault();
			if ( !$(e.currentTarget).hasClass('disabled') ) {
				api.page( e.data.action ).draw( 'page' );
			}
		};

		for ( i=0, ien=buttons.length ; i<ien ; i++ ) {
			button = buttons[i];

			if ( $.isArray( button ) ) {
				attach( container, button );
			}
			else {
				btnDisplay = '';
				btnClass = '';
                btnIcon = '';
				switch ( button ) {
					case 'ellipsis':
					    btnDisplay = ( addIcons  ? '<i class="mini ellipsis...