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

时间:2016-05-19 17:43:39

标签: php jquery html html5 datatable

我是jquery的新手,当trinig显示seginche字段和组织插件时,我有一个问题,在我的源代码中集成数据表,我不确定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>
事先提前 和函数数据表的源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>

3 个答案:

答案 0 :(得分:1)

区分大小写

与php无关...

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

应该是

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

请注意大写 D ataTable();

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

Examle

在codepen.io上查看此Example

答案 1 :(得分:0)

移动while循环外部..并移动while循环内部

所以

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

答案 2 :(得分:0)

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