Being new to this, I'm feeling a little confused with sorting through all of the different information on 1.9 and 1.10.
Can someone tell me if this is a correct format for using DataTables 1.10 and YADCF? My goal is to set up filters for some invisible columns at another location on the page. All of the examples that I see are using dataTables, not DataTables but I don't know if that's right since that would just be using the jQuery dataTables, correct?
All that I'm asking right now is if this looks right or if it needs to be done some entirely different way. I'll set up a jsFiddle once I know I'm on the right track.
-- Doug
LAYOUT
<head>
<!-- head stuff -->
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.0/css/jquery.dataTables.css">
<link rel="stylesheet" href="~/Content/Package/yadcf-0.8.0/jquery.dataTables.yadcf.css" />
<script src="//code.jquery.com/jquery-1.11.0.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.js"></script>
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.0/js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf8" src="~/Content/Package/yadcf-0.8.0/jquery.dataTables.yadcf.js"></script>
<script> type="text/javascript">
$(document).ready(
function(){
$('#courseList').DataTable({
"columnDefs": [
{ "targets" [4], "visible": false, "searchable": false },
{ "targets" [5], "visible": false },
{ "targets" [6], "visible": false },
{ "targets" [7], "visible": false },
{ "targets" [8], "visible": false },
{ "targets" [9], "visible": false },
],
"bJQueryUI": true
}).yadcf([
{ column_number: 5, filter_type: "range_number", filter_container_id: "filter_totalHours" },
{ column_number: 6, filter_type: "range_number", filter_container_id: "filter_tuition" },
{ column_number: 7, filter_container_id: "filter_deliveryMode", filter_default_label: "Select Mode" },
{ column_number: 9, filter_container_id: "filter_monthYear", filter_default_label: "Select Month" }
]);
}
);
</script>
<!-- other head stuff -->
</head>
<body>
<!-- body stuff -->
<table id="courseList" class="offertable">
<thead>
<tr>
<th>Program ID</th>
<th>Course ID</th>
<th>Offering</th>
<th>Details</th>
<th>Offering Type</th>
<th>Total Hours</th>
<th>Tuition</th>
<th>Delivery Mode</th>
<th>Fee Basis</th>
<th>MonthYear</th>
</tr>
</thead>
<tbody>
<tr>
<td>EIPR21-EIPR21</td>
<td></td>
<td>
<h5>
<a href=/registration/program/1024/EIPR21-EIPR21/evidence-informed-practice-program>
Evidence Informed Practice Program
</a>
</h5>
<br />
<p>
Short description for Evidence Informed Practice
</p>
<br />
</td>
<td>
1/31/2013 <br />
12.00 hrs <br />
WEB <br />
$300.00
</td>
<td>program</td>
<td>12.00</td>
<td>300.00</td>
<td>WEB</td>
<td>P</td>
<td>2013/01</td>
</tr>
<tr>
<td>DIP-PEDS-2013FA</td>
<td></td>
<td>
<h5>
<a href=/registration/program/1082/DIP-PEDS-2013FA/your-friendly-name-here>
Chiropractic Pediatric Certification Program with ICPA
</a>
</h5>
<br />
<p>
</p>
<br />
</td>
<td>
9/28/2013 <br />
CLASSROOM <br />
</td>
<td>program</td>
<td>0.00</td>
<td>0.00</td>
<td>CLASSROOM</td>
<td>S</td>
<td>2013/09</td>
</tr>
<tr>
<td>
TEST2014-2014SU
</td>
<td>
</td>
<td>
<h5>
<a href=/registration/program/1185/TEST2014-2014SU/your-friendly-name-here>
Testing the Agresso 5.6.3 Enviroment 101
</a>
</h5>
<br />
<p>
</p>
<br />
</td>
<td>
6/5/2014 <br />
CLASSROOM <br />
</td>
<td>program</td>
<td>0.00</td>
<td>0.00</td>
<td>CLASSROOM</td>
<td>S</td>
<td>2014/06</td>
</tr>
<!-- More table rows -->
</tbody>
</table>
<!-- More body stuff -->
</body>