Ignited DataTables

[eluser]Tar_Tw45[/eluser]
I'm trying to use Ignited DataTables. Here are my code files ..

Controller : post.php

Code:

class Post Extends CI_Controller{

    function test() {
        $table = 'post';
        $columns = array('title', 'category', 'post_date','add_time');
        $index = 'id';
        $this->load->library('Datatables');
        $data['result'] = $this->datatables->generate($table, $columns, $index);
        if(count($data)){
            $this->load->view('backend/page/post/test', $data);
        }
    }

}

View : test.php (located in view/backend/page/post/)

Code:

[removed]
$(document).ready(function(){
    $('#test_table').dataTable({
        'bServerSide'    : true,
        'bAutoWidth'     : false,
        'sPaginationType': 'full_numbers',
        'sAjaxSource': 'www.mysite.com/post/test',
        'aoColumns' : [
            { 'sName': 'title'},
            { 'sName': 'category'},
            { 'sName': 'post_date'},
            { 'sName': 'add_time' },
        ],
        'fnServerData': function(sSource, aoData, fnCallback){
            $.ajax({
                'dataType': 'json',
                'type': 'POST',
                'url': sSource,
                'data': aoData,
                'success': fnCallback
            });
        },
    });
});
[removed]

<fieldset>
    <legend>
        <b>Search Result</b>
    </legend>
    <table cellpadding="0" cellspacing="0" border="0" class="display"
        id='test_table'>
        <thead>
            <tr>
                <th style="width: 46%">Title</th>
                <th style="width: 18%">Category</th>
                <th style="width: 18%">Post Date</th>
                <th style="width: 18%">Added Date</th>
            </tr>
        </thead>
        <tbody>
        <tr>                                
              <td>loading..</td>  
           </tr>  
        </tbody>
        <tfoot>
            <tr>
                <th>Title</th>
                <th>Category</th>
                <th>Post Date</th>
                <th>Added Date</th>
            </tr>
        </tfoot>
    </table>
</fieldset>

Main Page : main.php

Code:

[removed]
    $('#test_button').click(function(){
        $.post('post/test', function(data){
            $('#target_area').html(data);
        });
    });
[removed]

<div class="navigation_button" id='test_button'>Test DataTable with CL Framework</div>
<div class="content_area" id="target_area"></div>

What I want them to do is
1. Main.php will contains 2 div tags. When I clicked the first one, it will call the post controller.
2. In the post controller, It should get data from post table. Each entry of data will contains 4 column. Then send that data to the view file located in "backend/page/post/"
3. test.php will recieve data from controller and generate the page content to show in the Main.php
4. Once test.php finished data generate. The page content will send back to the callback function in Main.php's JavaScript code. Then, the page content will be put into the seconde div tag of Main.php and generate to DataTable

My problem is every thing seems to work fine but none of the data entry were shown. My MySQL database contains 70xxx post entries so this wasn't because of the database was empy. I copied most of the code in controller and view from the Ignited DataTables wiki. I don't know what did I do wrong. Can you guys help me out? Very thank in advance.