Is this the right format for Yet Another DataTables Column Filter and DataTables 1.10?
Is this the right format for Yet Another DataTables Column Filter and DataTables 1.10?
dwmosman
Posts: 4Questions: 2Answers: 0
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>
This question has accepted answers - jump to:
This discussion has been closed.
Answers
Currently in order to activate the yadcf on datatables 1.10 you should use $('#courseList').dataTable.... (with lower case "d") I will ask @allan on how can I activate my yadcf plugin (which is a jquery plugin) when using the new api / syntax with the capital "D"
and anyway note that in datatables 1.10 there is no more use of the Hungarian notation (b for boolean in bJQueryUI) . instead its a camelCase now , so take a look at the properties new names...
Thank you daniel_r, thats a big help. Its working now. This is a great plug-in. I now have my filter options embedded in a menu running down the left side of the page and its looking really nice.
FWIW, here's the final version of my code (so far). I left off the jQueryUI option because the page is already full of CSS rules (not mine) and it wasn't making it better.
Ok, cool,
In order to use the new API with the capital "D" you can keep an eye on the yadcf future releases on github https://github.com/vedmack/yadcf