Ignited DataTables

[eluser]ηυмвєяσηє[/eluser]
Change lines below;

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);
        echo $data['result'];  // you can put here an ajax output view that includes "echo $result;"
    }
}

'sAjaxSource': 'www.mysite.com/post/test', the source must be json output..

[eluser]Tar_Tw45[/eluser]
[quote author="ηυмвєяσηє" date="1304946970"]Change lines below;

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);
        echo $data['result'];  // you can put here an ajax output view that includes "echo $result;"
    }
}

'sAjaxSource': 'www.mysite.com/post/test', the source must be json output..[/quote]

Thank you for your reply. But once I change the code like you said, this is the result I got

{"sEcho":0,"iTotalRecords":"63350","iTotalDisplayRecords":"63350","aaData":[["Front End Website Designer","Computer","2011-05-03, 10:34AM PDT","2011-05-03 10:56:03"],["WHIZ KID PROGRAMMER","Computer","2011-05-03, 10:04AM PDT","2011-05-03 10:56:04"],["I Need to Hire Web Developer \/ Designer to Clone a Website!","Computer","2011-05-03, 9:24AM PDT","2011-05-03 10:56:04"],["Salesforce.com set up\/training","Computer","2011-05-06, 11:00AM PDT","2011-05-06 12:00:04"],["Immediate - Web developer\/designer HTML5","Computer","2011-05-03, 8:43AM PDT","2011-05-03 10:56:05"],["Seeking WordPress Developer for 1-2 Week Project","Computer","2011-05-03, 7:50AM PDT","2011-05-03 10:56:05"],["Virus on Computer","Computer","2011-05-03, 2:53AM PDT","2011-05-03 10:56:06"],["HTML5 Trailblazer","Computer","2011-05-03, 12:00AM PDT","2011-05-03 10:56:06"],["Need software developers","Computer","2011-05-02, 11:03PM PDT","2011-05-03 10:56:06"],["Project Management for the Telecommunications","Computer","2011-05-02, 10:13PM PDT","2011-05-03 10:56:07"]],"sColumns":"title,category,post_date,add_time"}

[eluser]ηυмвєяσηє[/eluser]
Controller : post.php

Code:

class Post Extends CI_Controller{

    function listener() {
        $table = 'post';
        $columns = array('title', 'category', 'post_date','add_time');
        $index = 'id';
        $this->load->library('Datatables');
        $data['result'] = $this->datatables->generate($table, $columns, $index);
        echo $data['result'];

    }
    function test() {
        $this->load->view('backend/page/post/test');
    }

}

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/listener',
        '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>

It should work...

[eluser]Tar_Tw45[/eluser]
[quote author="ηυмвєяσηє" date="1304948480"]Controller : post.php

Code:

class Post Extends CI_Controller{

    function listener() {
        $table = 'post';
        $columns = array('title', 'category', 'post_date','add_time');
        $index = 'id';
        $this->load->library('Datatables');
        $data['result'] = $this->datatables->generate($table, $columns, $index);
        echo $data['result'];

    }
    function test() {
        $this->load->view('backend/page/post/test');
    }

}

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/listener',
        '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>

It should work...[/quote]

Great !! now it's working. But, I have more question.
1. I want to add the data as an invisible field so that user can search from that field also.

I did 'data' to the $columns array and { 'sName' : 'data', 'bVisible': false } to the aoColumns but it's not working. Do you know why?

2. Can I add some more text to each column like

"<div class='title_link'>some title</div>"

instead of just

"some title"

because I want to add some JS once a user click or move the mouse over it.

Very big thank to you !!!!

[eluser]ηυмвєяσηє[/eluser]
For adding invisible 'data' column from database ;

Code:

// controller :
       $columns = array('title', 'category', 'post_date','add_time','data');

// and js :
        'aoColumns' : [
            { 'sName': 'title'},
            { 'sName': 'category'},
            { 'sName': 'post_date'},
            { 'sName': 'add_time' },
            { 'sName' : 'data', 'bVisible': false }
        ],

if you wanna add it as custom column then search doesnt work.It is the limitation of using server-side prosessing..


