我在哪里可以在当前代码中实现YADCF

Question

我不知道在哪里使用我当前的代码实现YADCF。

我尝试在DataTables实现结束时使用.yadcf（）。我并不准确地说它在哪里。

注意：我确实在未粘贴的代码段中加载了库。

这是我的代码

<cfoutput>
        <div class="flexbox-container">

            <div class="main-content clearfix">
                <div class="container">
                    <form action="" method="post">
                        <label for="startDate">Date Range: </label>
                        <input type="text" id="startDate" name="startDate" class="button" value="#structKeyExists(form, "startDate") ? form.startDate : DateFormat(Now(),'mm/dd/yyyy') #">
                        <label for="endDate">to</label>
                        <input type="text" id="endDate" name="endDate" class="button" value="#structKeyExists(form, "endDate") ? form.endDate : DateFormat(DateAdd('m',1,Now()),'mm/dd/yyyy') #">
                        <input type="submit" id="btnFilter" value="Filter" class="button">
                    </form>
                    <br><br>
                    <button id="platinum" class="button">Show Platinum Customers</button>
                    <button id="nonplatinum" class="button">Show Non-Platinum Customers</button>
                    <button id="all" class="button">Show All</button>

                    <br><br>
                    <table id="report" class="display" cellspacing="0" width="100%">
                        <thead>
                                <th align="left">Order Number</th>
                                <th align="left">VendorID</th>
                                <th align="left">User Index</th>
                                <th align="left">Customer Type</th>
                                <th align="left">Date</th>
                                <th align="left">## of items cancelled</th>
                                <th align="left">Total$</th>
                                <th align="left">Canceled By</th>
                                <th align="left">Reason</th>
                            </tr>
                        </thead>
                        <tfoot>
                            <tr>
                                <th colspan="5" style="text-align:right">Total:</th>
                                <th style="text-align:left"></th>
                                <th colspan="2" style="text-align:left"></th>
                                <th></th>


                            </tr>
                        </tfoot>
                        <tbody>
                            <cfloop query="local.getCancellationReportData">
                                <tr data-isPlatinum="#is_platinum#">
                                    <td>#order_number#</td>
                                    <td>#len(vendorID) ? vendorID: 'unknown'#</td>
                                    <td>#len(dbo_tblEmployee_ID) ? dbo_tblEmployee_ID: 'unknown'#</td>
                                    <td>#customerType#</td>
                                    <td>#DateFormat(date,'mm/dd/yyyy')# #timeFormat(date,'hh:mm TT')#</td>
                                    <td>#qty#</td>
                                    <td align="right">#DollarFOrmat(ExtendedCost)#</td>
                                    <td>#cancelledBy#</td>
                                    <td>#cancellation_reason#</td>

                                </tr>
                            </cfloop>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </cfoutput>


    <script>


            $(document).ready(function() {
                var table = $('#report').DataTable( {
                    dom: 'Bfrtip',
                    buttons: [
                        {extend :'excel', text:'Export to Excel'}
                       ,{extend :'pdf'  , text:'Export to PDF', orientation: 'landscape', pageSize: 'LEGAL'}
                        ,'print'
                    ],

                    "footerCallback": function ( row, data, start, end, display ) {
                                var api = this.api(), data;

                                // Remove the formatting to get integer data for summation
                                var intVal = function ( i ) {
                                    return typeof i === 'string' ?
                                        i.replace(/[\$,]/g, '')*1 :
                                        typeof i === 'number' ?
                                            i : 0;
                                };

                                // Total over all pages
                                total = api
                                    .column( 6 )
                                    .data()
                                    .reduce( function (a, b) {
                                        return intVal(intVal(a) + intVal(b)).toFixed(2);
                                    } );

                                // Total over this page
                                pageTotal = api
                                    .column( 6, { page: 'current'} )
                                    .data()
                                    .reduce( function (a, b) {
                                        return intVal(intVal(a) + intVal(b)).toFixed(2);
                                    }, 0 );

                                // Total over all pages
                                cantotal = api
                                    .column( 5 )
                                    .data()
                                    .reduce( function (a, b) {
                                        return intVal(intVal(a) + intVal(b));
                                    } );

                                // Total over this page
                                canpageTotal = api
                                    .column( 5, { page: 'current'} )
                                    .data()
                                    .reduce( function (a, b) {
                                        return intVal(intVal(a) + intVal(b));
                                    }, 0 );



                                // Update footer
                                $( api.column( 6 ).footer() ).html(
                                    '$'+pageTotal +' ( $'+ total +' total )'
                                );
                                 // Update footer
                                $( api.column( 5 ).footer() ).html(
                                    ''+canpageTotal +' ( out of '+ cantotal +')'
                                );
                            }






                });

                $("#platinum").click(function() {
                     $.fn.dataTable.ext.search.pop();
                    table.draw();
                    $.fn.dataTable.ext.search.push(
                      function(settings, data, dataIndex) {
                          return $(table.row(dataIndex).node()).attr('data-isPlatinum') == 1;
                        }
                    );
                    table.draw();
                });

                $("#nonplatinum").click(function() {
                    $.fn.dataTable.ext.search.pop();
                    table.draw();
                    $.fn.dataTable.ext.search.push(
                      function(settings, data, dataIndex) {
                          return $(table.row(dataIndex).node()).attr('data-isPlatinum') == 0;
                        }
                    );
                    table.draw();
                });

                $("#all").click(function() {
                    $.fn.dataTable.ext.search.pop();
                    table.draw();
                });

                $('.button').button();

                var dateFormat = "mm/dd/yy",
                  from = $( "#startDate" )
                    .datepicker({
                      defaultDate: "+1w",
                      changeMonth: true,
                      numberOfMonths: 3
                    })
                    .on( "change", function() {
                      to.datepicker( "option", "minDate", getDate( this ) );
                    }),
                  to = $( "#endDate" ).datepicker({
                    defaultDate: "+1w",
                    changeMonth: true,
                    numberOfMonths: 3
                  })
                  .on( "change", function() {
                    from.datepicker( "option", "maxDate", getDate( this ) );
                  });

                function getDate( element ) {
                  var date;
                  try {
                    date = $.datepicker.parseDate( dateFormat, element.value );
                  } catch( error ) {
                    date = null;
                  }

                  return date;
                }
            });

    </script>