title: Datatable not working
body: <p>Hi all I am trying to use a datatable to reflect my database but I am not getting the result in the datatable. Help needed!!!</p>
  
  <p><strong>My Controller:-</strong>
  
  
  <pre><code>public function __construct() {
      parent::__construct();
      $this-&gt;load-&gt;library('Datatables');
      $this-&gt;load-&gt;library('table');
      $this-&gt;load-&gt;database();
  }
  function index()
  {
  
      //set table id in table open tag
      $tmpl = array ( 'table_open'  =&gt; '&lt;table id="big_table" border="1" cellpadding="2" cellspacing="1" class="mytable"&gt;' );
      $this-&gt;table-&gt;set_template($tmpl); 
  
      $this-&gt;table-&gt;set_heading('Student ID','Name','Student Code','Class');
  
      $this-&gt;load-&gt;view('subscriber_view');
  }
  //function to handle callbacks
  function datatable()
  {
      $this-&gt;datatables-&gt;SELECT ('*', 'class')
                       -&gt;unset_column('student_id')
                       -&gt; FROM ('students as s1')
                       -&gt;join ('student_class as s2','s1.class_id = s2.class_id'); 
  
      echo $this-&gt;datatables-&gt;generate();
  }
  </code></pre>
  
  <p>}</p>
  
  <p><strong>My View:-</strong></p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"&gt;
  
  &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt; 
  &lt;title&gt;Student Management&lt;/title&gt;
  &lt;meta http-equiv="content-type" content="text/html;charset=UTF-8"&gt;
  &lt;link rel="stylesheet" href="&lt;?php echo base_url();?&gt;assets/css/style.css" type="text/css" media="screen"/&gt;
  &lt;link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/ui-lightness/jquery-ui.css" type="text/css" media="screen"/&gt;   
  &lt;script type="text/javascript" src="&lt;?php echo base_url(); ?&gt;assets/js/jquery.dataTables.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="wrapper"&gt;
  &lt;script type="text/javascript"&gt;
          $(document).ready(function() {
      var oTable = $('#big_table').dataTable( {
          "bProcessing": true,
          "bServerSide": true,
          "sAjaxSource": '&lt;?php echo site_url('datatable'); ?&gt;',
                  "bJQueryUI": true,
                  "sPaginationType": "full_numbers",
                  "iDisplayStart ":20,
                  "oLanguage": {
              "sProcessing": "&lt;img src='&lt;?php echo base_url(); ?&gt;assets/images/ajax-loader_dark.gif'&gt;"
          },  
          "fnInitComplete": function() {
                  oTable.fnAdjustColumnSizing();
           },
                  'fnServerData': function(sSource, aoData, fnCallback)
              {
                $.ajax
                ({
                  'dataType': 'json',
                  'type'    : 'POST',
                  'url'     : sSource,
                  'data'    : aoData,
                  'success' : fnCallback
                });
              }
      } );
  } );
  &lt;/script&gt;
  &lt;h1&gt;Student Management&lt;/h1&gt;
  &lt;?php echo $this-&gt;table-&gt;generate(); ?&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>My Output:-</strong></p>
  
  <pre><code>{"sEcho":0,"iTotalRecords":2,"iTotalDisplayRecords":2,"aaData":[["1","Ahmad","Niza","451","AA1","A1"],["2","Ahmadi","Reza","452","AA2","A2"]],"sColumns":"*"}
  </code></pre>
  
  <p>What is wrong with this code?</p>
  
  <p>Thanks in advance for help.</p>