jQuery Bootgrid on Laravel

During this time I always use datatables library to display a list of data in tabular form dynamically. But while taking the library, I feel given feature too complete and too heavy when loading data. Therefore I began to look for a library table that can accommodate the needs that I have.

After the end of his search through the internet I found a library jquery-bootgrid. Bootgrid is a Nice, sleek and intuitive, A grid control especially designed for bootstrap.You can turn your simple table into a sophisticated data table and offer your users a nice experience and great features without any effort.There are two ways to populate jQuery Bootgrid. Either you use the server-side way (e.g. a REST service) for querying a dynamic data source like a database or you use the client-side way for simple in-memory data visualization.

The following is an example of a jquery plugin installation  bootgrid on framework laravel 4.12 to replace datatables library :

 

create function on class controller and pass it to view

public function index() {
    $this->layout->content = View::make('competency::schedule.index');
}

 

on view, create table who used to display the data

@section('content')
<div class="row">
    <div class="col-lg-12">
        <section class="panel">
            <header class="panel-heading">
                List Data
            </header>

            <div class="panel-body">
                <table id="grid-command-buttons" class="table table-condensed table-hover table-striped">
                    <thead>
                    <tr>
                        <th data-column-id="year" data-type="numeric" data-order="desc">Year</th>
                        <th data-column-id="dateBezetting">Bezetting</th>
                        <th data-column-id="dateStart">Date Start</th>
                        <th data-column-id="dateEnd">Date End</th>
                        <th data-column-id="treshold">Treshold/th>
                        <th data-column-id="status" >Status</th>
                        <th data-column-id="value">Value</th>
                        <th data-column-id="commands" data-formatter="commands" data-sortable="false">Commands</th>
                    </tr>
                    </thead>
                </table>
            </div>
        </section>
    </div>
</div>
@stop

 

still on the same view file, create section css and js to call jQuery-bootgrid plugin

@section('customcss')
{{ HTML::style('assets/jquery-bootgrid/jquery.bootgrid.css') }}
@stop

@section('customjs')
{{ HTML::script('assets/jquery-bootgrid/jquery.bootgrid.min.js')}}

<script type="text/javascript">
    var grid = $("#grid-command-buttons").bootgrid({
        ajax: true,
        post: function ()
        {
            return {
                id: "b0df282a-0d67-40e5-8558-c9e93b7befed"
            };
        },
        url: "{{ url('api/competency/schedule/list') }}",
        formatters: {
            "commands": function(column, row)
            {
                return "<button type=\"button\" class=\"btn btn-xs btn-primary command-detail\" data-row-id=\"" + row.id + "\"><span class=\"fa fa-gears\"></span> detail</button> "+
                    "<button type=\"button\" class=\"btn btn-xs btn-default command-update\" data-row-id=\"" + row.id + "\"><span class=\"fa fa-pencil\"></span> update</button>";
            }
        }
    }).on("loaded.rs.jquery.bootgrid", function()
    {
        /* Executes after data is loaded and rendered */
        grid.find(".command-detail").on("click", function(e)
        {
            window.location = "{{ url('competency/schedule/detail') }}/"+$(this).data("row-id");
        }).end().find(".command-update").on("click", function(e)
        {
            window.location = "{{ url('competency/schedule/update') }}/"+$(this).data("row-id");
        });
    });
</script>
@stop

 

on the class controller, create function to show the data. set the route on this function to POST

public function apiList(){
    $take = (Input::has('rowCount')) ? Input::get('rowCount') : 10;
    $skip = (Input::has('current')) ? Input::get('current')-1 : 0;
    $searchPhrase = (Input::has('searchPhrase')) ? Input::get('searchPhrase') : '';
    $sortYear = ((Input::has('sort')) && (!is_null(Input::get('sort')['year']))) ? Input::get('sort')['year'] : 'desc';

    $competencies = Competency::where('year', 'like', '%'.$searchPhrase.'%')->take($take)->skip($skip)->orderBy('year', $sortYear)->get();
    $rows = [];
    foreach($competencies as $row) {
        if ($row->status == 'pending'):
            $status = '<a href="#" class="label label-primary label-mini status-label" data-id="'.$row->id.'">'.$row->status.'</a>';
        elseif ($row->status == 'active'):
            $status = '<span class="label label-success label-mini">'.$row->status.'</span>';
        elseif ($row->status == 'archive'):
            $status = '<span class="label label-danger label-mini">'.$row->status.'</span>';
        endif;
        $date = new Date($row->date_start);
        $dateStart = $date->format('d M Y');

        $date = new Date($row->date_end);
        $dateEnd = $date->format('d M Y');

        $date = new Date($row->date_bezetting);
        $dateBezetting = $date->format('d M Y');

        $rows[] = array(
            'id' => $row->id,
            'year' => $row->year,
            'dateBezetting' => $dateBezetting,
            'dateStart' => $dateStart,
            'dateEnd' => $dateEnd,
            'treshold' =>$row->treshold,
            'status' => $status,
        );
    }

    $data = array(
        'current' => $skip,
        'rowCount' => $take,
        'rows' => $rows,
        'total' => count($competencies),
    );

    return json_encode($data);
}