Поиск данных в html и php - PullRequest
Новая
       2

Поиск данных в html и php

0 голосов
/ 29 марта 2020

Я всегда получаю эту ошибку Предупреждение DataTables: таблица id = dataTable - Невозможно повторно инициализировать DataTable. Для получения дополнительной информации об этой ошибке см. здесь при загрузке страницы. Мне трудно использовать функции поиска, нумерации страниц и ввода. пожалуйста, мне нужна ваша помощь. 

<html>
<body>
<table class="table table-striped table-bordered table-hover" id="dataTable" cellspacing="0" style="width="100%">
          <thead>
            <tr>
              <th>User Id</th>
              <th>Username</th>
              <th>Fullname</th>
              <th>Position</th>
              <th>Gender</th>
              <th>Email</th>
              <th>Telephone</th>
              <th style="width: 23%">Action</th>
            </tr>
          </thead>
    <?php $sql = "SELECT * FROM users WHERE Status='1' ";
          $query = $dbh->prepare($sql);
          $query->execute();
          $results=$query->fetchAll(PDO::FETCH_OBJ);

  if($query->rowCount() > 0){
      foreach($results as $result)
        {   ?>
        <tbody>   
          <tr>
            <td><?php echo htmlentities($result->UserId);?></td>
            <td><?php echo htmlentities($result->Username);?></td>
            <td><?php echo htmlentities($result->Fullname);?></td>
            <td><?php echo htmlentities($result->Position);?></td>
            <td><?php echo htmlentities($result->Gender);?></td>
            <td><?php echo htmlentities($result->Email);?></td>
            <td><?php echo htmlentities($result->Telephone);?></td>
          </tr>
         </tbody>
         <?php }} ?>
         <tfoot>
            <tr>
              <tr>
              <th>User Id</th>
              <th>Username</th>
              <th>Fullname</th>
              <th>Position</th>
              <th>Gender</th>
              <th>Email</th>
              <th>Telephone</th>
              <th>Action</th>
            </tr>
      </table>   
</body>          
<script>
  $(function () {
    $('#dataTable').DataTable()
    $('#dataTable').DataTable({
      'paging'      : true,
      'lengthChange': false,
      'searching'   : false,
      'ordering'    : true,
      'info'        : true,
      'autoWidth'   : false
    })
  })
</script>
</html>

1 Ответ

0 голосов
/ 30 марта 2020

Прежде всего, у вас есть ошибка: style="width="100%" должно быть style="width:100%"

Затем вы дважды вызываете свой стол ('#dataTable').DataTable. Как указано в ссылка, которую вы предоставили .

Существует также хорошее количество примеров, как начать использовать этот плагин .

Также у вас было 8 столбцов в заголовке таблицы и 7 в теле таблицы, которые выдают ошибку. Вам нужно разобраться с этими числами.

Я также включил скрипт в тело и просто для уверенности назвал его в готовом документе. Это работает, как показано ниже. 

<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>
</head>
<body>
<table id="dataTable" class="display" style="width:100%">
          <thead>
            <tr>
              <th>User Id</th>
              <th>Username</th>
              <th>Fullname</th>
              <th>Position</th>
              <th>Gender</th>
              <th>Email</th>
              <th>Telephone</th>
              <th style="width: 23%">Action</th>
            </tr>
          </thead>
        <tbody>   
          <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td>5</td>
            <td>6</td>
            <td>7</td>
            <td>8</td>
          </tr>
         </tbody>
         <tfoot>
            <tr>
              <tr>
              <th>User Id</th>
              <th>Username</th>
              <th>Fullname</th>
              <th>Position</th>
              <th>Gender</th>
              <th>Email</th>
              <th>Telephone</th>
              <th>Action</th>
            </tr>
      </table>   
         
<script>
$(document).ready(function() {
    $('#dataTable').DataTable({
      'paging'      : true,
      'lengthChange': false,
      'searching'   : false,
      'ordering'    : true,
      'info'        : true,
      'autoWidth'   : false
} );
    } );
</script>
</body> 
</html>

Итак, ваш код должен быть: 

<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>
</head>
<body>
<table class="table table-striped table-bordered table-hover" id="dataTable" cellspacing="0" style="width:100%">
          <thead>
            <tr>
              <th>User Id</th>
              <th>Username</th>
              <th>Fullname</th>
              <th>Position</th>
              <th>Gender</th>
              <th>Email</th>
              <th>Telephone</th>
              <th style="width: 23%">Action</th>
            </tr>
          </thead>
    <?php $sql = "SELECT * FROM users WHERE Status='1' ";
          $query = $dbh->prepare($sql);
          $query->execute();
          $results=$query->fetchAll(PDO::FETCH_OBJ);

  if($query->rowCount() > 0){
      foreach($results as $result)
        {   ?>
        <tbody>   
          <tr>
            <td><?php echo htmlentities($result->UserId);?></td>
            <td><?php echo htmlentities($result->Username);?></td>
            <td><?php echo htmlentities($result->Fullname);?></td>
            <td><?php echo htmlentities($result->Position);?></td>
            <td><?php echo htmlentities($result->Gender);?></td>
            <td><?php echo htmlentities($result->Email);?></td>
            <td><?php echo htmlentities($result->Telephone);?></td>
            <td>Missing column!</td>
          </tr>
         </tbody>
         <?php }
          ?>
         <tfoot>
            <tr>
              <tr>
              <th>User Id</th>
              <th>Username</th>
              <th>Fullname</th>
              <th>Position</th>
              <th>Gender</th>
              <th>Email</th>
              <th>Telephone</th>
              <th>Action</th>
            </tr>
      </table>
<script>      
$(document).ready(function() {
    $('#dataTable').DataTable({
      'paging'      : true,
      'lengthChange': false,
      'searching'   : false,
      'ordering'    : true,
      'info'        : true,
      'autoWidth'   : false
    })
  });
</script>      
</body>          
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...