title: Datatable api.draw is not woking. How can i define the columns and render each row?
body: <p>Currently appending each row, but without the draw method pagination doesn't show. How can the column be defined and with the defined column need to render rows. What am I doing wrong here ?</p>
  
  <p>//ignore this repeated section .
  Currently appending each row, but without the draw method pagination doesn't show. How can the column be defined and with the defined column need to render rows. What am I doing wrong here ?</p>
  
  <p>javascript:</p>
  
  <pre><code>&lt;script&gt;
  $(function () {
  
      var loading_image_src = '&lt;?php echo base_url() ?&gt;' + 'project_base_assets/base_demo_images/loading.gif';
      var loading_image = '&lt;img src="' + loading_image_src + ' "&gt;';
      var loading_span = '&lt;span&gt;&lt;i class="fa fa-refresh fa-spin fa-4x" aria-hidden="true"&gt;&lt;/i&gt;&lt;/span&gt; ';
      var loading_text = "&lt;div style='font-size:larger' &gt;&lt;?php echo lang('loading_text')?&gt;&lt;/div&gt;";
  
      $('#user-table').DataTable({
          "processing": true,
          "serverSide": true,
          "paging": true,
          "pagingType": "full_numbers",
          "lengthChange": true,
          "searching": true,
          "ordering": true,
          "info": true,
          "autoWidth": true,
          "language": {
              processing: loading_image + '&lt;br&gt;' + loading_text
          },
  
          'columnDefs': [{
              // The `data` parameter refers to the data for the cell (defined by the
              // `data` option, which defaults to the column being worked with, in
              // this case `data: 0`.
              "render": function (data, type, row) {
  
                  alert(data);
                  console.log(data);
                  console.log(type);
                  console.log(row);
  
                  return data;
              },
              "targets": 0
          }, {orderable: false, targets: [3, 7]}/*, { visible: false, targets: [3,4,5] }*/
          ],
  
          "aaSorting": [[5, 'asc']],
  
          "ajax": {
              url: "&lt;?php echo base_url() . 'users/auth/get_users_by_ajax' ?&gt;",                    // json datasource
              type: "post",
              success: function (res) {
  
                  $('#user-table-tbody').children("tr").remove();
  
                  console.log(res.last_query);
                   console.log(res.common_filter_value);
                   console.log(res.specific_filters);
                   console.log(res.order_column);
                   console.log(res.order_by);
                   console.log(res.limit_start);
                   console.log(res.limit_length);
  
                  $('#user-table_processing').css('display', 'block');
  
                  for (var i = 0; i &lt; res.data.users.length; i++) {
  
                      var col = new Array();
                      col[0] = '&lt;td&gt;' + res.data.users[i].first_name + '&lt;/td&gt;';
                      col[1] = '&lt;td&gt;' + res.data.users[i].last_name + '&lt;/td&gt;';
                      col[2] = '&lt;td title="' + res.data.users[i].email + '" &gt;' + res.data.users[i].email + '&lt;/td&gt;';
  
                      //col-3 starts
                      var group_names = '';
                      for (var incr = 0; incr &lt; res.data.users[i].groups.length; incr++) {
                          group_names += res.data.users[i].groups[incr].name;
  
                          group_names += '&lt;br&gt;';
                      }
                      col[3] = '&lt;td&gt;' + group_names + '&lt;/td&gt;';
                      //col-3 ends
  
                      //col-4 starts
                      var status_span = '';
                      var status_anchor = '';
                      var status_anchor_span = '';
                      var tooltip_deactivate_text = '&lt;?php echo lang('tooltip_deactivate_text') ?&gt;';
                      var tooltip_activate_text = '&lt;?php echo lang('tooltip_activate_text') ?&gt;';
                      var deactivate_url = '&lt;?php echo base_url() ?&gt;' + 'users/auth/deactivateUser/' + res.data.users[i].id;
                      var activate_url = '&lt;?php echo base_url() ?&gt;' + 'users/auth/activateUser/' + res.data.users[i].id;
                      col[4] = '';
  
                      if (res.data.users[i].active == 1) {
                          status_span = '&lt;span class="label label-primary"&gt;' + '&lt;?php echo lang('status_active_text')?&gt;' + '&lt;/span&gt;';
                          status_anchor_span = '&lt;span class="label label-danger"&gt;&lt;i class="fa fa-check" aria-hidden="true"&gt;&lt;/i&gt;&lt;/span&gt;';
                          status_anchor = '&lt;a title="' + tooltip_deactivate_text + '" ' + ' href="' + deactivate_url + '" ' + '&gt;' + status_anchor_span + '&lt;/a&gt;';
                          col[4] = '&lt;td data-sort="' + res.data.users[i].active + '"&gt; ' + status_span + '&amp;nbsp; &amp;nbsp;' + status_anchor + '&lt;/td&gt;';
                      } else {
                          status_span = '&lt;span class="label label-primary"&gt;' + '&lt;?php echo lang('status_inactive_text')?&gt;' + '&lt;/span&gt;';
                          status_anchor_span = '&lt;span class="label label-success"&gt;&lt;i class="fa fa-check" aria-hidden="true"&gt;&lt;/i&gt;&lt;/span&gt;';
                          status_anchor = '&lt;a title="' + tooltip_activate_text + '" ' + ' href="' + activate_url + '" ' + '&gt;' + status_anchor_span + '&lt;/a&gt;';
                          col[4] = '&lt;td data-sort="' + res.data.users[i].active + '"&gt; ' + status_span + '&amp;nbsp; &amp;nbsp;' + status_anchor + '&lt;/td&gt;';
                      }
  
                      //col[4] = '&lt;td&gt;' + res.data.users[i].active + '&lt;/td&gt;';
                      //col-4 ends
  
                      col[5] = '&lt;td data-sort="' + res.data.users[i].created_on_timestamp + '" &gt;' + res.data.users[i].created_on + '&lt;/td&gt;';
                      col[6] = '&lt;td data-sort="' + res.data.users[i].last_login_timestamp + '" &gt;' + res.data.users[i].last_login + '&lt;/td&gt;';
  
                      //col=7 starts
                      var tooltip_view_text = '&lt;?php echo lang('tooltip_view_text') ?&gt;';
                      var view_url = '&lt;?php echo base_url() ?&gt;' + 'user_profile_module/user_profile_overview/' + res.data.users[i].id;
                      var view_anchor = '&lt;a title="' + tooltip_view_text + '" ' + ' href="' + view_url + '" '+'style="color:#2b2b2b"' + '&gt;' + '&lt;i class="fa fa-eye fa-lg " aria-hidden="true"&gt;&lt;/i&gt;' + '&lt;/a&gt;';
  
                      //message unavailable
                      var tooltip_message_text = '&lt;?php echo lang('tooltip_message_text') ?&gt;';
                      var message_url = '&lt;?php echo base_url() ?&gt;';
                      var message_anchor = '&lt;a title="' + tooltip_message_text + '" ' + ' href="' + message_url + '" '+'style="color:#2b2b2b"' + '&gt;' + '&lt;i class="fa fa-envelope-o fa-lg" aria-hidden="true"&gt;&lt;/i&gt;' + '&lt;/a&gt;';
  
                      var tooltip_edit_text = '&lt;?php echo lang('tooltip_edit_text') ?&gt;';
                      var edit_url = '&lt;?php echo base_url() ?&gt;'+'users/auth/edit_user/'+ res.data.users[i].id;
                      var edit_anchor = '&lt;a title="' + tooltip_edit_text + '" ' + ' href="' + edit_url + '" '+'style="color:#2b2b2b"' + '&gt;' + '&lt;i class="fa fa-pencil-square-o fa-lg" aria-hidden="true"&gt;&lt;/i&gt;' + '&lt;/a&gt;';
  
                      var tooltip_delete_text = '&lt;?php echo lang('tooltip_delete_text') ?&gt;';
                      var delete_url = '&lt;?php echo base_url() ?&gt;'+'users/auth/deleteUser/'+res.data.users[i].id;
                      var delete_anchor = '&lt;a class="confirmation" title="' + tooltip_delete_text + '" ' + ' href="' + delete_url + '" '+'style="color:#2b2b2b"' + '&gt;' + '&lt;i class="fa fa-trash-o fa-lg" aria-hidden="true"&gt;&lt;/i&gt;' + '&lt;/a&gt;';
  
                      col[7] = '&lt;td&gt;' + view_anchor+'&amp;nbsp; &amp;nbsp;'+edit_anchor+'&amp;nbsp; &amp;nbsp;'+delete_anchor+'&amp;nbsp;&amp;nbsp;'+'&lt;/td&gt;';
                      //col-7 ends
  
                      var row = '&lt;tr&gt;';
  
                      for (var inc = 0; inc &lt; col.length; inc++) {
  
                          row += col[inc];
                      }
  
                      row += '&lt;/tr&gt;';
  
  
                      //console.log(row);
                      $('#user-table-tbody').append(row);
  
  
                  }
  
                  //hide loading after appending or drawing rows
                  $('#user-table_processing').css('display', 'none');
  
              }
          }
  
      }).draw();
  });
  </code></pre>
  
  <p></p>
  
  <p>php:</p>
  
  <pre><code>public function getUsersByAjax()
  {
      $requestData = $_REQUEST;
  
      $columns[0] = 'first_name';
      $columns[1] = 'last_name';
      $columns[2] = 'email';
      $columns[3] = 'group';
      $columns[4] = 'active';
      $columns[5] = 'created_on';
      $columns[6] = 'last_login';
      $columns[7] = 'actions';
  
      $common_filter_value = false;
      $order_column = false;
  
      $specific_filters = array();
      //$specific_filters = false;
  
      if (!empty($requestData['columns'][0]['search']['value'])) {
          $specific_filters['first_name'] = $requestData['columns'][0]['search']['value'];
      }
  
      if (!empty($requestData['columns'][1]['search']['value'])) {
          $specific_filters['last_name'] = $requestData['columns'][1]['search']['value'];
      }
  
      if (!empty($requestData['columns'][2]['search']['value'])) {
          $specific_filters['email'] = $requestData['columns'][2]['search']['value'];
      }
  
      if (!empty($requestData['columns'][3]['search']['value'])) {
          $specific_filters['group'] = $requestData['columns'][3]['search']['value'];
      }
  
      if (!empty($requestData['columns'][4]['search']['value'])) {
          $specific_filters['active'] = $requestData['columns'][4]['search']['value'];
      }
  
  
      if (!empty($requestData['search']['value'])) {
          $common_filter_value = $requestData['search']['value'];
      }
  
      if ($specific_filters == true || !empty($specific_filters)) {
          $common_filter_value = false;       //either search with specific filters or with common filter
      }
  
      $order['column'] = $columns[$requestData['order'][0]['column']];
      $order['by'] = $requestData['order'][0]['dir'];
  
  
      $limit['start'] = $requestData['start'];
      $limit['length'] = $requestData['length'];
  
      $totalData = $this-&gt;Custom_auth_model-&gt;countUsers($common_filter_value, $specific_filters);
  
      if ($common_filter_value == true || $specific_filters == true) {
          $totalFiltered = $totalData;
      } else {
          $totalFiltered = $this-&gt;Custom_auth_model-&gt;countUsers($common_filter_value = false, $specific_filters = false);
      }
  
      $totalFiltered = $totalData;  // when there is no search parameter then total number rows = total number filtered rows.
  
      $data['users'] = $this-&gt;Custom_auth_model-&gt;getUsers($common_filter_value, $specific_filters,$order,$limit);
      $last_query = $this-&gt;db-&gt;last_query();
  
      foreach ($data['users'] as $k =&gt; $user) {
          $data['users'][$k]-&gt;groups = $this-&gt;ion_auth-&gt;get_users_groups($user-&gt;id)-&gt;result();
  
      }
  
      $this-&gt;load-&gt;library('custom_datetime_library');
  
  
      $i = 0;
      foreach ($data['users'] as $a_user) {
  
          $data['users'][$i]-&gt;created_on_timestamp = $a_user-&gt;created_on;
          $data['users'][$i]-&gt;last_login_timestamp = $a_user-&gt;last_login;
  
          if ($a_user-&gt;created_on == 0) {
              $a_user-&gt;created_on = $this-&gt;lang-&gt;line('creation_time_unknown_text');
          } else {
              $a_user-&gt;created_on =
                  $this-&gt;custom_datetime_library
                      -&gt;convert_and_return_TimestampToDateAndTime($a_user-&gt;created_on);
          }
  
          if ($a_user-&gt;last_login == 0) {
              $a_user-&gt;last_login = $this-&gt;lang-&gt;line('never_logged_in_text');
          } else {
              $a_user-&gt;last_login =
                  $this-&gt;custom_datetime_library
                      -&gt;convert_and_return_TimestampToDateAndTime($a_user-&gt;last_login);
          }
  
          $i++;
  
      }
  
      $json_data['draw'] = intval($requestData['draw']);
  
      /* $totalData: for every request/draw by clientside ,
       they send a number as a parameter, when they recieve a response/data they first check the draw number,
       so we are sending same number in draw.*/
      $json_data['recordsTotal'] = intval($totalData); // total number of records after searching, if there is no searching then totalFiltered = totalData
      $json_data['recordsFiltered'] = intval($totalFiltered);
  
      $json_data['data'] = $data;
  
      // checking requests in console.log();
      $json_data['last_query'] = $last_query;
      $json_data['common_filter_value'] = $common_filter_value;
      $json_data['specific_filters'] = $specific_filters;
      $json_data['order_column'] = $order['column'];
      $json_data['order_by'] = $order['by'];
      $json_data['limit_length'] = $limit['length'];
      $json_data['limit_start'] = $limit['start'];
  
  
      echo json_encode($json_data);
  }
  </code></pre>