Answers

• weinan Posts: 7Questions: 2Answers: 0

  January 2020

  here is my code '''

          jQuery(document).ready(function() {
              var table = jQuery('#myTable').DataTable(
                  {
                      searchPane:{
                          columns:[':contains("Gender")',':contains("Birth Province")',':contains("story")',]
                          , threshold: 0
                      }
                  }
              );
  
              // Event listener to the two range filtering inputs to redraw on input
              jQuery('#min, #max').keyup( function() {
                  table.draw();
              } );
          } );
  
  
          jQuery.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[6] ) || 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;
                          }
                      );
  

  '''
• weinan Posts: 7Questions: 2Answers: 0

  January 2020 edited January 2020

  I am using facetwp to display my data
  '''
  <br/>
  
  
  
  <link rel="stylesheet" href="https://cdn.datatables.net/plug-ins/preview/searchPane/dataTables.searchPane.min.css">
  <link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

  
  

  <style>
  table.sortable th:not(.sorttable_sorted):not(.sorttable_sorted_reverse):not(.sorttable_nosort):after {
  content: " \25B4\25BE"
  }
  </style>

  Minimum age:
  Maximum age:

  <?php while ( have_posts() ): the_post(); ?> <?php echo pods( 'interviewee', get_the_id() )->template( 'Interviewee Archive 1' ); ?> <?php endwhile; ?>

  	ឈ្មោះ Name	ការថតសំឡេង Audio	ប្រតិចារិក Transcript	ការបកប្រែ Translation	ថ្ងៃសម្ភាសន៍ Interview Date	អាយុពេលសម្ភាសន៍ Age at Interview	story	Gender	Birth Province

  <?php echo facetwp_display( 'pager' ); ?>
  '''
• kthorngren Posts: 21,330Questions: 26Answers: 4,951

  January 2020

  One problem is you are loading jquery.js more than once. You have it on line 52 then on line 326. You only want to load it once. Fixing this may solve your problem.

  Kevin
• weinan Posts: 7Questions: 2Answers: 0

  January 2020

  Thorngren, thank you for replay.
  I have removed one but still doesn't work, do you have any other ideas?
  thanks
• kthorngren Posts: 21,330Questions: 26Answers: 4,951

  January 2020 Answer ✓

  Maybe jQuery.fn.dataTable.ext.search.push(...) on line 77 is being executed before you load datatables.js on line 327. You will want to execute it after Datables has been loaded. Maybe move all the JS includes starting at line 327 between line 53 and 54. Load order is important with Javascript.

  Kevin
• weinan Posts: 7Questions: 2Answers: 0

  January 2020

  Thank you Kthorngren, that is the problem.
  However, My age filter still doesn't work and there is no error message, do you have any recommendations to fix it or to debug?
  Thank you again
• kthorngren Posts: 21,330Questions: 26Answers: 4,951

  January 2020 edited January 2020 Answer ✓

  I don't see anything obvious. I would start with some console.log statements to debug the problem. I would start with placing one in the search plugin, for example:

            jQuery.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[6] ) || 0; // use data for the age column
  
                                  console.log(min, max, age);                     
  
                                  if ( ( isNaN( min ) && isNaN( max ) ) ||
                                      ( isNaN( min ) && age <= max ) ||
                                      ( min <= age   && isNaN( max ) ) ||
                                      ( min <= age   && age <= max ) )
                                  {
                                      return true;
                                      
                                  }
                                  return false;
                                  
                              }
                          );
  

  This will show that your keyup event is working and the values being compared. Should lead you to the next troubleshooting steps.

  Kevin