2. Yes you can.
Example :

Code:

'aoColumns' : [
            { 'sName': 'title',"fnRender": function (o){return '[a href=url]' + o.aData[0] + '[/a]';} },
            { 'sName': 'category'},
            { 'sName': 'post_date'},
            { 'sName': 'add_time' }
        ],

For more information Check fnRender (http://www.datatables.net/usage/columns) :

[eluser]Tar_Tw45[/eluser]
[quote author="ηυмвєяσηє" date="1304951492"]For adding invisible 'data' column from database ;

Code:

// controller :
       $columns = array('title', 'category', 'post_date','add_time','data');

// and js :
        'aoColumns' : [
            { 'sName': 'title'},
            { 'sName': 'category'},
            { 'sName': 'post_date'},
            { 'sName': 'add_time' },
            { 'sName' : 'data', 'bVisible': false }
        ],

if you wanna add it as custom column then search doesnt work.It is the limitation of using server-side prosessing..


2. Yes you can.
Example :

Code:

'aoColumns' : [
            { 'sName': 'title',"fnRender": function (o){return '[a href=url]' + o.aData[0] + '[/a]';} },
            { 'sName': 'category'},
            { 'sName': 'post_date'},
            { 'sName': 'add_time' }
        ],

For more information Check fnRender (http://www.datatables.net/usage/columns) :[/quote]

Thank you again for your fast respond
What I asked for the first question is I did some adjustment to the code. Here they are

Code:

// controller :
       $columns = array('title', 'category', 'post_date','add_time','data');

// and js :
        'aoColumns' : [
            { 'sName': 'title'},
            { 'sName': 'category'},
            { 'sName': 'post_date'},
            { 'sName': 'add_time' },
            { 'sName': 'data', 'bVisible': false }
        ],

It's not working, no data was shown. Do you know I did I do wrong?
Btw, if I remove " 'bVisible': false ". Everything will works fine.

[eluser]ηυмвєяσηє[/eluser]
"bVisible" hides the column. Did you add extra column to your table ? If not,It may cause errors.

Code:

<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>
                <th style="width: 18%">Data</th>    &lt;!-- you should add the column here  --&gt;
            </tr>
        </thead>
        <tbody>
        <tr>                                
              <td>loading..</td>  
           </tr>  
        </tbody>
    </table>

[eluser]Tar_Tw45[/eluser]
[quote author="ηυмвєяσηє" date="1304952315"]"bVisible" hides the column. Did you add extra column to your table ? If not,It may cause errors.

Code:

<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>
                <th style="width: 18%">Data</th>    &lt;!-- you should add the column here  --&gt;
            </tr>
        </thead>
        <tbody>
        <tr>                                
              <td>loading..</td>  
           </tr>  
        </tbody>
    </table>

[/quote]

OK, it's working now.

For the second question, are these is the correct code format?

Code:

// controller :
       $columns = array('id', 'title', 'category', 'post_date','add_time','data');

// and js :
        'aoColumns' : [
            { 'sName': 'title', "fnRender": function (o){
                return "<div class='cl_post_title' id='" + o.aData[0] + "'>" + 0.aData[1] + "</div>";}},
            { 'sName': 'category'},
            { 'sName': 'post_date'},
            { 'sName': 'add_time' },
            { 'sName': 'data', 'bVisible': false }
        ],

o.aData[0] means 'id' right? Because, it is the post id for each post so that I can easily do something with this div tag.
Do I need to add more column due to the controller get 6 column but the JS provide only 5

[eluser]ηυмвєяσηє[/eluser]
you should use it like:

Code:

'aoColumns' : [
            { 'sName': 'id', 'bVisible': false }
            { 'sName': 'title', "fnRender": function (o){
                return "<div class='cl_post_title' id='" + o.aData[0] + "'>" + 0.aData[1] + "</div>";}},
            { 'sName': 'category'},
            { 'sName': 'post_date'},
            { 'sName': 'add_time' },
            { 'sName': 'data', 'bVisible': false }
        ],

and ofc u must add a column to html ^^

[eluser]Tar_Tw45[/eluser]
Thank alot!! You are my saviour, man!!