Question

我正在尝试在一个表上创建多个搜索框，从mysql数据库填充。这是一个很好的例子：（https://datatables.net/examples/api/multi_filter.html），但表格是用html生成的。

我还想实现ajax并将timeout设置为1000s。在这一刻，我可以看到表格很好，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>

Answer 1

所以我有点设法让它工作，但是仍然不知道如何在这里实现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>

mysql数据库填充表中的多个搜索选项

1 个答案: