<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" />
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/css/jquery.dataTables.css" />
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/css/demo_table.css" />
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/css/demo_page.css" />
<link rel="stylesheet" href="icheck-blue.css">
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="page-header">
<h1>DataTables <small>Custom Sorting</small></h1>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<table class="table table-striped table-hover datatables" id="special">
<thead>
<tr>
<th>Name</th>
<th data-sorting-type="radio">Box</th>
<th data-sorting-type="radio">Type</th>
<th data-sorting-type="select">City</th>
<th data-sorting-type="checkbox">Warranty Lost?</th>
</tr>
</thead>
<tbody>
<!-- (tr>td{Item $$}+td>input[type=radio][name=box$$][value=1][checked]+label{1}+input[type=radio][name=box$$][value=2]+label{2}^td>input[type=radio][name=type$$][value=RmaU]+label{Rma-U}+input[type=radio][name=type$$][value=Screened][checked]+label{Screened}^td>select[name=city]>option[value=Sampa]{Sampa}+option[value=Aquiraz]{Aquiraz}^^td>input[type=checkbox][name="Warranty Lost"][value=true]+label{Has Warranty Lost})*15 -->
<tr>
<td>Item 01</td>
<td>
2
</td>
<td>
<input type="radio" name="type01" value="RmaU" />
<label>Rma-U</label>
<input type="radio" name="type01" value="Screened" checked="" />
<label>Screened</label>
</td>
<td>
<select name="city">
<option value="Sampa">Sampa</option>
<option value="Aquiraz">Aquiraz</option>
</select>
</td>
<td>
<input type="checkbox" name="Warranty Lost" value="true" />
<label>Has Warranty Lost</label>
</td>
</tr>
<tr>
<td>Item 02</td>
<td>
1
</td>
<td>
<input type="radio" name="type02" value="RmaU" />
<label>Rma-U</label>
<input type="radio" name="type02" value="Screened" checked="" />
<label>Screened</label>
</td>
<td>
<select name="city">
<option value="Sampa">Sampa</option>
<option value="Aquiraz">Aquiraz</option>
</select>
</td>
<td>
<input type="checkbox" name="Warranty Lost" value="true" />
<label>Has Warranty Lost</label>
</td>
</tr>
<tr>
<td>Item 03</td>
<td>
<input type="radio" name="box03" value="1" checked="" />
<label>1</label>
<input type="radio" name="box03" value="2" />
<label>2</label>
</td>
<td>
<input type="radio" name="type03" value="RmaU" />
<label>Rma-U</label>
<input type="radio" name="type03" value="Screened" checked="" />
<label>Screened</label>
</td>
<td>
<select name="city">
<option value="Sampa">Sampa</option>
<option value="Aquiraz">Aquiraz</option>
</select>
</td>
<td>
<input type="checkbox" name="Warranty Lost" value="true" />
<label>Has Warranty Lost</label>
</td>
</tr>
<tr>
<td>Item 04</td>
<td>
<input type="radio" name="box04" value="1" checked="" />
<label>1</label>
<input type="radio" name="box04" value="2" />
<label>2</label>
</td>
<td>
<input type="radio" name="type04" value="RmaU" />
<label>Rma-U</label>
<input type="radio" name="type04" value="Screened" checked="" />
<label>Screened</label>
</td>
<td>
<select name="city">
<option value="Sampa">Sampa</option>
<option value="Aquiraz">Aquiraz</option>
</select>
</td>
<td>
<input type="checkbox" name="Warranty Lost" value="true" />
<label>Has Warranty Lost</label>
</td>
</tr>
<tr>
<td>Item 05</td>
<td>
<input type="radio" name="box05" value="1" checked="" />
<label>1</label>
<input type="radio" name="box05" value="2" />
<label>2</label>
</td>
<td>
<input type="radio" name="type05" value="RmaU" />
<label>Rma-U</label>
<input type="radio" name="type05" value="Screened" checked="" />
<label>Screened</label>
</td>
<td>
<select name="city">
<option value="Sampa">Sampa</option>
<option value="Aquiraz">Aquiraz</option>
</select>
</td>
<td>
<input type="checkbox" name="Warranty Lost" value="true" />
<label>Has Warranty Lost</label>
</td>
</tr>
<tr>
<td>Item 06</td>
<td>
<input type="radio" name="box06" value="1" checked="" />
<label>1</label>
<input type="radio" name="box06" value="2" />
<label>2</label>
</td>
<td>
<input type="radio" name="type06" value="RmaU" />
<label>Rma-U</label>
<input type="radio" name="type06" value="Screened" checked="" />
<label>Screened</label>
</td>
<td>
<select name="city">
<option value="Sampa">Sampa</option>
<option value="Aquiraz">Aquiraz</option>
</select>
</td>
<td>
<input type="checkbox" name="Warranty Lost" value="true" />
<label>Has Warranty Lost</label>
</td>
</tr>
<tr>
<td>Item 07</td>
<td>
<input type="radio" name="box07" value="1" checked="" />
<label>1</label>
<input type="radio" name="box07" value="2" />
<label>2</label>
</td>
<td>
<input type="radio" name="type07" value="RmaU" />
<label>Rma-U</label>
<input type="radio" name="type07" value="Screened" checked="" />
<label>Screened</label>
</td>
<td>
<select name="city">
<option value="Sampa">Sampa</option>
<option value="Aquiraz">Aquiraz</option>
</select>
</td>
<td>
<input type="checkbox" name="Warranty Lost" value="true" />
<label>Has Warranty Lost</label>
</td>
</tr>
<tr>
<td>Item 08</td>
<td>
<input type="radio" name="box08" value="1" checked="" />
<label>1</label>
<input type="radio" name="box08" value="2" />
<label>2</label>
</td>
<td>
<input type="radio" name="type08" value="RmaU" />
<label>Rma-U</label>
<input type="radio" name="type08" value="Screened" checked="" />
<label>Screened</label>
</td>
<td>
<select name="city">
<option value="Sampa">Sampa</option>
<option value="Aquiraz">Aquiraz</option>
</select>
</td>
<td>
<input type="checkbox" name="Warranty Lost" value="true" />
<label>Has Warranty Lost</label>
</td>
</tr>
<tr>
<td>Item 09</td>
<td>
<input type="radio" name="box09" value="1" checked="" />
<label>1</label>
<input type="radio" name="box09" value="2" />
<label>2</label>
</td>
<td>
<input type="radio" name="type09" value="RmaU" />
<label>Rma-U</label>
<input type="radio" name="type09" value="Screened" checked="" />
<label>Screened</label>
</td>
<td>
<select name="city">
<option value="Sampa">Sampa</option>
<option value="Aquiraz">Aquiraz</option>
</select>
</td>
<td>
<input type="checkbox" name="Warranty Lost" value="true" />
<label>Has Warranty Lost</label>
</td>
</tr>
<tr>
<td>Item 10</td>
<td>
<input type="radio" name="box10" value="1" checked="" />
<label>1</label>
<input type="radio" name="box10" value="2" />
<label>2</label>
</td>
<td>
<input type="radio" name="type10" value="RmaU" />
<label>Rma-U</label>
<input type="radio" name="type10" value="Screened" checked="" />
<label>Screened</label>
</td>
<td>
<select name="city">
<option value="Sampa">Sampa</option>
<option value="Aquiraz">Aquiraz</option>
</select>
</td>
<td>
<input type="checkbox" name="Warranty Lost" value="true" />
<label>Has Warranty Lost</label>
</td>
</tr>
<tr>
<td>Item 11</td>
<td>
<input type="radio" name="box11" value="1" checked="" />
<label>1</label>
<input type="radio" name="box11" value="2" />
<label>2</label>
</td>
<td>
<input type="radio" name="type11" value="RmaU" />
<label>Rma-U</label>
<input type="radio" name="type11" value="Screened" checked="" />
<label>Screened</label>
</td>
<td>
<select name="city">
<option value="Sampa">Sampa</option>
<option value="Aquiraz">Aquiraz</option>
</select>
</td>
<td>
<input type="checkbox" name="Warranty Lost" value="true" />
<label>Has Warranty Lost</label>
</td>
</tr>
<tr>
<td>Item 12</td>
<td>
<input type="radio" name="box12" value="1" checked="" />
<label>1</label>
<input type="radio" name="box12" value="2" />
<label>2</label>
</td>
<td>
<input type="radio" name="type12" value="RmaU" />
<label>Rma-U</label>
<input type="radio" name="type12" value="Screened" checked="" />
<label>Screened</label>
</td>
<td>
<select name="city">
<option value="Sampa">Sampa</option>
<option value="Aquiraz">Aquiraz</option>
</select>
</td>
<td>
<input type="checkbox" name="Warranty Lost" value="true" />
<label>Has Warranty Lost</label>
</td>
</tr>
<tr>
<td>Item 13</td>
<td>
<input type="radio" name="box13" value="1" checked="" />
<label>1</label>
<input type="radio" name="box13" value="2" />
<label>2</label>
</td>
<td>
<input type="radio" name="type13" value="RmaU" />
<label>Rma-U</label>
<input type="radio" name="type13" value="Screened" checked="" />
<label>Screened</label>
</td>
<td>
<select name="city">
<option value="Sampa">Sampa</option>
<option value="Aquiraz">Aquiraz</option>
</select>
</td>
<td>
<input type="checkbox" name="Warranty Lost" value="true" />
<label>Has Warranty Lost</label>
</td>
</tr>
<tr>
<td>Item 14</td>
<td>
<input type="radio" name="box14" value="1" checked="" />
<label>1</label>
<input type="radio" name="box14" value="2" />
<label>2</label>
</td>
<td>
<input type="radio" name="type14" value="RmaU" />
<label>Rma-U</label>
<input type="radio" name="type14" value="Screened" checked="" />
<label>Screened</label>
</td>
<td>
<select name="city">
<option value="Sampa">Sampa</option>
<option value="Aquiraz">Aquiraz</option>
</select>
</td>
<td>
<input type="checkbox" name="Warranty Lost" value="true" />
<label>Has Warranty Lost</label>
</td>
</tr>
<tr>
<td>Item 15</td>
<td>
<input type="radio" name="box15" value="1" checked="" />
<label>1</label>
<input type="radio" name="box15" value="2" />
<label>2</label>
</td>
<td>
<input type="radio" name="type15" value="RmaU" />
<label>Rma-U</label>
<input type="radio" name="type15" value="Screened" checked="" />
<label>Screened</label>
</td>
<td>
<select name="city">
<option value="Sampa">Sampa</option>
<option value="Aquiraz">Aquiraz</option>
</select>
</td>
<td>
<input type="checkbox" name="Warranty Lost" value="true" />
<label>Has Warranty Lost</label>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- libs -->
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.1/icheck.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/jquery.dataTables.js"></script>
<!-- <script data-require="bootstrap@*" data-semver="3.2.0" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.js"></script> -->
<!-- app -->
<script src="dataTables.sorting.js"></script>
<script src="dataTables.factory.js"></script>
<script src="script.js"></script>
</body>
</html>
$(function () {
'use strict';
$('[type=checkbox], [type=radio]').iCheck({
checkboxClass: 'icheckbox_flat-blue',
radioClass: 'iradio_flat-blue'
});
dataTablesFactory
// .selector('#special')
// .setup({
// "sPaginationType": "full_numbers"
// })
.instantiate();
});
table.dataTable tr.odd {
background-color: #eeeeee;
}
table.dataTable tr.odd td.sorting_1 {
background-color: #f9f9f9;
}
table.dataTable tr.even td.sorting_1 {
background-color: transparent;
}
.table-hover > tbody > tr:hover > td, .table-hover > tbody > tr:hover > th {
background-color: #f5f5f5 !important;
}
var dataTablesFactory = function() {
var _selector = 'table.datatables';
var _config = {
'bInfo': false,
'bFilter': false,
'bLengthChange': false
};
var _api = {
selector: selector,
setup: setup,
instantiate: instantiate
};
return _api;
///////////
function instantiate () {
var table = $(_selector);
configureDataSortTypes(table);
return table.dataTable(_config);
}
function setup(config) {
_config = $.extend({}, _config, config);
return _api;
}
function selector(jQuerySelector) {
_selector = jQuerySelector;
return _api;
}
function configureDataSortTypes(table) {
var headers = table.find('thead th');
var sortingConfig = {
aoColumns: []
};
headers.each(function (index, element) {
var sortingType = $(element).data().sortingType;
sortingConfig.aoColumns.push({ "sSortDataType": sortingType });
});
_config = $.extend({}, _config, sortingConfig);
}
}();
$.fn.dataTableExt.afnSortData['checkbox'] = function(oSettings, iColumn, iVisColumn) {
var trs = oSettings.oApi._fnGetTrNodes(oSettings);
return $.map(trs, function(tr, i) {
return $('td:eq(' + iVisColumn + ') input', tr).is(':checked') ? "0" : "1";
});
};
$.fn.dataTableExt.afnSortData['radio'] = function(oSettings, iColumn, iVisColumn) {
var trs = oSettings.oApi._fnGetTrNodes(oSettings);
return $.map(trs, function(tr, i) {
var _thisCell = $(tr).find('td:eq(' + iVisColumn + ')');
var hasRadiobuttonOnCell = !!_thisCell.find('input[type=radio]').length;
if (hasRadiobuttonOnCell) {
return parseInt(_thisCell.find('input:checked').val(), 10);
} else {
_thisCell.children().remove();
var plainTextToOrder = parseInt(_thisCell.text(), 10);
return plainTextToOrder;
}
});
};
$.fn.dataTableExt.afnSortData['select'] = function(oSettings, iColumn, iVisColumn) {
var trs = oSettings.oApi._fnGetTrNodes(oSettings);
return $.map(trs, function(tr, i) {
return $('td:eq(' + iVisColumn + ') select', tr).val();
});
};
// $.fn.dataTableExt.afnSortData['radio'] = function (oSettings, iColumn) {
// var data = [];
// debugger;
// $(oSettings.oApi._fnGetTrNodes(oSettings)).find('td:eq(' + iColumn + ') input:checked').each(function (index, element) {
// debugger;
// data.push($(element).val());
// });
// return data;
// };
// $.fn.dataTableExt.afnSortData['select'] = function (oSettings, iColumn) {
// var data = [];
// debugger;
// $(oSettings.oApi._fnGetTrNodes(oSettings)).find('td:eq(' + iColumn + ') select').each(function (index, element) {
// debugger;
// data.push($(element).val());
// });
// return data;
// };
// $.fn.dataTableExt.afnSortData['select'] = function(oSettings, iColumn) {
// var data = [];
// $(oSettings.oApi._fnGetTrNodes(oSettings)).find('td:eq(' + iColumn + ') select').each(function(index, element) {
// data.push($(element).val());
// });
// return data;
// };
/* iCheck plugin Flat skin, blue
----------------------------------- */
.icheckbox_flat-blue,
.iradio_flat-blue {
display: inline-block;
*display: inline;
vertical-align: middle;
margin: 0;
padding: 0;
width: 20px;
height: 20px;
background: url(https://raw.githubusercontent.com/fronteed/iCheck/1.x/skins/flat/blue.png) no-repeat;
border: none;
cursor: pointer;
}
.icheckbox_flat-blue {
background-position: 0 0;
}
.icheckbox_flat-blue.checked {
background-position: -22px 0;
}
.icheckbox_flat-blue.disabled {
background-position: -44px 0;
cursor: default;
}
.icheckbox_flat-blue.checked.disabled {
background-position: -66px 0;
}
.iradio_flat-blue {
background-position: -88px 0;
}
.iradio_flat-blue.checked {
background-position: -110px 0;
}
.iradio_flat-blue.disabled {
background-position: -132px 0;
cursor: default;
}
.iradio_flat-blue.checked.disabled {
background-position: -154px 0;
}
/* HiDPI support */
@media (-o-min-device-pixel-ratio: 5/4), (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) {
.icheckbox_flat-blue,
.iradio_flat-blue {
background-image: url(https://raw.githubusercontent.com/fronteed/iCheck/1.x/skins/flat/blue@2x.png);
-webkit-background-size: 176px 22px;
background-size: 176px 22px;
}
}