Yii 1.1: tablesorter

An extension to convert the default grid view to beautiful table style with jquery filters.
15 followers

jQuery tablesorter extension for YII, for turning a standard grid view into a sortable table without page refreshes. The main aspects of this extension are given below.

  • Fields will be listed as similar to gridview with unique bootstrap style.
  • Default sort filters available with ajax.
  • We can give options like select box, text box, empty for the filters.
  • There are options for relation values as well.

Requirements

I have tested the extension in YII 1.1.14. It should work fine on YII 1.1 or above...

Usage

Step 1

The first step was to download the extension and move it inside your application/protected/extension/ folder.

Step 2

The second step was in your controller created after CRUD. Let's assume you have a controller named PostsController in application/protected/controllers/PostsController.php. Go to actionAdmin() method inside the controller, the default method should look like this below.

public function actionAdmin()
{
    $model=new Posts('search');
    $model->unsetAttributes();  // clear any default values
    if(isset($_GET['Posts']))
    $model->attributes=$_GET['Posts'];
 
    $this->render('admin',array(
        'model'=>$model,
    ));
}

Modify it as like here.

public function actionAdmin()
{
    $records=Posts::model()->findAll();
    $this->render('admin',array(
        'records'=>$records,
    )); 
}

Step 3

The final step was in your view, go to application/protected/views/posts/admin.php. Let's assume we have fields title, description, content and user_id fields. The default grid view should like this.

$this->widget('zii.widgets.grid.CGridView', array(
    'id'=>'posts-grid',
    'dataProvider'=>$model->search(),
    //'cssFile' => $grid_css,
    //'filter'=>$model,
    'columns'=>array(
        'id',
        'title',
        'description',
        'content',
        'user_id',
        array(
            'class'=>'CButtonColumn',
        ),
    ),
));

Modify it with our table sorter extension below.

$this->widget('application.extensions.tablesorter.Sorter', array(
    'data'=>$records,
    'columns'=>array(
        'id',
        'title',
        'description',
        'content', 
        'users.username', // Relation value given in model
    )
));

Optional

  • We can set the filter as text box, select box, empty. We need to pass another parameter "filters" in the extension widget.

  • We can also enable, disable the buttons by passing another parameter "buttons" in it.

$this->widget('application.extensions.tablesorter.Sorter', array(
    'data'=>$records,
    'columns'=>array(
        'id',
        'title',
        array('header'=>'Desc',
              'value'=>'description'), //header is the customized title  
        'content',
        'users.username', // relation value
    ),
    'filters'=>array( // it was optional
        '',
        '',
        '',
        'filter-false', // won't filter this
        'filter-select', // filter as select box
    ),
    'buttons'=>array( // it was optional
        array(
        'action'=>'disable', // disable the action (last row)
        'view'=>'disable', // disable the view button
        'edit'=>'disable', // disable the edit button
        'delete'=>'disable'), // disable the delete button
    ),  
    ));

Fixed

  • Customized buttons with enable and disable option 2.0 version.
  • Customized title will work fine now in 1.0 version.
  • Post only delete will work fine now in 1.0 version.
  • Added a default jquery along with the extension in 0.4 version.
  • The error for empty content was now fixed in 0.3 version.
  • It will work fine now inside the modules. Use the upgraded 0.2 version. (Thanks to selorm for pointing out)

Resources

Tablesorter is a widely used jquery plugin in many websites. It has various skins and customization options. I will upgrade the functionality in this extension.

Total 19 comments

#18048 report it
nachi at 2014/09/02 04:37am
@Neminath @kazemi_morteza Issues are solved

Kindly update the latest version of tablesorter.

  • Delete Post will work now.
  • Customized title can be given as it was below.
array('header'=>'Your customized title',
      'value'=>'your data value'),
#17943 report it
kazemi_morteza at 2014/08/14 12:44am
delete button only work with get request ?

