SCRIPT438 error yadcf

Question

I'm just testing yadcf but I keep getting SCRIPT438 error in IE (in ff it is TypeError: $(...).DataTable(...).yadcf is not a function)

and I'm quite sure my libraries are on the right place, I can browse them using developer tools

What am I doing wrong ?

using version 0.9.2

this is my example:

<html>
<head>
<LINK href="DataTables-1.10.11/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css">
<LINK href="yadcf-0.9.2/jquery.dataTables.yadcf.css" rel="stylesheet" type="text/css">

<SCRIPT SRC=jquery-1.11.3.min.js TYPE=text/javascript></SCRIPT>
<SCRIPT SRC=DataTables-1.10.11/js/jquery.dataTables.min.js TYPE=text/javascript></SCRIPT>
<SCRIPT SRC=yadcf-0.9.2/jquery.dataTables.yadcf.js TYPE=text/javascript></SCRIPT>


    <script>
 $(document).ready( function () {
 // alert("press format data");

      $('#ResTbl').DataTable({
 "columnDefs": [
       
            {
                "targets": [ 0 ],
              //  "visible": false,
     "orderable": false ,
                "searchable": false
            } 
   ]
 
 }).yadcf( [
 {column_number : 2, filter_type: "range_number_slider"} ,
    //  {column_number : 0, data: ["MOD", "CON"], filter_default_label: "..."}, 
      {column_number: 1, filter_type: "auto_complete",  text_data_delimiter: ","  }
]);

} );


</script>

</head>
<body>

<table id="ResTbl" class="compact">
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Row 1 Data 1</td>
            <td>Row 1 Data 2</td>
            <td>1</td>
        </tr>
        <tr>
            <td>Row 2 Data 1</td>
            <td>Row 2 Data 2</td>
            <td>2</td>
        </tr>
        <tr>
            <td>Row 3 Data 1</td>
            <td>Row 3 Data 2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>Row 4 Data 1</td>
            <td>Row 4 Data 2</td>
            <td>4</td>
        </tr>
        <tr>
            <td>Row 5 Data 1</td>
            <td>Row 5 Data 2</td>
            <td>5</td>
        </tr>
        <tr>
            <td>Row 6 Data 1</td>
            <td>Row 6 Data 2</td>
            <td>6</td>
        </tr>
        <tr>
            <td>Row 7 Data 1</td>
            <td>Row 7 Data 2</td>
            <td>7</td>
        </tr>
        <tr>
            <td>Row 8 Data 1</td>
            <td>Row 8 Data 2</td>
            <td>8</td>
        </tr>
        <tr>
            <td>Row 9 Data 1</td>
            <td>Row 9 Data 2</td>
            <td>9</td>
        </tr>
        <tr>
            <td>Row 10 Data 1</td>
            <td>Row 10 Data 2</td>
            <td>10</td>
        </tr>
        <tr>
            <td>Row 11 Data 1</td>
            <td>Row 11 Data 2</td>
            <td>11</td>
        </tr>
        <tr>
            <td>Row 12 Data 1</td>
            <td>Row 12 Data 2</td>
            <td>12</td>
        </tr>

  
    </tbody>
</table>


</body>
</html>

What am i doin wrong ?

score 0 · Accepted Answer · answered Feb 19 '18 at 12:27

0

You are using new Datatables api with old yadcf api

From the showcase:

note that this is the old yadcf API for init the filters new init function should be used when working with new Datatable (capital "D" API) for new init function see: DOM_Ajax_Multiple_1.10.html

When you constructing the dataables using the "Capital letter D" it returns an object (which is not a jquery object) therefor you must use the yadcf.init() function to inityadcf upon it, like that:

var oTable = $('#example').DataTable();
yadcf.init(oTable, [{column_number: 0}]);

Anyway go over the docs (inside the yadcf js file) to learn about all yadcf goodies...

answered Feb 19 '18 at 12:27

Daniel

36,833
10
119
200

Thanks , i wasnt aware off the difference. Is there any reason whe the "range_number_slider" and "auto_complete" are not working in my example ? I just copied them from you example page. yadcf.init(oTable, [{column_number: 0 } , {column_number: 2, filter_type: "range_number_slider"} ,{column_number: 1,filter_type: "auto_complete",text_data_delimiter: "," }]); – mollekemiel Feb 19 '18 at 15:18
when using a filter that requires a third party plugin you must inlcude it in your html, those two filter types require you to add jquery ui auto complete and jquery ui slider... – Daniel Feb 19 '18 at 16:10

SCRIPT438 error yadcf

1 Answers1