Ignited DataTables

#136 / May 19, 2011 6:12pm

ηυмвєяσηє

109 posts

we would love to hear your feedbacks..

another sample of basic usage.

// old version
   function list()
    {
      $table = 'test';
      $columns = array('id', 'name', 'age', 'gender');
      $index = 'id';
      $this->load->library('Datatables');
      $data['result'] = $this->datatables->generate($table, $columns, $index);
      $this->load->view('ajax', $data);
    }

// new one, easy and more readable, you can use benefits of method chaining
   function list()
    {
      $this->load->library('Datatables');
      $data['result'] = $this->datatables
            ->select('id, name, age, gender')
            ->from('test')
            ->using('id')
            ->generate();
      $this->load->view('ajax', $data);
    }

Regards,
Yusuf

#137 / May 19, 2011 11:29pm

cryogenix
90 posts

ok version 0.4 is now available at our git repository along with an updated wiki for the new usage guide.

please do report any bugs that you may find here along with any feedbacks and/or suggestions.

thanks =)

#138 / May 20, 2011 5:46am

johnwbaxter

651 posts

I’m having some serious issues with column ordering. Can anyone see where i’m going wrong here?

Controller:

function list_users_ajax()   {
       
        $table = 'users';
        $columns = array('id','email', 'created_on', 'authorised');
        $index = 'id';
        
        $joins['meta']['columns'] = array('first_name','last_name','company', 'licensee');   
        $joins['meta']['fk'] = 'users.id = meta.user_id';
        $options['joins'] = $joins;
        
        $custom_columns['users_name'] = array('<a href="http://user/profile/$1">$2 $3</a>', array('meta.user_id','meta.first_name', 'meta.last_name' ));
        $custom_columns['delete'] = array('<a href="http://auth/manual_edit_user/$1">Edit</a>', array('user.id'));
        $custom_columns['edit'] = array('<a href="http://auth/delete_user/$1">Delete</a>', array('user.id'));
        $options['custom_columns'] = $custom_columns;
       
        
        $this->load->library('Datatables');
        echo $this->datatables->generate($table, $columns, $index, $options); 
    }

View:

