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

  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.

6 0
16 followers
3 697 downloads
Yii Version: 1.1
License: BSD-2-Clause
Category: User Interface
Developed by: nachi
Created on: Sep 19, 2013
Last updated: 9 years ago

Downloads

show all

Related Extensions