README

Documentation, Installation and Usage Instructions

See the documentation for detailed installation and usage instructions.

Introduction

This package allows you to manage your DataTable from server-side in Laravel app (inspired by original DataTable SSP).

You can refer here (click here) about the implementation of original DataTable SSP.

Requirement
Installation
Usage & Reference
How to use it?
Example
In PHP (Controller)
In Blade (Views)

Requirement

Laravel 9.0 and above

Installation

This package can be used in Laravel 9.0 or higher. If you are using an older version of Laravel, there's might be some problem. If there's any problem, you can create new issue and I will fix it as soon as possible.

You can install the package via composer:

composer require syamsoul/laravel-datatable-ssp

NOTE: Please see CHANGELOG for more information about what has changed recently.

Usage & Reference

* Before you read this section, you can take a look the example below to make it more clear to understand.

How to use it?

First, you must add this line to your Controller:

use SoulDoit\DataTable\SSP;

And then inject SSP service to Controller's method (or create instance using PHP new keyword):

use SoulDoit\DataTable\SSP;

class MyController extends Controller
{
    public function get(SSP $ssp)
    {
        // or using `new` keyword:
        // $ssp = new SSP();

        $ssp->setColumns($dt_cols_opt);

        $ssp->setQuery($dt_query);

        return $ssp->response()->json();
    }
}

Which is:

$dt_query is a QueryBuilder/EloquentBuilder or callable function that will return QueryBuilder/EloquentBuilder, for example:
```
$ssp->setQuery(function ($selected_columns) {
    return \App\Models\User::select($selected_columns);
});
```

$dt_cols_opt is an array of your columns' options, for example:

$ssp->setColumns([
    ['label'=>'ID',         'db'=>'id',            'formatter' => function ($value, $model) {
        return str_pad($value, 5, '0', STR_PAD_LEFT); 
    }],
    ['label'=>'Username',   'db'=>'uname'],
    ['label'=>'Email',      'db'=>'email'],
]);

The available columns' options are as below:

[   
    'label'         => $dt_col_header,
    'db'            => $db_col_name,
    'class'         => $dt_class,
    'formatter'     => $dt_formatter,
],

Which is:

$dt_col_header is the header of the column (at the table in views/blade), for example:

$dt_col_header = 'Username';

$db_col_name is column name based on the DB, for example:

$db_col_name = 'uname';

$dt_class is a class/classes name which will be added to the table (in views/blade), for example:

$dt_class = 'text-center';

// or use array for multiple classes

$dt_class = ['text-center', 'text-bold'];

$dt_formatter is like a modifier that can modify the data from DB to be shown in views/blade, for example:

$dt_formatter = function ($value, $model) {
    return ucwords($value);
    // which is 'value' is the value of the column

    // or
    return $model->name;
    // which is 'model' is the model of the current row

    // or
    return $value . '(#' .$model->id. ')';
};

Example

In PHP (Controller)

namespace App\Http\Controllers\AdminPanel;

use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use SoulDoit\DataTable\SSP;

class UsersController extends Controller
{
    private $ssp;
    
    public function __construct()
    {
        $ssp = new SSP();

        $ssp->enableSearch();
        $ssp->allowExportAllItemsInCsv();
        $ssp->setAllowedItemsPerPage([5, 10, 20, -1]);
        $ssp->frontend()->setFramework('datatablejs');

        $ssp->setColumns([
            ['label'=>'ID',         'db'=>'id',            'formatter' => function ($value, $model) {
                return str_pad($value, 5, '0', STR_PAD_LEFT); 
            }],
            ['label'=>'Email',      'db'=>'email',         ],
            ['label'=>'Username',   'db'=>'uname',         ],
            ['label'=>'Created At', 'db'=>'created_at',    ],
            ['label'=>'Action',     'db'=>'id',            'formatter' => function ($value, $model) {
                $btns = [
                    '<button onclick="edit(\''.$value.'\');">Edit</button>',
                    '<button onclick="delete(\''.$value.'\');">Delete</button>',
                ];
                return implode($btns, " ");
            }],
            ['db'=>'email_verified_at'],
        ]);

        $ssp->setQuery(function ($selected_columns) {
            return \App\Models\User::select($selected_columns)
            ->where('status', 'active')
            ->where(function ($query) {
                $query->where('id', '!=', 1);
                $query->orWhere('uname', '!=', 'superadmin');
            });
        });
        
        $this->ssp = $ssp;
    }
    
    public function page()
    {   
        return view('admin-panel.users-list', [
            'fe_settings' => $this->ssp->frontend()
                ->setInitialSorting('created_at', true) // this means `order created_at desc`
                ->setInitialItemsPerPage(10)
                ->setResponseDataUrl(route('users.get'))
                ->getSettings(true),
        ]);
    }

    public function get()
    {
        return $this->ssp->response()->json();
    }
}

In Blade (Views)

<html>
    <head>
        <title>Laravel DataTable SSP</title>
    </head>
    <body>
        <table id="datatable_1" class="table table-striped table-bordered" style="width:100%;"></table>
        <script>
        $(document).ready(function(){
            $('#datatable_1').DataTable({!! $fe_settings !!});
        });

        function edit (id) {
            alert(`edit for user with id ${id}`);
        }

        function delete (id) {
            alert(`delete user with id ${id}`);
        }
        </script>
    </body>
</html>

Support me

If you find this package helps you, kindly support me by donating some BNB (BSC) to the address below.

0x364d8eA5E7a4ce97e89f7b2cb7198d6d5DFe0aCe

License

The MIT License (MIT). Please see License File for more information.

syamsoul / laravel-datatable-ssp

Maintainers

Details