jQuery tablesorter extension for Yii, for turning a standard grid view into a sortable table without page refreshes.
JavaScript PHP CSS
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
tablesorter
README.md Update README.md Sep 19, 2013

README.md

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.