使用Javascript中的数据表搜索html / php表不起作用

Question

我目前有许多功能，可以向表中添加信息（显示示例）：

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);



}

我希望用户能够在表中搜索关键字。 我尝试使用此方法，但未显示任何结果。 我不知道我在做什么错。

<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

您生成的表不正确，请参阅其中一张表的更正代码。

还要确保您指定的<thead> <th></th>元素的正确数量是与列数相对应的<th></th>元素。

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>';

同样，也不需要使用单独的搜索框和额外的编码，因为jQuery DataTables默认提供搜索框，请参见零配置示例 。