Как реализовать окно поиска и упорядочивание в DataTables - PullRequest
Новая
       29

Как реализовать окно поиска и упорядочивание в DataTables

0 голосов
/ 02 августа 2020

Я пытаюсь подключить окно поиска из DataTables. net с моими данными. Я сделал базу данных mySQL, подключил ее через PHP и представил ее на странице с поддержкой AdminLTE и DataTables. net.

Я использовал этот учебник как учебный материал для своего проекта: https://codinginfinite.com/getting-started-web-application-php-mysql-tutorials/

Теперь я успешно загрузил свои данные с сервера SQL в html datatable, но теперь я не могу найти решение, как связать эти данные в таблице с окно поиска (или функция заказа и просмотра). Каждый раз, когда я пытаюсь найти или отсортировать свои данные, в результате я получаю пустую таблицу данных. Пейджинг также не работает, и таблица всегда отображается с полным количеством строк.

Кто-нибудь может помочь, пожалуйста?

  1. Это мой код для страницы php, где таблица (в id = "tablica") загружена успешно. В конце этого кода находится ajax json скрипт для получения данных из mySQL базы данных. 
    <?php
      $content = '<div class="row">
                <div class="col-xs-12">
                <div class="box">
                  <div class="box-header">
                    <h3 class="box-title">Popis</h3>
                  </div>
                  <!-- /.box-header -->
                  <div class="box-body">
                    <table id="tablica" class="table table-bordered table-hover">
                      <thead>
                      <tr>
                        <th>Id</th>
                        <th>Naziv</th>
                        <th>Autori</th>
                        <th>Referenca</th>
                        <th>Datum u</th>
                        <th>Datum a</th>
                        <th>Pripada</th>
                        <th>Action</th>
                      </tr>
                      </thead>
                      <tbody>
                      </tbody>
                      
                    </table>
                  </div>
                  <!-- /.box-body -->
                </div>
                <!-- /.box -->
              </div>
            </div>';
      $header = '<h1> Popis <small>Ovdje se nalazi lista.</small> </h1>';
      include('../master.php');
    ?>
    
    <!-- page script -->
<script>
  $(document).ready(function(){
    $.ajax({
        type: "GET",
        url: "../api/porodica/read.php",
        dataType: 'json',
        success: function(data) {
            var response="";
            for(var user in data){
                response += "<tr>"+
                "<td>"+data[user].id_p+"</td>"+
                "<td>"+data[user].naziv_p+"</td>"+
                "<td>"+data[user].autor+"</td>"+
                "<td>"+data[user].ref+"</td>"+
                "<td>"+data[user].red_id+"</td>"+
                "<td>"+data[user].datum_u+"</td>"+
                "<td>"+data[user].datum_a+"</td>"+
                
                "<td><a href='update.php?id="+data[user].id_p+"'>Edit</a> | <a href='#' onClick=Remove('"+data[user].id_p+"')>Remove</a></td>"+
                "</tr>";
            }
            $(response).appendTo($("#tablica"));
        }
    });
  });

</script>
Это конец моего мастера. php файла. Я включил все необходимые файлы css и js для работы DataTables. 
     <!-- ./wrapper -->
    <!-- REQUIRED JS SCRIPTS -->
    <!-- jQuery 3 -->
    <script src="../bower_components/jquery/dist/jquery.min.js"></script>
    <!-- Bootstrap 3.3.7 -->
    <script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
    <!-- DataTables -->
    <script src="../bower_components/datatables.net/js/jquery.dataTables.min.js"></script>
    <script src="../bower_components/datatables.net-bs/js/dataTables.bootstrap.js"></script>
    <script src="../bower_components/datatables.net-bs/js/app.min.js"></script>  
    <script>  
$(function () {  

$('#tablica').DataTable({  
"pageLength": 10,  
"paging": true,  
"lengthChange": false,  
"searching": true,  
"ordering": true,  
"info": false,
"autoWidth": false  
});  
});  
</script>

1 Ответ

1 голос
/ 03 августа 2020

Мне удалось найти решение. Проблема заключалась в том, что ajax имел природу ansyn c. ajax считывал данные в таблицу ПОСЛЕ инициализации DataTables, и DataTables думали, что рассматриваемая таблица все время была пустой.

Я решил проблему после того, как представил код инициализации DataTables после основного ajax код с: complete (я переместил его из master. php на страницу. php, которые имеют html элемент таблицы и присоединил его в / после сценария ajax json).

Я оставляю ссылку, по которой нашел решение: https://datatables.net/forums/discussion/50329/first-time-using-datatables-no-data-available-in-table

И мой код, который сейчас работает: 

<script>

  $(document).ready(function(){
    $.ajax({
        type: "GET",
        url: "../api/porodica/read.php",
        dataType: 'json',
        success: function(data) {
            var response="";
            for(var user in data){
                response += "<tr>"+
                "<td>"+data[user].id_p+"</td>"+
                "<td>"+data[user].naziv_p+"</td>"+
                "<td>"+data[user].autor+"</td>"+
                "<td>"+data[user].referenca+"</td>"+
                "<td>"+data[user].red_id+"</td>"+
                "<td>"+data[user].datum_u+"</td>"+
                "<td>"+data[user].datum_a+"</td>"+
                
                "<td><a href='update.php?id="+data[user].id_p+"'>Edit</a> | <a href='#' onClick=Remove('"+data[user].id_p+"')>Remove</a></td>"+
                "</tr>";
            }
            $(response).appendTo($("#tablica"));
        },
        
        complete: function () {

$("#tablica").DataTable({ 
"pageLength": 10,  
"paging": true,  
"lengthChange": false,  
"searching": true,  
"ordering": true,  
"info": false, 
"autoWidth": false  
});  
}


    });
  });
  
  
</script>
...