New feature: Datatables option

[NightZpy]

Hello bro,
maybe add option for implement datatable javascript plugin for index page.
For laravel exists some packages for this job. This is one: https://github.com/yajra/laravel-datatables.

Greets.

[phillipmadsen]

I built this into your old Mitul version. I can supply the code it should not be to hard to implement into your new one.

This creates the App\DataTable\ExampleDataTable.php

DataTable.stub.txt

This creates the resouces/views/example/datatable.blade.php

datatable.blade.stub.txt

This creates the new views generator

_Total views are:_

• datatable.blade.stub = datatable.blade.php
• factory.stub auto populates /database/factories/ModelFactory.php
• seeder.stub = database/seeds/{MODELNAME}Seeder.php

ViewGenerator.php.txt

If interested This creates the a factory from the above view generator

factory.stub.txt

If interested This creates the a seeder from the above view generator

Seeder.stub.txt

[mitulgolakiya]

@phillipmadsen great. I will take it in next milestone.

[vesper8]

I am absolutely loving this https://github.com/yajra/laravel-datatables package!

Especially using it the "as a Service" way. It's wonderful and so powerful. A huge improvement to the current scaffolding with the ajax search, sorting and very easy to add inline edit/delete buttons as well as a "add new" button. Am currently using this for the "index" view and using the generated scaffolding for the edit. It was very easy to drop-in. Really looking forward to this being baked-in to this project!

[NightZpy]

This is another plugin in jquery: https://vitalets.github.io/x-editable/demo-bs3.html#
)

[dhsont]

@phillipmadsen How you generate external files which are not came default by this package

[mitulgolakiya]

I have started working on it. Maybe it will be shipped by the end of this week.

[NightZpy]

@mitulgolakiya oh, very good bro, thanks!

[dhsont]

@mitulgolakiya Thanks. waiting for this feature.

[vesper8]

