Uncaught TypeError: Cannot read property 'ext' of undefined '

SandeepMurala · January 2020

Hi ,
I am new to dataTable concept i am trying to search particuler date column between two dates ,here I am taking reference from this page https://datatables.net/examples/plug-ins/range_filtering.html but i am getting this error 'Uncaught TypeError: Cannot read property 'ext' of undefined ' .
I was searching this page 'https://datatables.net/forums/discussion/31476/uncaught-typeerror-cannot-read-property-ext-of-undefined' but i am not getting solution .

Here is my javascript code:

$.fn.dataTable.ext.search.push(
    function( settings, data, dataIndex ) {
        var min = parseInt( $('#min').val(), 10 );
        var max = parseInt( $('#max').val(), 10 );
        var age = parseFloat( data[3] ) || 0; // use data for the age column
 
        if ( ( isNaN( min ) && isNaN( max ) ) ||
             ( isNaN( min ) && age <= max ) ||
             ( min <= age   && isNaN( max ) ) ||
             ( min <= age   && age <= max ) )
        {
            return true;
        }
        return false;
    }
);
 
$(document).ready(function() {
    var table = $('#example').DataTable();
     
    // Event listener to the two range filtering inputs to redraw on input
    $('#min, #max').keyup( function() {
        alert("test");
        table.draw();
    } );
} )
 ```

My HTML code:

Minimum age:

Maximum age:

        <div class="table-responsive">
            <div>
                <table id="example" class="display" style="width:100%">
                    <thead>
                        <tr>
                            <th>col 1</th>
                            <th>col 2</th>
                            <th>col 3</th>
                            <th>AGE</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>data 11</td>
                            <td>data 12</td>
                            <td>data 13</td>
                            <td>24</td>
                        </tr>
                        <tr>
                            <td>data 21</td>
                            <td>data 22</td>
                            <td>data 23</td>
                            <td>52</td>
                        </tr>
                        <tr>
                            <td>data 31</td>
                            <td>data 32</td>
                            <td>data 33</td>
                            <td>33</td>
                        </tr>
                    </tbody>
                </table>

```

Thanks

colin · January 2020

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

SandeepMurala · January 2020

Hi @colin thanks for your valueble response ,i have taken reference from this page https://datatables.net/examples/plug-ins/range_filtering.html .In that page they had used age filter to age column .In my requirement i need to filter date column instead of age .
To date column I have two input fields like start_date ,end_date and one submit button if i click the submit button date column should filter based on my start_date and end_date.

This is my javascript code ;

$.fn.dataTable.ext.search.push(
    function( settings, data, dataIndex ) {
        var min = parseInt( $('#min').val(), 10 );
        var max = parseInt( $('#max').val(), 10 );
        var age = parseFloat( data[3] ) || 0; // use data for the age column
  
        if ( ( isNaN( min ) && isNaN( max ) ) ||
             ( isNaN( min ) && age <= max ) ||
             ( min <= age   && isNaN( max ) ) ||
             ( min <= age   && age <= max ) )
        {
            return true;
        }
        return false;
    }
);
  
$(document).ready(function() {
    var table = $('#example').DataTable();
      
    // Event listener to the two range filtering inputs to redraw on input
    $('#min, #max').keyup( function() {
        alert("test");
        table.draw();
    } );
} )

when I was trying this js code i am getting this error 'Uncaught TypeError: Cannot read property 'ext ' of undefined '.

remaining HTML and database related things i have taken form this page ,kinldy check once https://datatables.net/examples/data_sources/server_side.html same code i am using

Please help me

colin · January 2020

Yep, in the page it links to, it's working, so it's something in your code. Please create a test case, as requested, so we can diagnose your issue.

Colin

SandeepMurala · January 2020

Thanks for your response @colin ,please check my code

here my js code:

