/tablesorter

jQuery tablesorter extension for Yii, for turning a standard grid view into a sortable table without page refreshes.

Primary LanguageJavaScript

#Tablesorter - YII Extension

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.13. 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 in the extension widget.

$this->widget('application.extensions.tablesorter.Sorter', array(
	'data'=>$records,
	'columns'=>array(
		'id',
		'title',
		'description',
		'content',
		'users.username',
	),
	'filters'=>array(
		'',
		'',
		'',
		'filter-false', // won't filter this
		'filter-select', // filter as select box
	),
	));

##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.