dsdfd2322 2017-05-22 11:21
浏览 15
已采纳

在您的html表中应用搜索过滤器

I have a table which has millions of records in it and I want to apply search filter for ContactOwner or any other relevant field.I am not able to implement the desired requirement.Please check the code and help to resolve it.

    <!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>
  • 写回答

2条回答 默认 最新

  • douwei2966 2017-05-22 15:36
    关注

    You can use dataTable plugin to search table records

    Try this:

    $(document).ready(function() {
  $('#example').DataTable();
} );                            
    <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>

 
    <!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>

    </div>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？

悬赏问题

  • ¥20 双层网络上信息-疾病传播
  • ¥50 paddlepaddle pinn
  • ¥20 idea运行测试代码报错问题
  • ¥15 网络监控：网络故障告警通知
  • ¥15 django项目运行报编码错误
  • ¥15 请问这个是什么意思？
  • ¥15 STM32驱动继电器
  • ¥15 Windows server update services
  • ¥15 关于#c语言#的问题：我现在在做一个墨水屏设计，2.9英寸的小屏怎么换4.2英寸大屏
  • ¥15 模糊pid与pid仿真结果几乎一样