如何为我的php表设置Datatable插件


how to set Datatable plugin for my php table

我是jquery的新手,当trinig显示searche字段和插件的组织butom以在我的源代码中集成数据表时,我遇到了一个问题,并且我不确定js和css文件链接的集成。

这是我的表源代码

     <div class="table responsive ">
      <table id="datatable" class="table table-condensed table-striped table-hover no-margin display" cellspacing="0" width="100%"> 
        <thead>
        <tr class="table-danger">
            <th>Nom</th>
            <th>Prenom</th>
            <th>Structure</th>
            <th>Email</th>
            <th>Date rec</th>
            <th>RC</th>
            <th>Matricule</th>
            <th></th>
            <th></th>
        </tr>
        </thead>
    <?php 
    if (strcmp($affectation,'DSI')==0)  
        {
            while($query2=mysqli_fetch_array($query1))
            {
            echo "<tbody><tr><td>".$query2['name']."</td>";
            echo "<td>".$query2['prenom']."</td>";
            echo "<td>".$query2['affectation']."</td>";
            echo "<td class='"col-xs'">".$query2['email']."</td>";
            echo "<td>".$query2['date_rec']."</td>";
            echo "<td class='"text-DANGER'">".$query2['nbr_rc']." Jours</td>";
            echo "<td>".$query2['matricule']."</td>";
            echo "<td> <a class='"btn btn-primary btn-xs green pull-center'" href='aff_emp.php?sessId=$sessId&id=".$query2['id']."'>Afficher </a></td>";
            }
        }
    else
            {
            while($query4=mysqli_fetch_array($query3))
            {
            echo "<tbody><tr><td>".$query4['name']."</td>";
            echo "<td>".$query4['prenom']."</td>";
            echo "<td>".$query4['affectation']."</td>";
            echo "<td>".$query4['email']."</td>";
            echo "<td>".$query4['date_rec']."</td>";
            echo "<td class='"text-DANGER'">".$query4['nbr_rc']." Jours</td>";
            echo "<td>".$query4['matricule']."</td>";
            echo "<td> <a class='"btn btn-primary btn-xs green pull-center'" href='edit.php?sessId=$sessId&id=".$query4['id']."'>Modifier</a></td>";
            echo "<td> <button type='"button'" class='"btn btn-xs green btn-primary disabled pull-center'">Supp</button> ";
            echo "<td> <a class='"btn btn-primary btn-xs green pull-center'" href='aff_emp.php?sessId=$sessId&id=".$query4['id']."'>Afficher </a></td>";
            }
    }
    ?>
            </td>
        </tr>
    </tbody>
  </table>

tks提前和函数数据表的源javascript

<head>
    <meta charset="UTF-8">
    <title>Application gestion de RC</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/jquery.dataTables.min.css">
    <link rel="stylesheet" href="css/jquery.dataTables.css">
    <script type="text/javascript" src="js/jquery-1.8.2.js"></script>
    <script type="text/javascript" src="js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="js/jquery.dataTables.js"></script>
    <script src="js/jquery.min.js"></script>
    <script type="text/javascript" language="javascript" >
    $(document).ready(function()
    {
        $('#datatable').dataTable();
    });
    </script>
</head>

区分大小写

与php无关。。。

$(document).ready(function() {
    $('#datatable').dataTable();
});

应该是

$(document).ready(function() {
    $('#datatable').DataTable();
});

注意大写DataTable();

使用开发人员工具或firebug查看javascript控制台,这样您就可以看到这样的错误。

Examle

在codepen.io 上查看此示例

移动while循环的外部。。并移动while循环内部

所以

tbody
while{
<tr>
<td><td>
...
</tr>
}
<tbody>

Datatables可以让你像sarchbox一样定位它的元素,它相对容易,你可以在这里看看。https://www.datatables.net/examples/basic_init/dom.html