$(document).ready(function()
  {
    $('#list_users').dataTable
    ({
      "bProcessing": true,
      'bServerSide'    : true,
      'bAutoWidth'     : false,
      'sPaginationType': 'full_numbers',
      'sAjaxSource'    : '<?=base_url();?>admin/list_users_ajax',
      'aoColumns'      : 
      [

            { 'sName': 'users_name'},
            { 'sName': 'meta.company'},
            { 'sName': 'users.email' },
            { 'sName': 'meta.licensee' },
            { 'sName': 'users.created_on'},
            { 'sName': 'edit', 'bSortable' : false },
            { 'sName': 'delete','bSortable' : false }
        
      ],
      'fnServerData': function(sSource, aoData, fnCallback)
      {
        $.ajax
        ({
          'dataType': 'json',
          'type'    : 'POST',
          'url'     : sSource,
          'data'    : aoData,
          'success' : fnCallback
        });
      }
    });

<table border="0" cellpadding="4" cellspacing="0" id="list_users">
<thead>
<tr>
    <th>Users Name</th><th>Company</th><th>E-Mail</th><th>Licensee</th><th>Authorised</th><th>Date Created</th><th>Edit</th><th>Delete</th>
</tr>
</thead>
<tbody>                 
                        <tr>
                            <td>loading…</td>
                        </tr>            
</tbody>
</table>

I can make it all work if i do it manually, but i’d like to use this library.

Can anyone see why i can’t get the column ordering to work as i want it?

#139 / May 20, 2011 6:16am

ηυмвєяσηє

109 posts

hi,

We have updated the library, i recommend you to download it .my example below is in our new syntax

About your problem. You need to add all columns to your javascript and html as much as you choose in your controller. You have selected total 11 columns. u should define 11 columns html and javascript.

Controller.

function list_users_ajax()
    {        
    $this->load->library("Datatables");
      $this->datatables
      ->select('id, email, created_on, authorised') // 4 columns here
      ->from('users')
      ->using('id')
      ->join('meta', 'first_name, last_name, company, licensee', 'users.id = meta.user_id') // 4 columns here
      ->add_column('users_name', '<a href="http://user/profile/$1">$2 $3</a>', 'users.id, meta.first_name, meta.last_name')
      ->add_column('edit', '<a href="http://auth/manual_edit_user/$1">Edit</a>', 'users.id')
      ->add_column('delete', '<a href="http://auth/delete_user/$1">Delete</a>', 'users.id');
      // 3 custom columns
      // we have total 11 columns .
      echo $this->datatables->generate();
    }

Javascript

'aoColumns'      : 
      [
            { 'sName': 'users.id', 'bVisible' : false},
            { 'sName': 'meta.first_name', 'bVisible' : false},
            { 'sName': 'meta.last_name', 'bVisible' : false},                   
            { 'sName': 'users_name'},
            { 'sName': 'meta.company'},
            { 'sName': 'users.email' },
            { 'sName': 'meta.licensee' },
            { 'sName': 'users.authorised'},
            { 'sName': 'users.created_on'},
            { 'sName': 'edit', 'bSortable' : false },
            { 'sName': 'delete','bSortable' : false }
        
      ],

HTML

<table border="0" cellpadding="4" cellspacing="0" id="list_users">
<thead>
 <tr>
    <th>User ID</th>
    <th>first name</th>
    <th>last name</th>
    <th>Users Name</th>
    <th>Company</th>
    <th>E-Mail</th>
    <th>Licensee</th>
    <th>Authorised</th>
    <th>Date Created</th>
    <th>Edit</th>
    <th>Delete</th>
 </tr>
</thead>
<tbody>                 
 <tr>
    <td>loading…</td>
 </tr>            
</tbody>
</table>

#140 / May 20, 2011 6:22am
johnwbaxter
651 posts
Yes, i understand that i need to add all the columns, but the problem is that i don’t want First Name, Last Name, ID to be in the rendered html table. I have another column “users_name” that is first_name.’ ‘.last_name that i want instead. I also don’t want to show the ID column, but have to include it in the select so i can use it in my delete and edit custom columns.

How can i hide those three columns in datatables? If i try doing the code below the grid itself throws a js error.
Any ideas?
```
{ "sName": "meta.last_name" ,"bVisible": false}
```
#141 / May 20, 2011 6:25am

ηυмвєяσηє
109 posts

i have already hide them with “bVisible”: false.

Are you using Firebug ? If you are, can you post the error here pls?
#142 / May 20, 2011 6:27am

Pegasus275
15 posts

try to use mDataProp: name of column

This is not good idea to define all columns from select.

I write post about json structure and mDataProp
#143 / May 20, 2011 6:27am

johnwbaxter
651 posts

Yes, sorry, i missed that!

Below is the error i get (i’ve copied your code exactly):

b is null -
http://shop.intranet.com/assets/js/jquery.datatables.min.js
Line 61

I’m using datatables 1.7.6
#144 / May 20, 2011 6:32am

Pegasus275
15 posts

http://www.datatables.net/blog/Extended_data_source_options_with_DataTables
#145 / May 20, 2011 6:32am

johnwbaxter
651 posts

Wait, i’ve just realised that there was an error in the php code. It works perfectly now.

Thank you very very much ηυмвєяσηє i was banging my head against the wall on that one.

Thanks again!!!
#146 / May 20, 2011 6:35am

ηυмвєяσηє
109 posts

im glad that u solved ur problem..

if you encountered any other issue, please report them with your suggestions ^^

Pegasus, he is using 1.7.6. neither 1.7.6 and our library doesnt support mDataprop yet.

When 1.8 releases, we are planning to adding more features like mDataprop.
#147 / May 20, 2011 6:50am

johnwbaxter
651 posts

You could help me with one last thing if you don’t mind!

I’m trying to add this custom column:

->add_column(‘created_date’, ‘date(‘d-m-Y’,$1)’, ‘users.created_on’)

But obviously it isn’t working. How can i include that $1 in the date function? Any ideas?
#148 / May 20, 2011 6:55am

ηυмвєяσηє
109 posts

hm. you want to apply a function on returned data. it is not supported currently.

i advise you to use fnRender property for that. Some javascript date functions will do the thing u want.

go back a few pages here. You will find some examples ^^
#149 / May 20, 2011 6:56am

johnwbaxter
651 posts

Okay cool, thanks again!

#150 / May 22, 2011 9:34am

ηυмвєяσηє

109 posts

You could help me with one last thing if you don’t mind!

I’m trying to add this custom column:

->add_column(‘created_date’, ‘date(‘d-m-Y’,$1)’, ‘users.created_on’)

But obviously it isn’t working. How can i include that $1 in the date function? Any ideas?

i’m making a callback function for this. some examples:

->add_column('created_date', '$1', 'callback_date(d-m-Y|created_on)')
->add_column('time', '$1', 'callback_date(M-d-Y H:i:s|1305927001)')
->add_column('test1', '$1', 'callback_trim(somecolumn)')
->add_column('test2', '$1', 'callback_str_replace(search|replaced|search content)')
->add_column('test3', '$1', 'callback_str_replace(a|b|column)')

->add_column('test', 'id: $1 and trimmed name: $2', 'id, callback_trim(username)')
->add_column('email', '$1', 'callback_substr(email|0|3)')
->add_column('edit', '$1', 'callback_strtoupper(username)')  
->add_column('edit', '$1', 'callback_strtolower(username)')  
->add_column('test', '$1', 'callback_nl2br(somecolumn)')
->add_column('test', '$1', 'callback_number_format(1234.567|2)')
->add_column('test', '$1', 'callback_number_format(somecolumn|2)')  
->add_column('edit', '$1 $2', 'users.username,callback_number_format(1234.567|2|\,| )') //output : "{username} 1 234,57"

still working on it. any suggestions or ideas will be welcomed ^^
When i finish testing, i will update git.

Edit:
i also wanna add a method that makes possible to modify columns data. For example if we want to hide some parts of data for some security reasons:

->edit_column('email','$1..@..', 'callback_substr(email|0|2)')

edit2: ->edit_column done 😊 it needs some tests before release
edit3: since we have updated the library to v0.5 ‘table.column’ variables turns to ‘column’

Regards,
Yusuf

Thread

ηυмвєяσηє

cryogenix

johnwbaxter

ηυмвєяσηє

johnwbaxter

ηυмвєяσηє

Pegasus275

johnwbaxter

Pegasus275

johnwbaxter

ηυмвєяσηє

johnwbaxter

ηυмвєяσηє

johnwbaxter

ηυмвєяσηє

Username

Password

Thread