我正在尝试在表上创建多个搜索框，并从 mysql 数据库填充。这是一个很好的例子:( https://datatables.net/examples/api/multi_filter.html )，但该表是用 html 生成的。
我还想实现ajax并将超时设置为1000秒。 此时我可以看到表格很好，并且 1 个搜索选项有效，但如何添加更多？
这是我到目前为止所拥有的:
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.12/css/jquery.dataTables.css">
<script src="https://code.jquery.com/jquery-1.12.4.js" integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU=" crossorigin="anonymous"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function() {
// Setup - add a text input to each footer cell
$('#mainResults tfoot th').each( function () {
var title = $(this).text();
$(this).html( '<input type="text" placeholder="Search '+denominacija+'" />, <input type="text" placeholder="Search '+stava+'" />' );
} );
// DataTable
setTimeout(function() {
$('#mainResults').load('branje_stevcev2.php');
setTimeout(function(){
var table = $('#mainResults').DataTable();
},1000);
}, 1000);
// Apply the search
table.columns().every( function () {
var that = this;
$( 'input', this.footer() ).on( 'keyup change', function () {
if ( that.search() !== this.value ) {
that
.search( this.value )
.draw();
}
} );
} );
} );
</script>
<table border='1' id="mainResults">
<td>
Nalagam ...</td>
</table>
最佳答案
所以我设法让它工作，但是仍然不知道如何在这里实现ajax，所以如果有人可以帮助我，我将非常感激。
<html>
<style>
tfoot input {
width: 100%;
padding: 3px;
box-sizing: border-box;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js" integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU=" crossorigin="anonymous"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function() {
// Setup - add a text input to each footer cell
$('#example tfoot th').each( function () {
var title = $(this).text();
$(this).html( '<input type="text" placeholder="Search '+title+'" />' );
} );
// DataTable
var table = $('#example').DataTable();
// Apply the search
table.columns().every( function () {
var that = this;
$( 'input', this.footer() ).on( 'keyup change', function () {
if ( that.search() !== this.value ) {
that
.search( this.value )
.draw();
}
} );
} );
} );
</script>
<table id="example" class="display" cellspacing="0" width="100%">
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "advansys";
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$result = mysqli_query($conn, "SELECT denominacija, stava, dobitek, vrsta_stave, total_in, date_time FROM stevci");
echo "<thead>
<tr>
<th>Denominacija</th>
<th>Stava</th>
<th>Dobitek</th>
<th>vrsta_stave</th>
<th>total_in</th>
<th>Datum in ura</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
";
while ( $db_v = mysqli_fetch_assoc($result) ) {
echo "<tr>";
echo "<td>" . $db_v['denominacija'] ."</td>";
echo "<td>" . $db_v['stava'] ."</td>";
echo "<td>" . $db_v['dobitek'] ."</td>";
echo "<td>" . $db_v['vrsta_stave'] ."</td>";
echo "<td>" . $db_v['total_in'] ."</td>";
echo "<td>" . $db_v['date_time'] ."</td>";
echo"</tr>";
}
echo "</tbody>";
mysqli_close($conn);
if (isset ($_GET['update']))
{
echo $tbl;
die ();
}
?>
</table>
</html>
关于javascript - mysql数据库填充表中的多个搜索选项，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42446135/