Readme.md

DataTables Concerned Content for Laravel

This is a sample implementation of DataTables as a service for Laravel. (Using Yajra Datatables)

Support

Do let me know your thoughts through comments or through mail [email protected]

Have a good day !

SampleDatatable.php

<?php

namespace Modules\Sale\DataTables;

use Carbon\Carbon;
use Modules\Sale\Entities\Invoice;
use Yajra\DataTables\Html\Button;
use Yajra\DataTables\Html\Column;
use Yajra\DataTables\Services\DataTable;

class InvoicesDatatable extends DataTable
{
    public function dataTable($query)
    {
        return datatables()
            ->eloquent($query)
            ->addIndexColumn()
			->addColumn('invoice_date', function($invoice){

				return Carbon::createFromFormat('Y-m-d', $invoice->invoice_date)->format('d-m-Y');

			})
			->filterColumn('invoice_date', function($query, $keyword) {

				return $query->whereInvoiceDate($keyword);

			})
			->addColumn('customer', function($invoice){

				return $invoice->customer->name;

			})
			->filterColumn('customer', function ($query, $keyword) {

				return $query->whereHas('customer', function($query) use ($keyword) {
					$query->where('name', 'LIKE', "%{$keyword}%");
				});

			})
			->addColumn('invoice_total_gross', function($invoice){

				return 'Rs. '. $invoice->totals_gross;

			})
			->addColumn('payment_status', function($invoice){

				$payment_status = $invoice['payment_status'];

				if($payment_status === 'due') {
					$html = '<span class="badge badge-success">Due</span>';
				} else if($payment_status === 'overdue') {
					$html = '<span class="badge badge-danger">Over Due</span>';
				} else {
					$html = '<span class="badge badge-secondary">Closed</span>';
				}

				return $html;

			})
			->filterColumn('payment_status', function ($query, $keyword) {

				return $query->wherePaymentStatus($keyword);

			})
			->addColumn('return', function($invoice){

				return view('sale::invoices.c_salereturns_index')->with('invoice', $invoice)->render();
				
			})
			->addColumn('payment', function($invoice){

				return view('sale::invoices.c_payments_index')->with([
					'invoice' => $invoice,
				]);
				
			})
			->addColumn('action', function ($invoice){

				return view('sale::invoices.c_action_index')->with('invoice', $invoice)->render();
	
			})
			->escapeColumns([]);
    }

    public function query()
    {
        $invoices = Invoice::with([
			'customer'
		])->orderBy('created_at', 'DESC')->select();
    	return $this->applyScopes($invoices);
    }

    public function html()
    {
        return $this->builder()
                    ->parameters([          
						'searchDelay' => 1000,
						'initComplete' => "function (settings, json) {
                            this.api().columns().every(function (index) {

								var r = $('tfoot tr')
								$('thead').append(r)

								var column = this
								var colDef = settings['aoColumns'][index]
			
								var input = document.createElement(\"input\")
								input.className = 'form-control form-control-sm'

								console.log(colDef)

								if(colDef.searchable){

									$(input).appendTo($(column.footer()).empty())
									.on('change', function () {
										column.search($(this).val(), false, false, true).draw()
									})

									if(colDef.data === 'payment_status') {

										var select = document.createElement('select')
										select.className = 'form-select form-select-sm form-select-solid'

										var opt1 = document.createElement('option')
										var opt2 = document.createElement('option')
										var opt3 = document.createElement('option')

										opt1.value = 'due'
										opt1.text = 'Due'

										opt2.value = 'overdue'
										opt2.text = 'Overdue'

										opt3.value = 'closed'
										opt3.text = 'Closed'

										select.add(opt1, null)
										select.add(opt2, 'selected=\"selected\"')
										select.add(opt3, null)

										$(select).appendTo($(column.footer()).empty())
										.on('change', function () {
											column.search($(this).val(), false, false, true).draw()
										})

									}

									if(colDef.data === 'invoice_date') {

										var input = document.createElement('input')
										input.className = 'form-control form-control-sm datepicker'

										$(input).appendTo($(column.footer()).empty())
										.on('change', function () {
											column.search($(this).val(), false, false, true).draw()
										})

										$('input.datepicker').flatpickr()

									}

								}
                            });
                        }",
					])
                    ->setTableId('invoices-table')
					->addTableClass('table table-row-bordered border table-rounded px-5')
                    ->columns($this->getColumns())
                    ->minifiedAjax()
                    ->dom("
						<'row my-4'
							<'col-12 col-lg-6 mb-4' i>
							<'col-12 col-lg-6' f>
						> 
						<'row'
							<'col-12 table-responsive table-compact' tr>
						> 
						<'row my-4'
							<'col-12 col-lg-6' l>
							<'col-12 col-lg-6' p>
						>
					")
                    ->orderBy(1, 'asc')
					->autoWidth('false')
                    ->buttons(
                        Button::make('create'),
                        Button::make('export'),
                        Button::make('print'),
                        Button::make('reset'),
                        Button::make('reload')
                    );
    }

    protected function getColumns()
    {
        return [
            Column::computed('DT_RowIndex')
				->name('id')
				->title('S.No')
				->orderable(false)
				->searchable(false)
				->width(25),            
			Column::make('invoice_date')
				->title('Date'),
			Column::make('invoice_number')
				->title('Inv. No.'),
			Column::make('customer')
				->title('Customer')
				->orderable(false)
				->searchable(true),
			Column::computed('invoice_total_gross')
				->title('Amount'),
			Column::make('payment_status')
				->title('Status')
				->orderable(false),
			Column::computed('return')
				->width(50),
			Column::computed('payment')
				->width(50),
			Column::computed('action')
				->exportable(false)
				->printable(false)
				->width(152)
				->addClass('text-center'),
        ];
    }

    protected function filename()
    {
        return 'invoices_' . date('YmdHis');
    }
}