1. Requirements
2. Usage
3. Optional
4. Fixed
5. Resources

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.

• Project page
• Extension usage demo
• Mottie modified tablesorter
• Table sorter official page