Hi. in this extension delete action delete only work with get request how to i change that to with post request? i comment the filter until this action work please help me. public function filters() { return array( 'accessControl', // perform access control for CRUD operations /'postOnly + delete',/ // we only allow deletion via POST request ); }

#17934 report it
kazemi_morteza at 2014/08/13 05:09am
delete button not work

Hi. delete button not work ? please help me?

#17155 report it
Neminath at 2014/05/08 07:04am
help

i am inserting filter but its shoeing error "explode() expects parameter 2 to be string, array given

C:\wamp\www\bhashini\protected\extensions\tablesorter\Sorter.php(100)"

MY admin page code: <?php $this->widget('application.extensions.tablesorter.Sorter', array( 'data'=>$records, 'columns'=>array(

'emp_id',
'St_Date',
'Ed_date',
'type',
'reason',
 array(
    'name'=>'leave', //
    'type'=>'raw',

'value' =>'$data->leave? "Active": "Inactive"', //converts my 1 and 0 to Active / Inactive 'filter' => array('0' => 'Inactive', '1' => 'Active'), // Adds a dropdown to the filter ),

#17142 report it
Lerstat1968 at 2014/05/07 06:09am
@17138

Yes, the problem was the file "screen.css." In fact, I use YiiStrap and I still used the file screen.css. I deleted the reference to the css file and all my tables have taken on the appearance of the standard bootstrap as tablesorter tables.

Thank you for your help.

#17138 report it
Neminath at 2014/05/07 01:32am
@17114

may be it is conflicting with screen.css go to this screen.css file n remove or comment the ".gridview" class n apply your own css in your view where you are putting the sorte gridview ex:admin page sample code; .tablesorter{

width// height//

}

#17114 report it
Lerstat1968 at 2014/05/05 06:59am
@17113

Hello, thanks for the reply. I looked at the code of sorter.php and managed to translate the headers and delete the "Actions" column. I was not able instead to change the look of the table. When the table is loaded, it has the same appearance as the main table, but after a moment changes appearance and assumes the "bootstrap" appearance... I will also look at the css files..

#17113 report it
Neminath at 2014/05/05 06:24am
#17106

you can edit sorter.php file in extension remove edit,deleten update lines n edit css as you wish..

#17106 report it
Lerstat1968 at 2014/05/04 03:44am
Thanks.

Hi, The extension works fine for my needs. But I have some requirements:

  1. How can I apply a standard look and feel and not a bootstrap layout?
  2. How can I translate the headers (I am italian)?
  3. How can I delete the column "Actions"?

Thank you, it's a beautiful extension and hope that you continue with the development.

lestat1968.

#17101 report it
nachi at 2014/05/03 04:13am
@ pjravs

Working on that. Will update in the next version.

#17090 report it
Neminath at 2014/05/02 04:13am
Empty table

If you have empty table it will give offset 0 error so modify sorter.php in extension folder like this

public function genTable() { $datas=$this->data; if(empty($datas[0])) { echo "table is empty";

    }


    else {////after this same code//////
#17002 report it
pjravs at 2014/04/22 12:13am
Joining Table

Can we only join 2 tables and cannot show the third related table??

#16947 report it
nachi at 2014/04/16 12:17am
@Neminath
#16946 report it
pjravs at 2014/04/15 11:29pm
Edit Header

Hello! I just want to ask how to edit the header of a column in this extension,

Thanks and God Bless!

#16942 report it
Neminath at 2014/04/15 06:21am
thanks

it is working.......

#14910 report it
nachi at 2013/09/20 03:42am
@serom

Thanks, I have fixed that bug in the upgraded 0.2 version. Kindly download and use it.

#14905 report it
selorm at 2013/09/19 04:29pm
suggestion

to keep functionality with the zii widget, u should change the urls for the view,update and delete buttons to: $edit_url=Yii::app()->controller->createUrl("update",array("id"=>$data->primaryKey)), $view_url=Yii::app()->controller->createUrl("view",array("id"=>$data->primaryKey)) $delete_url=Yii::app()->controller->createUrl("delete",array("id"=>$data->primaryKey));

just realised, the url doesn't work well within modules

#14902 report it
nachi at 2013/09/19 01:32pm
@selorm

Thanks for your comment. I will keep upgrade it..

#14901 report it
selorm at 2013/09/19 12:17pm
Thanks

It worked well.Thanks for the nice extension

Leave a comment

Please to leave your comment.

Create extension