Javascript 我想将筛选、分页添加到myTable

Javascript 我想将筛选、分页添加到myTable,javascript,php,html,mysql,Javascript,Php,Html,Mysql,我想在myTable中添加筛选和分页, 我使用了引导表的引导代码进行排序搜索和分页。 但它并没有显示动态数据的分页和搜索框。那么,如何将其添加到下面的代码中呢 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Example of Employee Table

我想在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> 

使用twitter引导的Employee表示例
引导表,使用dataTable.js进行排序、搜索和分页(响应)
身份证件
姓名/东主姓名
电子邮件ID
地址
联系电话
行动
$(文档).ready(函数(){
$('#myTable').dataTable();
});
在您的标签中,有六列和七列,
解决方案:只需在“联系人编号”后再添加一列,就意味着在“联系人编号”后添加“无”…这可能会有帮助
使用twitter引导的Employee表示例
引导表,使用dataTable.js进行排序、搜索和分页(响应)
身份证件
姓名/东主姓名
电子邮件ID
地址
联系电话
没有一个
行动
$(文档).ready(函数(){
$('#myTable').dataTable();
});

谢谢,它现在可以工作了。
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>