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>
    
    已采纳该答案
    打赏 评论
  • dtv55860 2017-05-22 11:37

    Easiest way to achieve is use dataTable library of JQuery. Please follow below link https://datatables.net/examples/styling/bootstrap.html

    $("#example").dataTable();
    
    打赏 评论

相关推荐 更多相似问题