//$(document).ready( function(){
    $(document).ready(function() {
//$(function() {
    
  var oTable = $('#example').DataTable({
    "oLanguage": {
      "sSearch": "Filter Data"
    },
    "iDisplayLength": -1,
    "sPaginationType": "full_numbers",

  });




  $("#datepicker_from").datepicker({
      dateFormat: 'yy-mm-dd',
    showOn: "button",
    buttonImage: "assets/images/cal.gif",
    buttonImageOnly: false,
    "onSelect": function(date) {
      minDateFilter = new Date(date).getTime();
      oTable.draw();
    }
  }).keyup(function() {
    minDateFilter = new Date(this.value).getTime();
    oTable.draw();
    //alert(minDateFilter);
  });

  $("#datepicker_to").datepicker({
      dateFormat: 'yy-mm-dd',
    showOn: "button",
    buttonImage: "assets/images/cal.gif",
    buttonImageOnly: false,
    "onSelect": function(date) {
      maxDateFilter = new Date(date).getTime();
      oTable.draw();
    }
  }).keyup(function() {
    maxDateFilter = new Date(this.value).getTime();
    oTable.draw();
    //alert(maxDateFilter);
  });

//});
    } ); 

// Date range filter
minDateFilter = "";
maxDateFilter = "";

$.fn.dataTableExt.afnFiltering.push(
 function(oSettings, aData, iDataIndex) {
    alert("inside table");
    if (typeof aData._date == 'undefined') {
      aData._date = new Date(aData[1]).getTime();
      
    }

    if (minDateFilter && !isNaN(minDateFilter)) {
      if (aData._date < minDateFilter) {
        return false;
      }
    }

    if (maxDateFilter && !isNaN(maxDateFilter)) {
      if (aData._date > maxDateFilter) {
        return false;
      }
    }

    return true;
  }
  );

at 56 line alert is not comming the same code i working in different file (test.php) in my own file it not working .

I am trying to filter date column column here.

Kindly help me please

kthorngren · January 2020

