yadcf plugin not working
yadcf plugin not working

Would appreciate any help. I am not able to see the filter fields in the header..
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Options - Cash Puts Selector for all Tickers</title>
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/dataTables.jqueryui.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.5.6/css/buttons.jqueryui.min.css"/>
<link rel="stylesheet" type="text/css" href="css/jquery.dataTables.yadcf.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedheader/3.1.2/css/fixedHeader.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="css/main.css"/>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<div class="container">
<h4 class="text-center">Options Table</h4>
<table class="display cell-border">
<thead>
<tr>
<th>Ticker</th>
<th>Score</th>
<th>Last Earnings</th>
<th>Next Earnings</th>
<th>Expiration</th>
<th>Days</th>
<th>Price</th>
<th>Target</th>
<th>Strike</th>
<th>Diff, %</th>
<th>ROR</th>
<th>Delta</th>
<th>Hi-Lo, %</th>
<th>Change %</th>
<th>Bid</th>
<th>Ask</th>
<th>Mid</th>
<th>Last</th>
<th>Vol.</th>
<th>Open Int.</th>
</tr>
</thead>
</table>
</div>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/dataTables.jqueryui.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.jqueryui.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.html5.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.print.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.colVis.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/fixedheader/3.1.5/js/dataTables.fixedHeader.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/yadcf/0.9.4/jquery.dataTables.yadcf.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded",
function(event){
$('.display').DataTable({
ajax:{url:"putoptions.csv",dataSrc:""},
"fixedHeader" : true,
"columns" : [
{"data" : "symbol"},
{"data" : "Score"},
{"data" : "Last_Earnings_Date"},
{"data" : "Next_Earnings_Date"},
{"data" : "Expiration_Date"},
{"data" : "Days_from_Expiration"},
{"data" : "stock_price"},
{"data" : "Analyst_Target"},
{"data" : "Strike_Price"},
{"data" : "Strike_Last_Price_Diff_Percent"},
{"data" : "ROR"},
{"data" : "Delta"},
{"data" : "Hi_Lo_Percentile"},
{"data" : "Today_change"},
{"data" : "Bid"},
{"data" : "Ask"},
{"data" : "Midpoint"},
{"data" : "Last_Price"},
{"data" : "Volume"},
{"data" : "Open_Interest"}
],
"autoWidths" : true,
"columnDefs": [
{ targets :[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18], className: 'dt-body-right'}
],
"order": [[ 11, "desc" ]],
"stripeClasses": ['strip1', 'strip2', 'strip3'],
"dom" : "Bfrtipl",
"buttons" : [
'copy', 'csv', 'excel', 'pdf', 'print', 'colvis'
]
}).yadcf([
{column_number: 0},
{column_number: 1},
{column_number: 2},
{column_number: 3},
{column_number: 4},
{column_number: 5},
{column_number: 6},
{column_number: 7},
{column_number: 8},
{column_number: 9},
{column_number: 10,
filter_type: "range_number"}
], 'footer');
});
</script>
</body>
</html>
This discussion has been closed.
Answers
Hi @spcdvh ,
YADCF is a third-party plugin, so would be worth posting the question on their site. That said, we're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.
Cheers,
Colin