title: Populating ajax data table with codeigniter
body: <p>i have a problem regarding populating my data using jquery datatables. I am using a codeigniter framework and already have a response in controller and encoded my data in a json format. I don't know why my table is still empty and already called the ajax to populate my data table. although it returns response with my data when i manually type it in my URL but i cant populate my data table in it.</p>
  <p>Here is my view table code code:</p>
  <pre><code>&lt;div class=&quot;table-responsive&quot;&gt;
          &lt;table class=&quot;table table-striped table-hover table-bordered&quot; id=&quot;tbl_users&quot; style=&quot;width: 100%;&quot;&gt;
                 &lt;!--  &lt;a name='btn_add' id='btn_add' class='btn btn-sm btn-primary' onclick=&quot;add_deduction_title();&quot;&gt;&lt;span class='fa fa-plus'&gt;&lt;/span&gt; Add Deduction title&lt;/a&gt; --&gt;
                  &lt;thead class=&quot;header-th&quot;&gt;
                          &lt;tr&gt;
                                  &lt;th class=&quot;header-th&quot;&gt;Full name&lt;/th&gt;
                                  &lt;th class=&quot;header-th&quot;&gt;Email&lt;/th&gt;
                                  &lt;th class=&quot;header-th&quot;&gt;IP Address&lt;/th&gt;
                                  &lt;th class=&quot;header-th&quot;&gt;Role Group&lt;/th&gt;
                                  &lt;th class=&quot;header-th&quot;&gt;Status&lt;/th&gt;
                                  &lt;th class=&quot;header-th&quot;&gt;Date Created&lt;/th&gt;
                                  &lt;th class=&quot;header-th&quot;&gt;Actions&lt;/th&gt;                                                            
                          &lt;/tr&gt;
                  &lt;/thead&gt;
                  &lt;tbody&gt;&lt;/tbody&gt;
          &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  <p>Here is my controller code:</p>
  <pre><code>public function get_all_users() {
      $list = $this-&gt;user_model-&gt;getAllUsers();
      $data = array();
      foreach ($list as $value) {
          $fullname = $value-&gt;first_name . &quot; &quot; . $value-&gt;middle_name . &quot; &quot; . $value-&gt;last_name;
  
          if($value-&gt;active == 0) {
              $active_status = '&lt;p style=&quot;color:red;&quot;&gt;PENDING&lt;/p&gt;';
          }else if($value-&gt;active == 1) {
              $active_status = '&lt;p style=&quot;color:green;&quot;&gt;ACTIVATED&lt;/p&gt;';
          }
          
          if($value-&gt;group_id == 2) {
              $group_name = 'LGU';
          }else if($value-&gt;group_id == 3) {
              $group_name = 'Combase/FO';
          }
  
          $row = array();  
          $row[] = $fullname;
          $row[] = $value-&gt;email;
          $row[] = $value-&gt;ip_address;
          $row[] = $group_name;
          $row[] = $active_status;
          $row[] = $value-&gt;created_on;
          $row[] = '&lt;button onclick=&quot;adminview_profile('.&quot;'&quot;.$value-&gt;id.&quot;'&quot;.');&quot; class=&quot;btn btn-danger btn-sm&quot;&gt;View Profile&lt;/button&gt;';
  
          $data[] = $row;
      }
      $output = array(   
          &quot;data&quot; =&gt; $data,
      );
      echo json_encode($output);
  }
  </code></pre>
  <p>and finally here is my js code to populate the said data table which returns data but doesn't populate my table:</p>
  <pre><code>$(document).ready(function() {
      var spiner = '&lt;div class=&quot;fa fa-spinner fa-spin&quot; style=&quot;font-size: 26px&quot;&gt;&lt;/div&gt;';
      const windowLoc = $(location).attr('pathname');
      let url_global = windowLoc.split(&quot;/&quot;);
      
      // switch(url_global[2]){        /* live */
      switch(url_global[3]){           /* local */
          case &quot;user-manager&quot; :                           
              load_users_content();   
              break;      
      }
      
      /*user-manager*/    
      function load_users_content() {
          var column_order = [];
          var column_center = [];
          var column_disable_sort = [];
  
          tbl_users_data = [{name: '', value: ''}];
  
          tbl_users = $('#tbl_users').DataTable({                 
              responsive: true,
              bProcessing: true,
              bServerSide: true,
              deferRender: true,
              order: column_order,
              columnDefs: [
                      { className: 'text-center', targets: column_center },
                      { orderable: false, targets: column_disable_sort },
              ],
              sServerMethod: 'POST',
              sAjaxSource: base_url+'admin/get_all_users',
              fnServerParams: function(aoData) {
                      $.each(tbl_users_data, function(i, field) {
                              aoData.push({ name: field.name, value: field.value });
                      });
              },
              fnDrawCallback: function() {
  
              }
          });
      }
      /*user-manager*/
  
      
  });
  </code></pre>