2014-11-01 64 views
0

我想添加過濾,分頁到myTable, 我已經使用Bootstrap-Table-With-Sorting-Searching-and-Paging的Bootstrap代碼。 但它沒有顯示我的動態數據的分頁和搜索框。我如何將它添加到我的波紋管代碼中。我想添加過濾,分頁到myTable

<!DOCTYPE html> 
     <html lang="en"> 
     <head> 
     <meta charset="utf-8"> 
     <title>Example of Employee Table with twitter bootstrap</title> 
     <meta name="description" content="Creating a Employee table with Twitter Bootstrap. Learn    with example of a Employee Table with Twitter Bootstrap."> 
     <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"  rel="stylesheet"> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
     <link rel="stylesheet" href="http://cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css"></style> 
     <script type="text/javascript" src="http://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script> 
     <script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
     </head> 
     <body style="margin:20px auto"> 
     <div class="container"> 
     <div class="row header" style="text-align:center;color:green"> 
     <h3>Bootstrap Table With sorting,searching and paging using dataTable.js (Responsive)</h3> 
     </div><?php include 'config.php'; 
       $resultcrud =mysql_query("SELECT * FROM customer"); 
     ?> 
     <table id="myTable" class="table table-striped" > 
       <thead> 
        <tr> 
        <th>ID</th> 
       <th>Name/Proprietors Name</th> 
       <th>Email-ID</th> 
       <th>Address</th> 
       <th>Contact No</th> 
       <th>Action</th> 
        </tr> 
       </thead> 
       <tbody> 
        <?php 
      $count=mysql_num_rows($resultcrud); 
      if($count==NULL) 
         { 
         echo '<tr>'; 
     echo '<td>'."No Records Found".'</td>'; 
     echo '</tr>';}else 
      while($row=mysql_fetch_array($resultcrud)) 
         { 
         echo '<tr>'; 
       echo '<td>'. $row['customer_index'] . '</td>'; 
       echo '<td>'. $row['firm_name'] . '/'. $row['prop_name'] . '</td>'; 
       echo '<td>'. $row['email_id'] . '</td>'; 
       echo '<td>'. $row['firm_address'] . '</td>'; 
       echo '<td>'. $row['contact_no'] . '</td>'; 
       echo '<td style = "display:none" >'.$row['category'].''.$row['category_id'].''. $row['sub_category'] .''.$row['contact_no'].''.$row['service_detail'].''.$row['other_detail'].''.$row['photo'].'</td>'; 
       echo '<td><p><a class="btn btn-xs btn-info" href="read.php?id='.$row["customer_index"].'">View</a> 
      <a class="btn btn-xs btn-primary" href="update.php?id='.$row["customer_index"].'">Edit</a> 
      <a class="btn btn-xs btn-danger" href="delete.php?id='.$row["customer_index"].'">Delete</a></p></td>'; 
       echo '</tr>'; 
       } 
     $dbo = null; 
     ?> 
       </tbody> 
       </table> 
       </div> 
     </body> 
     <script> 
     $(document).ready(function(){ 
      $('#myTable').dataTable(); 
     }); 
     </script> 
     </html> 

回答

0
in your <thead> tag ,there is six column and in <tbody> there is seven column, 
SOLUTION : just add one MORE column in <thead> means add <th style="display:none">None</th> after '<th>Contact No</th>' ..might be will help full 


<!DOCTYPE html> 
     <html lang="en"> 
     <head> 
     <meta charset="utf-8"> 
     <title>Example of Employee Table with twitter bootstrap</title> 
     <meta name="description" content="Creating a Employee table with Twitter Bootstrap. Learn    with example of a Employee Table with Twitter Bootstrap."> 
     <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"  rel="stylesheet"> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
     <link rel="stylesheet" href="http://cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css"></style> 
     <script type="text/javascript" src="http://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script> 
     <script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
     </head> 
     <body style="margin:20px auto"> 
     <div class="container"> 
     <div class="row header" style="text-align:center;color:green"> 
     <h3>Bootstrap Table With sorting,searching and paging using dataTable.js (Responsive)</h3> 
     </div> 
     <table id="myTable" class="table table-striped" > 
       <thead> 
        <tr> 
         <th>ID</th> 
         <th>Name/Proprietors Name</th> 
         <th>Email-ID</th> 
         <th>Address</th> 
         <th>Contact No</th> 
         <th style="display:none">None</th> 
         <th>Action</th> 
        </tr> 
       </thead> 
       <tbody> 
        <?php 
        $i=1; 
      while($i<20){ 

         echo '<tr>'; 
       echo '<td>'. $i . '</td>'; 
       echo '<td>Email-ID</td>'; 
       echo '<td>Address</td>'; 
       echo '<td>Contact No</td>'; 
       echo '<td>Action</td>'; 
       echo '<td style = "display:none" >none</td>'; 
       echo '<td><p>ViewEditDelete</p></td>'; 
       echo '</tr>'; 
      $i++; 
      } 
     ?> 
       </tbody> 
       </table> 
       </div> 
     </body> 
     <script> 
     $(document).ready(function(){ 
      $('#myTable').dataTable(); 
     }); 
     </script> 
     </html> 
+0

現在由於它的工作。 – user4148466 2014-11-01 10:14:46