These are the stubs I am using to generate my datatables (as a service http://datatables.yajrabox.com/service). I'll post them here, might be helpful to you.

I know some of what I did is dirty but it may still help.

Take note that I'm using 'Stolz/Assets' to load my datatables js/css which basically only loads

                '//cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css',
                '//cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js',

Added this to GeneratorConfig.php

    public function loadDynamicVariables(CommandData &$commandData)
    {
        $commandData->addDynamicVariable('$NAMESPACE_DATATABLE$', config('infyom.laravel_generator.namespace.datatable'));
        ...
    }

Added this to laravel_generator.php (note that I'm using subfolders.. which is related to issue #70)

    'path' => [

        'app'                  => app_path('MySubFolder/'),
        'datatable'         => app_path('MySubFolder/DataTables/'),
        ...

Added this to ViewGenerator.php

    private function generateDataTableClass()
    {
        $templateData = TemplateUtil::getTemplate('scaffold.views.DataTable', $this->templateType);

        $templateData = TemplateUtil::fillTemplate($this->commandData->dynamicVars, $templateData);

        $tableBodyFields = '';

        foreach ($this->commandData->inputFields as $field) {


            $tableBodyFields .= "\n\t\t\t  '" . $field['fieldName'] . "',";
        }

        $templateData = str_replace('$FIELDS_DATA$', $tableBodyFields, $templateData);

        $fileName = $this->commandData->modelName . 'DataTable.php';

        FileUtil::createFile(config('infyom.laravel_generator.path.datatable'), $fileName, $templateData);

        $this->commandData->commandInfo($this->commandData->modelName . 'DataTable.php created');
    }

this is my DataTable.stub

<?php

namespace $NAMESPACE_DATATABLE$;

use $NAMESPACE_MODEL$\$MODEL_NAME$;
use Form;
use Yajra\Datatables\Services\DataTable;

class $MODEL_NAME$DataTable extends DataTable
{
    // protected $printPreview = 'path-to-print-preview-view';
    // protected $exportColumns = ['id', 'name'];

    /**
     * Display ajax response.
     *
     * @return \Illuminate\Http\JsonResponse
     */
    public function ajax()
    {
        return $this->datatables
            ->eloquent($this->query())
            ->addColumn('actions', function ($data) {
                return '
                ' . Form::open(['route' => ['$MODEL_NAME_PLURAL_CAMEL$.destroy', $data->id], 'method' => 'delete']) . '
                <div class=\'btn-group\'>
                    <a href="' . route('$MODEL_NAME_PLURAL_CAMEL$.show', [$data->id]) . '" class=\'btn btn-default btn-xs\'><i class="glyphicon glyphicon-eye-open"></i></a>
                    <a href="' . route('$MODEL_NAME_PLURAL_CAMEL$.edit', [$data->id]) . '" class=\'btn btn-default btn-xs\'><i class="glyphicon glyphicon-edit"></i></a>
                    ' . Form::button('<i class="glyphicon glyphicon-trash"></i>', ['type' => 'submit', 'class' => 'btn btn-danger btn-xs', 'onclick' => "return confirm('Are you sure?')"]) . '
                </div>
                ' . Form::close() . '
                ';
            })
            ->make(true);
    }

    /**
     * Get the query object to be processed by datatables.
     *
     * @return \Illuminate\Database\Query\Builder|\Illuminate\Database\Eloquent\Builder
     */
    public function query()
    {
        $$MODEL_NAME_PLURAL_CAMEL$ = $MODEL_NAME$::select();

        return $this->applyScopes($$MODEL_NAME_PLURAL_CAMEL$);
    }

    /**
     * Optional method if you want to use html builder.
     *
     * @return \yajra\Datatables\Html\Builder
     */
    public function html()
    {
        return $this->builder()
            ->columns([$FIELDS_DATA$
               'actions' => ['orderable' => false, 'searchable' => false, 'printable' => false, 'exportable' => false],
            ])
            ->parameters([
                'dom' => 'Bfrtip',
                'scrollX' => true,
                'buttons' => [
                    'create', 'csv', 'excel', 'pdf', 'print', 'reset', 'reload'],
            ]);
    }

    /**
     * Get columns.
     *
     * @return array
     */
    private function getColumns()
    {
        return [$FIELDS_DATA$
        ];
    }

    /**
     * Get filename for export.
     *
     * @return string
     */
    protected function filename()
    {
        return '$MODEL_NAME_PLURAL_CAMEL$';
    }
}

And this is my modified index for the controller.stub

<?php

namespace $NAMESPACE_CONTROLLER$;

use App\MySubFolder\DataTables\$MODEL_NAME$DataTable;
use Assets;
...

class $MODEL_NAME$Controller extends AppBaseController
{
    ...

    /**
     * Display a listing of the $MODEL_NAME$.
     *
     * @param $MODEL_NAME$DataTable $dataTable
     * @return Response
     */
    public function index($MODEL_NAME$DataTable $dataTable)
    {
        Assets::add(
            [
                "datatables",
            ]
        );

        return $dataTable->render('datatables.index');
    }

and finally this is my /views/datatables/index.blade.php

@extends('layouts.app')

@section('content')
    <style>
        th, td { white-space: nowrap; }
    </style>

    {!! $dataTable->table() !!}
@endsection

@push('scripts')
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.0.3/css/buttons.dataTables.min.css">
<script src="https://cdn.datatables.net/buttons/1.0.3/js/dataTables.buttons.min.js"></script>
<script src="/vendor/datatables/buttons.server-side.js"></script>
{!! $dataTable->scripts() !!}
@stop

[NightZpy]

Another table plugin, excellent for one to many relationship!

http://jtable.org/Demo/MasterChild

[mitulgolakiya]

Completed in the latest version. Find the doc here

[ergonomicus]

How can we set column width or minimum column width? Everything gets messy with large text fields...

[Fionajeremychik]

how to rename column name in datatable

[vishalinfyom]

Hii @NightZpy we have added the support for data tables with javascript

https://infyom.com/open-source/laravelgenerator/docs/8.0/stisla-templates#stisla-templates-with-jquery-datatables