CODEWITHSUNDEEP
phpjquerydatatables
Mohamed Radhi Guennichi
Mohamed Radhi Guennichi

Reputation: 737

Datatable: update table in realtime with animation

I am trying to implement functionality where it updates data in real time of my datatable with animation just like facebook ticker (last friends activities on the sidebar) but no solution found !

model file :Topic.php

public function getTopics()
{
   return $this->db->select('SELECT * FROM topics');
}

index file:

<table id="example" class="table table-striped table-bordered" cellspacing="0">
        <thead>
            <tr>
                <th>ID</th>
                <th>Sujet</th>
                <th>Pièce jointe</th>
                <th>Coordonnées</th>
            </tr>
        </thead>

        <tbody>

<!--content table -->
      <?php
      if($data['topics']){
        foreach($data['topics'] as $row){
          echo '<tr>';
          echo '<td>'.$row->id.'</td>';
          echo '<td>'.$row->subject.'</td>';
          echo '<td>'.$row->document.'</td>';
          echo '<td>'.$row->x.','.$row->y.'</td>';
          echo '</tr>';
        }
      }
       ?>

        </tbody>

        </table>

controller:

$data['topics'] = $this->_topic->getTopics();
                $data['js'] = "<script>
                                  $(document).ready(
                                    function ()
                                    {
                                      $('#example').DataTable().ajax.reload();;
                                    }
                                  );
                               </script>";

View::renderTemplate('header');
View::render('account/topics', $data);
View::renderTemplate('footer', $data);

Upvotes: 1

Views: 4566

Answers (2)

Kisaragi
Kisaragi

Reputation: 2218

You can use setInterval() to check for topics every x seconds, minutes etc:

setInterval(function(){
    $.ajax({
         type: 'GET',
         url: 'path/to/query',
         success:function(data){
             if(data != ""){
                $('#datatable-table').dataTable()._fnAjaxUpdate();//reloads table, syntax will differ based on datatables version 
             }
         }
    })
}, 5000);//every 5 seconds

This is only an example. You'll need to plan (for example, what happens when the response takes longer than 5 seconds?)

Upvotes: 2

Aimal Azmi
Aimal Azmi

Reputation: 141

This is called real time functionality! There are a few days to do it!

  1. Use ajax to update data and setInterval on the ajax function for maybe like 5s or 10s whatever you like.
  2. The other way that I'd do is by using getting an API Pusher. Pusher is a real time functionality web app! It can be used to achieve real time functionality on your site!

Upvotes: 3

Related Questions