个人中心
gpt4 book ai didi

php - 在您的 html 表中应用过滤器选项

转载 作者：行者123 更新时间：2023-11-27 23:14:24 24 4
gpt4 key购买 nike

我想对我的 html 表应用过滤器以进行以下操作: 1.搜索名称/电子邮件ID 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>

最佳答案

使用server-side processing DataTables的特征而不是在 HTML 中呈现。通过服务器端处理能够处理大型数据集。其他功能也可以根据需要使用，如魅力过滤、搜索、分页等。

数据表提供simple example为了这。前端和服务器端脚本都可用，您只需配置 MySQL 连接即可。

关于php - 在您的 html 表中应用过滤器选项，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44043660/

24 4 0
文章推荐： javascript - 单击时管理 类标签 - javascript
文章推荐： javascript - 带有 localStorage 变量的 jQuery 循环不起作用
文章推荐： html - Responsive Layout 收缩时布局、媒体查询和网格的问题
文章推荐： javascript - 如何在 Visual Studio Code 中更改代码格式
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com