Question

我想为myTable添加过滤，分页，我使用了Bootstrap-Table-With-Sorting-Searching-and-Paging的Bootstrap代码。但它没有显示我的动态数据的分页和搜索框。如何将其添加到我的波纹管代码中。

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

Answer 1

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>

我想为myTable添加过滤，分页

1 个答案: