使用数据表在Javascript中搜索html/php表不工作


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

我目前有许多函数将信息添加到表中(示例所示):

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>

生成的表不正确,请参阅其中一个表的更正代码。

还要确保您指定的<thead>具有与列数相对应的<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默认提供了搜索框,参见Zero配置示例。