Are your .keyup(function() events working? Use console.log or alert to see if they are firing.

As Colin mentioned in order to help diagnose the problem we wil need to actually see it running. Please post a link to your page or a test case replicating the issue.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

SandeepMurala · January 2020

Hi @Kevin thanks for your valuble replay ,.keyup(function() is working it is ginvig alert also.but in this function line number 3 ,it is not giving any alert

$.fn.dataTableExt.afnFiltering.push(
 function(oSettings, aData, iDataIndex) {
    alert("inside table");
    if (typeof aData._date == 'undefined') {
      aData._date = new Date(aData[1]).getTime();
       
    }
 
    if (minDateFilter && !isNaN(minDateFilter)) {
      if (aData._date < minDateFilter) {
        return false;
      }
    }
 
    if (maxDateFilter && !isNaN(maxDateFilter)) {
      if (aData._date > maxDateFilter) {
        return false;
      }
    }
 
    return true;
  }
  );

The same code working on differet file called test.php here you can see my code ;
http://live.datatables.net/sagilose/1/edit .
in this case i have hard code the table data(<td>) .

but in my own file it is not working and this file my data (<td>) coming from database for that we have used dataTable https://datatables.net/examples/data_sources/server_side.html
same funcitonality we have used .
i am not understing why it is not working in my own file .

Thanks
Sandeep

colin · January 2020

As you say, it's working in the example, thanks for that. If it's not working elsewhere, compare the date formats - are they the same? Confirm that with debug console.log() statements in the filter. Also, you're using a very old version of DataTables, I would suggest upgrading.

Colin

SandeepMurala · January 2020

@colin Thanks for your valuebale time for this ,date format is correct only .

$.fn.dataTableExt.afnFiltering.push(    
        function(oSettings, aData, iDataIndex) {
            alert("inside");
    if (typeof aData._date == 'undefined') {
      aData._date = new Date(aData[1]).getTime();
      
    }

    if (minDateFilter && !isNaN(minDateFilter)) {
      if (aData._date < minDateFilter) {
        return false;
      }
    }

    if (maxDateFilter && !isNaN(maxDateFilter)) {
      if (aData._date > maxDateFilter) {
        return false;
      }
    }

    return true;
  }
  );

At 3rd line is not giving alert ,the maxDateFilter and minDateFilter is coming properly .

Is there any mistake ,i am not understading why same code working on test.php why not in my own file ,this two files are in same folder only .

If you are not get this kindly give one solution to me.How to filter date column based on two input fields 1st one is start _date and 2nd one is end date .

Those fields selected by datepicker .

in server.php file my code is like this .

$columns = array(
    array( 'db' => 'filename', 'dt' => 0 ),
    array( 'db' => 'date', 'dt' => 1 ),
    array( 'db' => 'time',  'dt' => 2 ),
    array( 'db' => 'source',   'dt' => 3 ),
    array( 'db' => 'destination',     'dt' => 4 ),
    array( 'db' => 'duration',   'dt' => 5 ),
    array( 'db' => 'filename',     'dt' => 6 ),
    array( 'db' => 'email_id',     'dt' => 7 )
);

This code taken from this dataTable ex.
https://datatables.net/examples/data_sources/server_side.html same code i have used in my file .
Kinldy help me .

Thanks

SandeepMurala · January 2020

@colin thanks for your valuable response .i did check my date format is perfect and here my minDateFilter and minDateFilter is coming in alert but at 56 line alert is not coming .

//$(document).ready( function(){
    $(document).ready(function() {
//$(function() {
     
  var oTable = $('#example').DataTable({
    "oLanguage": {
      "sSearch": "Filter Data"
    },
    "iDisplayLength": -1,
    "sPaginationType": "full_numbers",
 
  });
 
 
 
 
  $("#datepicker_from").datepicker({
      dateFormat: 'yy-mm-dd',
    showOn: "button",
    buttonImage: "assets/images/cal.gif",
    buttonImageOnly: false,
    "onSelect": function(date) {
      minDateFilter = new Date(date).getTime();
      oTable.draw();
    }
  }).keyup(function() {
    minDateFilter = new Date(this.value).getTime();
    oTable.draw();
    //alert(minDateFilter);
  });
 
  $("#datepicker_to").datepicker({
      dateFormat: 'yy-mm-dd',
    showOn: "button",
    buttonImage: "assets/images/cal.gif",
    buttonImageOnly: false,
    "onSelect": function(date) {
      maxDateFilter = new Date(date).getTime();
      oTable.draw();
    }
  }).keyup(function() {
    maxDateFilter = new Date(this.value).getTime();
    oTable.draw();
    //alert(maxDateFilter);
  });
 
//});
    } );
 
// Date range filter
minDateFilter = "";
maxDateFilter = "";
 
$.fn.dataTableExt.afnFiltering.push(
 function(oSettings, aData, iDataIndex) {
    alert("inside table");
    if (typeof aData._date == 'undefined') {
      aData._date = new Date(aData[1]).getTime();
       
    }
 
    if (minDateFilter && !isNaN(minDateFilter)) {
      if (aData._date < minDateFilter) {
        return false;
      }
    }
 
    if (maxDateFilter && !isNaN(maxDateFilter)) {
      if (aData._date > maxDateFilter) {
        return false;
      }
    }
 
    return true;
  }
  );

Here i am not understanding why same code working in test.php file and why not in my own file .

If you not get ,kindly give me one solution for this how to filter date column .

Here i am using two input fields like start_date and end_date with datepicker .

see this link https://datatables.net/examples/data_sources/server_side.html i am using same code, my date header is second column .

Kindly help me .

Thanks
Sandeep

SandeepMurala · January 2020

Hi @colin,@kevin and @kthorngren .I am new to this concept called dataTable,I am not understing since 3 day i was struggling for this .

Please give me your solution how can we filter the date column using two input fields like start_date and end_date with datepicker.

kinldy check this link https://datatables.net/examples/data_sources/server_side.html
based on this code only i am using dataTable in this we have divided 3 files like server.php ,ssp.class.php and page.php,but here my date column has 2nd column like this:

$columns = array(
    array( 'db' => 'filename', 'dt' => 0 ),
    array( 'db' => 'date', 'dt' => 1 ),
    array( 'db' => 'time',  'dt' => 2 ),
    array( 'db' => 'source',   'dt' => 3 ),
    array( 'db' => 'destination',     'dt' => 4 ),
    array( 'db' => 'duration',   'dt' => 5 ),
    array( 'db' => 'filename',     'dt' => 6 )
);

kindly help me.

colin · January 2020

As I said before, if it's working in the example, then the logic is fine, the problem is going to be with the data. Have you tried the suggestions I made in my last message?

Colin

Uncaught TypeError: Cannot read property 'ext' of undefined '

Uncaught TypeError: Cannot read property 'ext' of undefined '

Answers

Howdy, Stranger!

Categories

DataTables

Uncaught TypeError: Cannot read property 'ext' of undefined '

Uncaught TypeError: Cannot read property 'ext' of undefined '

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables