YADCF Error
Why is yadcf not defined?
HTML
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css">
<script src="//cdn.datatables.net/colreorder/1.1.3/js/dataTables.colReorder.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/colreorder/1.1.3/css/dataTables.colReorder.css">
<script src="//cdn.datatables.net/colvis/1.1.2/js/dataTables.colVis.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/colvis/1.1.2/css/dataTables.colVis.css">
<script src="https://rawgit.com/vedmack/yadcf/218b6071bcdc216e6e8cc617dedf436035c2a821/beta/jquery.dataTables.yadcf.js"></script>
<link rel="stylesheet" href="https://rawgit.com/vedmack/yadcf/9a1f5fefc84836696bda6fc736473b4e83ee3c8e/beta/jquery.dataTables.yadcf.css">
<table id="test">
<thead>
<tr>
<th>Name</th>
<th>Group</th>
<th>Status</th>
<th>Rating</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="#">Test 1</a></td>
<td>Apparel</td>
<td>Pending</td>
<td>2.4</td>
</tr>
<tr>
<td><a href="#">Test 2</a></td>
<td>Accessories</td>
<td>Current</td>
<td>1.8</td>
</tr>
<tr>
<td><a href="#">Test 3</a></td>
<td>Footwear</td>
<td>Pending</td>
<td>4.8</td>
</tr>
</tbody>
<tfoot>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
</tfoot>
</table>
CSS
.hide {
display: none;
}
.inuse, .ui-slider-range .inuse, .yadcf-filter-range-number-slider .inuse {
background: #8BBEF0;
}
.yadcf-filter-reset-button {
display: inline-block;
}
.yadcf-filter-reset-button.range-number-slider-reset-button{
position: relative;
top: -6px;
}
.yadcf-filter {
padding-right: 4px;
padding-left: 4px;
padding-bottom: 3px;
padding-top: 3px;
}
.yadcf-filter > option{
background: white;
}
.ui-autocomplete .ui-menu-item {
font-size:13px;
}
#ui-datepicker-div {
font-size:13px;
}
.yadcf-filter-wrapper {
display: inline-block;
white-space: nowrap;
margin-left: 2px;
}
.yadcf-filter-range-number {
width: 40px;
}
.yadcf-filter-range-number-seperator {
margin-left: 10px;
margin-right: 10px;
}
.yadcf-filter-range-date {
width: 80px;
}
.yadcf-filter-range-date-seperator {
margin-left: 10px;
margin-right: 10px;
}
.yadcf-filter-wrapper-inner {
display: inline-block;
border: 1px solid #ABADB3;
padding-left: 2px;
padding-right: 2px;
}
.yadcf-number-slider-filter-wrapper-inner {
display: inline-block;
width: 200px;
margin-bottom: 7px;
}
.yadcf-filter-range-number-slider .ui-slider-handle {
width: 10px;
height: 10px;
margin-top: 1px;
}
.yadcf-filter-range-number-slider .ui-slider-range {
position: relative;
height: 5px;
}
.yadcf-filter-range-number-slider {
height: 5px;
margin-left: 6px;
margin-right: 6px;
}
.yadcf-filter-range-number-slider {
overflow: visible;
}
.yadcf-number-slider-filter-wrapper-inner .yadcf-filter-range-number-slider-min-tip {
font-size: 13px;
font-weight: normal;
position: absolute;
outline-style: none;
}
.yadcf-number-slider-filter-wrapper-inner .yadcf-filter-range-number-slider-max-tip {
font-size: 13px;
font-weight: normal;
position:absolute;
outline-style: none;
}
.yadcf-number-slider-filter-wrapper-inner .yadcf-filter-range-number-slider-min-tip-inner {
position:absolute;
top: 11px;
}
.yadcf-number-slider-filter-wrapper-inner...
JavaScript
var oTable;
$(document).ready(function () {
'use strict';
oTable = $('#test').DataTable({
'retrieve': true,
'paging': true, // Table pagination
'ordering': true, // Column ordering
'info': true, // Bottom left status text
'bAutoWidth': true, // Bottom left status text
"bJQueryUI": true,
"dom": 'lrtip',
"oLanguage": {
sLengthMenu: '_MENU_ records per page',
info: 'Showing page _PAGE_ of _PAGES_',
zeroRecords: 'Nothing found - sorry',
infoEmpty: 'No results available',
infoFiltered: '(filtered from _MAX_ total records)'
},
"deferRender": true
});
yadcf.init(oTable, [{
column_number: 0,
column_data_type: "html",
filter_type: "multi_select"
},{
column_number: 1,
filter_type: "multi_select"
}], "footer");
});