Using Datatables in Javascript to search html/php table not working

Question

I currently have numerous functions which add informtion to a table (examples shown):

function Applyd()
{
     foreach($_POST['select3'] as $project1) 
     {
         $project = $_POST['select3'];

    // Set $fromdate to the entered value if there was one, otherwise set it to something long ago
$fromdate = $_REQUEST["from"] ? $_REQUEST["from"] : date("Y-m-d", strtotime("-100 years"));

// Set $todate to the entered value if there was one, otherwise set it to tomorrow. There shouldn't be any finished dates in the future!
$todate = $_REQUEST["to"] ? $_REQUEST["to"]: date("Y-m-d", strtotime("+1 day"));

// Remove the hyphens so that our dates are in the same format as the text file and we can compare them directly
$fromdate = str_replace("-", "", $fromdate);
$todate = str_replace("-", "", $todate);

 $handle = @fopen("project-list.txt", "r");

while(!feof($handle)) {
  $row = fgets($handle);

$col1 = explode ("\t", $row);


  if(($col1[0] !== "unfinished")  && ($col1[0] >= $fromdate) && ($col1[0] <= $todate) && strpos($row, $project1) !== FALSE)

      {
     // Or save the $row in an array to write out later
echo "<table id='example'>";
        echo "<table border=\"5\" cellpadding=\"10\">";
        echo "<tr>";
        echo $row . "<br />";

  }

    echo "</tr>";
    echo "</table>";
}

 fclose($handle);
}

}

function Applydd() 
{


    // Set $fromdate to the entered value if there was one, otherwise set it to something long ago
$fromdate = $_REQUEST["from"] ? $_REQUEST["from"] : date("Y-m-d", strtotime("-100 years"));

// Set $todate to the entered value if there was one, otherwise set it to tomorrow. There shouldn't be any finished dates in the future!
$todate = $_REQUEST["to"] ? $_REQUEST["to"]: date("Y-m-d", strtotime("+1 day"));

// Remove the hyphens so that our dates are in the same format as the text file and we can compare them directly
$fromdate = str_replace("-", "", $fromdate);
$todate = str_replace("-", "", $todate);

 $handle = @fopen("project-list.txt", "r");

while(!feof($handle)) {
  $row = fgets($handle);

$col1 = explode ("\t", $row);


  if(($col1[0] !== "unfinished")  && ($col1[0] >= $fromdate) && ($col1[0] <= $todate))

      {
     // Or save the $row in an array to write out later
echo "<table id='example'>";
        echo "<table border=\"5\" cellpadding=\"10\">";
        echo "<tr>";
        echo $row . "<br />";

  }

    echo "</tr>";
    echo "</table>";
}

 fclose($handle);



}

I want the user to be able to search for keywords in the table. I have tried to use this but it does not display any results. I don't know what I am doing wrong.

<script src ="https://cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<script>
function myFunction(){
var table = $('#example').DataTable();

// #myInput is a <input type="text"> element
$('#search').on( 'keyup', function () {
    table.search( this.value ).draw();
} );
}
</script>

Answer 1

You're generating your tables incorrectly, see corrected code for one of the tables.

Also make sure you're specifying <thead> with correct number of <th></th> elements corresponding to the number of columns.

echo '<table id="example" border="5" cellpadding="10">';
echo '<thead><tr><th>Col1</th><th>Col2</th><th>Col3</th></tr></thead>';
echo '<tbody>';

while(!feof($handle)) {
    $row = fgets($handle);
    $col1 = explode("\t", $row);

    if(($col1[0] !== "unfinished")  && ($col1[0] >= $fromdate) && ($col1[0] <= $todate))
    {
        echo '<tr><td>';
        echo implode('</td><td>', htmlspecialchars($row));
        echo '</td></tr>';
    }
}
echo '</tbody>';
echo '</table>';

Also there is no need to use a separate search box and extra coding as jQuery DataTables provides search box by default, see Zero configuration example .