Question

我想将过滤器应用到我的html表中以供以下操作： 1.搜索名称/ emailid 2.页面长度（因为我的表有数千条记录）此外，我想提供一个选项来更新记录，我输入名称，所有信息应自动填充到该表单，然后用户可以更新他想要的任何内容。以下是我给出的代码：

        <?php
$db_host = 'localhost'; // Server Name
$db_user = 'root'; // Username
$db_pass = ''; // Password
$db_name = 'contacts'; // Database Name

$conn = mysqli_connect($db_host, $db_user, $db_pass, $db_name);
if (!$conn) {
die ('Failed to connect to MySQL: ' . mysqli_connect_error());  
}

$sql = 'SELECT * 
    FROM usait LIMIT 50' ;

$query = mysqli_query($conn, $sql);

if (!$query) {
die ('SQL Error: ' . mysqli_error($conn));
}
 ?>
<html>
<head>
<title>Displaying MySQL Data in HTML Table</title>
<style type="text/css">
           <link rel="stylesheet" href="http://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css">
           <script src="http://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
    body { {
        font-size: 15px;
        color: #343d44;
        font-family: "segoe-ui", "open-sans", tahoma, arial;
        padding: 0;
        margin: 0;
    }
    table {
        margin: auto;
        font-family: "Lucida Sans Unicode", "Lucida Grande", "Segoe Ui";
        font-size: 12px;
    }

    h1 {
        margin: 25px auto 0;
        text-align: center;
        text-transform: uppercase;
        font-size: 17px;
    }

    table td {
        transition: all .5s;
    }

    /* Table */
    .data-table {
        border-collapse: collapse;
        font-size: 14px;
        min-width: 537px;
    }

    .data-table th, 
    .data-table td {
        border: 1px solid #e1edff;
        padding: 7px 17px;
    }
    .data-table caption {
        margin: 7px;
    }

    /* Table Header */
    .data-table thead th {
        background-color: #508abb;
        color: #FFFFFF;
        border-color: #6ea1cc !important;
        text-transform: uppercase;
    }

    /* Table Body */
    .data-table tbody td {
        color: #353535;
    }
    .data-table tbody td:first-child,
    .data-table tbody td:nth-child(4),
    .data-table tbody td:last-child {
        text-align: right;
    }

    .data-table tbody tr:nth-child(odd) td {
        background-color: #f4fbff;
    }
    .data-table tbody tr:hover td {
        background-color: #ffffa2;
        border-color: #ffff0f;
    }

    /* Table Footer */
    .data-table tfoot th {
        background-color: #e5f5ff;
        text-align: right;
    }
    .data-table tfoot th:first-child {
        text-align: left;
    }
    .data-table tbody td:empty
    {
        background-color: #ffcccc;
    }
 </style>
</head>
<body>
   <table class="data-table" id="example">
    <caption class="title">US Data</caption>
    <thead>
        <tr>
            <th>id</th>
            <th>ContactOwner</th>
            <th>LeadSource</th>
            <th>First_name</th>
            <th>Last_name</th>
            <th>AccountName</th>
            <th>Title</th>
            <th>EmailID</th>
            <th>Department</th>
            <th>Industry</th>
            <th>Phone</th>
            <th>Mobile</th>
            <th>Fax</th>
            <th>DOB</th>
            <th>Assistant</th>
            <th>AsstPhone</th>
            <th>ReportsTo</th>
            <th>LinkedIn</th>
            <th>CallStatus</th>
            <th>Street</th>
            <th>OtherStreet</th>
            <th>City</th>
            <th>State</th>
            <th>Zip</th>
            <th>Country</th>
            <th>Description</th>
        </tr>
    </thead>
    <tbody>
    <?php
    $no     = 1;
    $total  = 0;
    while ($row = mysqli_fetch_array($query))
    {

        echo '<tr>
                <td>'.$row['id'].'</td>
                <td>'.$row['ContactOwner'].'</td>
                <td>'.$row['LeadSource'].'</td>
                <td>'.$row['First_name'].'</td>
                <td>'.$row['Last_name'].'</td>
                <td>'.$row['AccountName'].'</td>
                <td>'.$row['Title'].'</td>
                <td>'.$row['EmailID'].'</td>
                <td>'.$row['Department'].'</td>
                <td>'.$row['Industry'].'</td>
                <td>'.$row['Phone'].'</td>
                <td>'.$row['Mobile'].'</td>
                <td>'.$row['Fax'].'</td>
                <td>'.$row['DOB'].'</td>
                <td>'.$row['Assistant'].'</td>
                <td>'.$row['AsstPhone'].'</td>
                <td>'.$row['ReportsTo'].'</td>
                <td>'.$row['LinkedIn'].'</td>
                <td>'.$row['CallStatus'].'</td>
                <td>'.$row['Street'].'</td>
                <td>'.$row['OtherStreet'].'</td>
                <td>'.$row['City'].'</td>
                <td>'.$row['State'].'</td>
                <td>'.$row['Zip'].'</td>
                <td>'.$row['Country'].'</td>    
                <td>'.$row['Description'].'</td>                    
            </tr>';

        $no++;
    }?>
    </tbody>
    <tfoot>
        <tr>
            <th colspan="26">TOTAL</th>
            <th><?=number_format($total)?></th>
        </tr>
    </tfoot>
 </table>
<script>
   $(document).ready(function() {
$('#example').DataTable( {
    "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, 100, "All"]]
} );
} );
</script>

</body>
</html>

Answer 1

使用server-side processing的DataTables功能，而不是在HTML中呈现。服务器端处理能够处理大型数据集。其他功能也可以像魅力过滤，搜索，分页等一样工作。

DataTables为此提供simple example。前端和服务器端脚本都可用，您只需配置MySQL连接即可开始使用。

在html表中应用过滤器选项

1 个答案: