文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >在html表中应用搜索筛选器

问在html表中应用搜索筛选器
EN

Stack Overflow用户
提问于 2017-05-22 11:21:02
回答 2查看 79关注 0票数 0

我有一个包含数百万条记录的表，我想为ContactOwner或任何其他相关字段应用搜索筛选器，我无法实现所需的requirement.Please，检查代码并帮助解决它。

代码语言：javascript
复制
    <!DOCTYPE html>
<html>
<head>
<style>
 <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>


* {
 box-sizing: border-box;
}

#myInput {
background-position: 10px 10px;
background-repeat: no-repeat;
width: 100%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}

 #example {
 border-collapse: collapse;
    width: 100%;
   border: 1px solid #ddd;
  font-size: 18px;
 }

  #example th, #example td {
  text-align: left;
  padding: 12px;
  }

  #example tr {
  border-bottom: 1px solid #ddd;
  }

  #example tr.header, #example tr:hover {
  background-color: #f1f1f1;
  }
  </style>
  </head>

  <body>

   <h2>My Customers</h2>

 <table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">

  <table id="example">
  <tr class="header">
            <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>

 </table>
  <?php         
        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>';

            ?>
<script>
 $(document).ready(function() {
$('#example').DataTable();
} );

<link rel="stylesheet" href="https://code.jquery.com/jquery-1.12.4.js">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap.min.js">

</script>

 </body>
 </html>
php
html
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2017-05-22 15:36:43

您可以使用dataTable插件搜索表记录。

尝试如下：

​

代码语言：javascript
复制
$(document).ready(function() {
  $('#example').DataTable();
} );
代码语言：javascript
复制
<style>

* {
 box-sizing: border-box;
}

#myInput {
background-position: 10px 10px;
background-repeat: no-repeat;
width: 100%;
font-size: 16px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}

 #example {
 border-collapse: collapse;
width: 100%;
   border: 1px solid #ddd;
  font-size: 18px;
 }

  #example th, #example td {
  text-align: left;
  padding: 12px;
  }

  #example tr {
  border-bottom: 1px solid #ddd;
  }

  #example tr.header, #example tr:hover {
  background-color: #f1f1f1;
  }
  </style>
代码语言：javascript
复制
<!DOCTYPE html>
<html>
<head>

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css">





  </head>

  <body>

   <h2>My Customers</h2>

 <table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
  <tr class="header">
        <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>
  		<tr>
  			<td>id</td>
        <td>ContactOwner</td>
        <td>LeadSource</td>
        <td>First_name</td>
        <td>Last_name</td>
        <td>AccountName</td>
        <td>Title</td>
        <td>EmailID</td>
        <td>Department</td>
        <td>Industry</td>
        <td>Phone</td>
        <td>Mobile</td>
        <td>Fax</td>
        <td>DOB</td>
        <td>Assistant</td>
        <td>AsstPhone</td>
        <td>ReportsTo</td>
        <td>LinkedIn</td>
        <td>CallStatus</td>
        <td>Street</td>
        <td>OtherStreet</td>
        <td>City</td>
        <td>State</td>
        <td>Zip</td>
        <td>Country</td>
        <td>Description</td>
  		</tr>
  		<tr>
  			<td>id</td>
        <td>ContactOwner</td>
        <td>LeadSource</td>
        <td>First_name</td>
        <td>Last_name</td>
        <td>AccountName</td>
        <td>Title</td>
        <td>EmailID</td>
        <td>Department</td>
        <td>Industry</td>
        <td>Phone</td>
        <td>Mobile</td>
        <td>Fax</td>
        <td>DOB</td>
        <td>Assistant</td>
        <td>AsstPhone</td>
        <td>ReportsTo</td>
        <td>LinkedIn</td>
        <td>CallStatus</td>
        <td>Street</td>
        <td>OtherStreet</td>
        <td>City</td>
        <td>State</td>
        <td>Zip</td>
        <td>Country</td>
        <td>Description</td>
  		</tr>
  		<tr>
  			<td>id</td>
        <td>ContactOwner</td>
        <td>LeadSource</td>
        <td>First_name</td>
        <td>Last_name</td>
        <td>AccountName</td>
        <td>Title</td>
        <td>EmailID</td>
        <td>Department</td>
        <td>Industry</td>
        <td>Phone</td>
        <td>Mobile</td>
        <td>Fax</td>
        <td>DOB</td>
        <td>Assistant</td>
        <td>AsstPhone</td>
        <td>ReportsTo</td>
        <td>LinkedIn</td>
        <td>CallStatus</td>
        <td>Street</td>
        <td>OtherStreet</td>
        <td>City</td>
        <td>State</td>
        <td>Zip</td>
        <td>Country</td>
        <td>Description</td>
  		</tr>
  		<tr>
  			<td>id</td>
        <td>ContactOwner</td>
        <td>LeadSource</td>
        <td>First_name</td>
        <td>Last_name</td>
        <td>AccountName</td>
        <td>Title</td>
        <td>EmailID</td>
        <td>Department</td>
        <td>Industry</td>
        <td>Phone</td>
        <td>Mobile</td>
        <td>Fax</td>
        <td>DOB</td>
        <td>Assistant</td>
        <td>AsstPhone</td>
        <td>ReportsTo</td>
        <td>LinkedIn</td>
        <td>CallStatus</td>
        <td>Street</td>
        <td>OtherStreet</td>
        <td>City</td>
        <td>State</td>
        <td>Zip</td>
        <td>Country</td>
        <td>Description</td>
  		</tr>
  		<tr>
  			<td>id</td>
        <td>ContactOwner</td>
        <td>LeadSource</td>
        <td>First_name</td>
        <td>Last_name</td>
        <td>AccountName</td>
        <td>Title</td>
        <td>EmailID</td>
        <td>Department</td>
        <td>Industry</td>
        <td>Phone</td>
        <td>Mobile</td>
        <td>Fax</td>
        <td>DOB</td>
        <td>Assistant</td>
        <td>AsstPhone</td>
        <td>ReportsTo</td>
        <td>LinkedIn</td>
        <td>CallStatus</td>
        <td>Street</td>
        <td>OtherStreet</td>
        <td>City</td>
        <td>State</td>
        <td>Zip</td>
        <td>Country</td>
        <td>Description</td>
  		</tr>
  		<tr>
  			<td>id</td>
        <td>ContactOwner</td>
        <td>LeadSource</td>
        <td>First_name</td>
        <td>Last_name</td>
        <td>AccountName</td>
        <td>Title</td>
        <td>EmailID</td>
        <td>Department</td>
        <td>Industry</td>
        <td>Phone</td>
        <td>Mobile</td>
        <td>Fax</td>
        <td>DOB</td>
        <td>Assistant</td>
        <td>AsstPhone</td>
        <td>ReportsTo</td>
        <td>LinkedIn</td>
        <td>CallStatus</td>
        <td>Street</td>
        <td>OtherStreet</td>
        <td>City</td>
        <td>State</td>
        <td>Zip</td>
        <td>Country</td>
        <td>Description</td>
  		</tr>

  </tbody>
  </table>      
 </body>
 </html>

​

票数 2
EN

Stack Overflow用户

发布于 2017-05-22 11:37:01

最简单的方法是使用dataTable库的JQuery。请按照下面的链接https://datatables.net/examples/styling/bootstrap.html

代码语言：javascript
复制
$("#example").dataTable();
票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/44111567

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档