jQuery DataTable没有分页控件

时间:2015-11-30 16:54:07

标签: php twitter-bootstrap pagination

我正在尝试将Bootstrap分页插入到我从我的数据库中提取的动态表格内容,如下所示,但没有任何作用:

    <?php
    $sn = $_POST["SN"];
    $Reference = $_POST["Reference"];
    $Libelle = $_POST["Libelle"];
    $NOMENCLATURE = $_POST["NOMENCLATURE"];
    $matricule = $_POST["matricule"];




    include "./Connections/localhost.php";

    $sqlTous = "
    select mat.SN, mat.NOMENCLATURE, mat.ID_materiel, mat.Reference, mat.Date_affectation, mat.libelle, mat.Date_Acquisition, mat.Fournisseur,mat.commentaire, mat.Contrat from materiel mat 
    left join user usr on usr.ID_User = mat.ID_User ";



     ?>

     <div>
    <form method="post" action="./consultation.php"  id="formClient">
        <h4 class="widgettitle" width="10%" >Résultat</h4>
    <br/>

        <table class="table table-striped" id="example" class="display">
            <thead>
                <tr>

                    <th>Name</th>

                    <th>Position</th>

                    <th>Office</th>

                    <th>Age</th>

                    <th>Start date</th>

                    <th>Salary</th>


                </tr>
            </thead>                
     <?php 
    $reponse3 =  mysql_query($sqlTous);


     while ($rowMat1 = mysql_fetch_array($reponse3)) { ?>   
        <tbody class="table table-striped" id="example" class="display"> 
             <tr>
                    <td><?php echo $rowMat1['SN']; ?></td>                 
                    <td><?php echo $rowMat1['NOMENCLATURE']; ?></td>
                    <td><?php echo $rowMat1['Reference']; ?></td>
                    <td><?php echo $rowMat1['libelle']; ?> </td>
                    <td><?php echo $rowMat1['Date_Acquisition']; ?></td>
                    <td><?php echo $rowMat1['Date_affectation']; ?></td>

             </tr>
        </tbody>
            <?php } ?>
        </table>    
            </form>


    <script>
        $(document).ready(function() {
        $('#example').DataTable();
    } );
    </script>

此外,我还包括以下js和css文件:

 <html>
    <head>
    <meta http-equiv="X-UA-Compatible" content="IE=EDGE" />
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Recherche matériel</title>


        <link rel="stylesheet" href="https://cdn.datatables.net/1.10.10/css/dataTables.bootstrap.min.css" type="text/css" /> 




    <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.10/js/dataTables.bootstrap.min.js"></script> 

    <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="js/jquery-migrate-1.1.1.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.9.2.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>

0 个答案:

没有答案