datatable basic functions do not work in datatable when I have more then 4 column headers.

[ibrahimdevoloper]

Question	Answer
Issue or Enhancement	Issue
Laravel Version	8.54
Project Version	last version

Current Behavior

datatable does not work correctly when I add more than four headers for the table

Question

I am new to this project and laravel framework in gereral so can you help me with this problem how can I make datatable work correctly ?

Steps to Reproduce

My blade file when I have 4 heads https://github.com/ibrahimdevoloper/ecommerce-without-payments/blob/main/resources/views/categories/index.blade.php

while when I have more than 4 columns https://github.com/ibrahimdevoloper/ecommerce-without-payments/blob/main/resources/views/inventories/index.blade.php

p.s: the pagination down below is custom made with laravel framework

thanks a lot.

[dfsmania]

Hi @ibrahimdevoloper Would you highlight or explain what is the problem you are facing? It is hard to guess just looking at the images...

[ibrahimdevoloper]

Thanks for replying My problem is when i add more than four columns the basic functions of data tables disappear while have 4 or less columns it works perfectly

[dfsmania]

@ibrahimdevoloper Please, add code definition of your datatables, I can't access your links...

[ibrahimdevoloper]

My blade file when I have 4 heads

@extends('adminlte::page')
@section('content_header')
    <h2>Categories</h2>
    <a href="categories/create">
        <x-adminlte-button class="btn-md" type="submit" label="Add Category" theme="success"
            icon="fas fa-md fa-save" />
    </a>
@endsection
@section('content')
    {{-- Setup data for datatables --}}
    @php
    $heads = ['image', 'Name', 'description', ['label' => 'Actions', 'no-export' => true, 'width' => 5]];
    // $btnEdit = '<button class="btn btn-xs btn-default text-primary mx-1 shadow" title="Edit">
    //                     <i class="fa fa-lg fa-fw fa-pen"></i>
    //                 </button>';
    // $btnDelete = '<button class="btn btn-xs btn-default text-danger mx-1 shadow" title="Delete">
    //                   <i class="fa fa-lg fa-fw fa-trash"></i>
    //               </button>';
    // $btnDetails = '<button class="btn btn-xs btn-default text-teal mx-1 shadow" title="Details">
    //                        <i class="fa fa-lg fa-fw fa-eye"></i>
    //                    </button>';
    // dd($users);
    $data = [];
    foreach ($categories as $category) {
        $image = asset('/storage//' . $category->image);
        $data[] = [
            '<img src=' . $image . ' width="75" height="75">',
            $category->name,
            $category->description,
            // '<nobr>'.$btnEdit.$btnDelete.$btnDetails.'</nobr>',
        ];
    }
    $config = [
        'data' => $data,
        // 'data' =>[
        //     [22, 'John Bender', '+02 (123) 123456789', '<nobr>'.$btnEdit.$btnDelete.$btnDetails.'</nobr>'],
        //     [19, 'Sophia Clemens', '+99 (987) 987654321', '<nobr>'.$btnEdit.$btnDelete.$btnDetails.'</nobr>'],
        //     [3, 'Peter Sousa', '+69 (555) 12367345243', '<nobr>'.$btnEdit.$btnDelete.$btnDetails.'</nobr>'],
        // ],
        'order' => [[1, 'asc']],
        'columns' => [null, null, null, ['orderable' => true]],
    ];
    @endphp

    {{-- Minimal example / fill data using the component slot --}}
    <x-adminlte-datatable id="category_table" :heads="$heads" head-theme="dark" :config="$config" hoverable bordered
        compressed beautify>
        @foreach ($config['data'] as $row)
            <tr>
                @foreach ($row as $cell)
                    <td>{!! $cell !!}</td>
                @endforeach
                <td>
                    <button class="btn btn-xs btn-default text-primary mx-1 shadow" title="Edit">
                        <i class="fa fa-lg fa-fw fa-pen"></i>
                    </button>
                    <form action="/dashboard/categories" method="post">
                        @csrf
                        <input type="hidden" name="_method" value="DELETE">

                    <button class="btn btn-xs btn-default text-danger mx-1 shadow" title="Delete">
                        <i class="fa fa-lg fa-fw fa-trash"></i>
                    </button>
                </form>
                    <button class="btn btn-xs btn-default text-teal mx-1 shadow" title="Details">
                        <i class="fa fa-lg fa-fw fa-eye"></i>
                    </button>
                </td>
            </tr>
        @endforeach
    </x-adminlte-datatable>
    {{ $categories->links() }}
@endsection

while when I have more than 4 columns

@extends('adminlte::page')
@section('content_header')
<h2>Inventories</h2>
<a href="inventories/create"><x-adminlte-button class="btn-md"
    type="submit" label="Add Inventory" theme="success" icon="fas fa-md fa-save"/></a>
@endsection
@section('content')
{{-- Setup data for datatables --}}
@php
$heads = [
    'Image',
    'Product Name',
    'Delivery Name',
    'Quantity',
    'Expense',
    'Date',
    ['label' => 'Actions', 'no-export' => true, 'width' => 5],
];
$btnEdit = '<button class="btn btn-xs btn-default text-primary mx-1 shadow" title="Edit">
                <i class="fa fa-lg fa-fw fa-pen"></i>
            </button>';
$btnDelete = '<button class="btn btn-xs btn-default text-danger mx-1 shadow" title="Delete">
                  <i class="fa fa-lg fa-fw fa-trash"></i>
              </button>';
$btnDetails = '<button class="btn btn-xs btn-default text-teal mx-1 shadow" title="Details">
                   <i class="fa fa-lg fa-fw fa-eye"></i>
               </button>';
// dd($users);
$data =[];
foreach ($inventories as $inventory ) {
    $image=asset($inventory->product_image);
    $data[]=[
        '<img src='.$image.' width="75" height="75">',
        $inventory->product_name,
        $inventory->delivery_name,
        $inventory->quantity,
        $inventory->expense,
        $inventory->date,
        '<nobr>'.$btnEdit.$btnDelete.$btnDetails.'</nobr>',
    ];
}
$config = [
    'data' =>$data,
    // 'data' =>[
    //     [22, 'John Bender', '+02 (123) 123456789', '<nobr>'.$btnEdit.$btnDelete.$btnDetails.'</nobr>'],
    //     [19, 'Sophia Clemens', '+99 (987) 987654321', '<nobr>'.$btnEdit.$btnDelete.$btnDetails.'</nobr>'],
    //     [3, 'Peter Sousa', '+69 (555) 12367345243', '<nobr>'.$btnEdit.$btnDelete.$btnDetails.'</nobr>'],
    // ],
    'order' => [[1, 'asc']],
    'columns' => [null, null, null, ['orderable' => true]],
];
@endphp

{{-- Minimal example / fill data using the component slot --}}
<x-adminlte-datatable id="inventories_table" :heads="$heads" head-theme="dark" :config="$config"
    hoverable bordered compressed beautify >
    @foreach($config['data'] as $row)
        <tr>
            @foreach($row as $cell)
                <td>{!! $cell !!}</td>
            @endforeach
        </tr>
    @endforeach
</x-adminlte-datatable>
{{$inventories->links()}}
@endsection

[dfsmania]

@ibrahimdevoloper Note on both examples you are passing the data through the :config property and also defining it manually using the component slot, try one or another, not both at the same time, for your second example, try:

{{-- Setup data for datatables --}}
@php
$heads = [
    'Image',
    'Product Name',
    'Delivery Name',
    'Quantity',
    'Expense',
    'Date',
    ['label' => 'Actions', 'no-export' => true, 'width' => 5],
];
$btnEdit = '<button class="btn btn-xs btn-default text-primary mx-1 shadow" title="Edit">
                <i class="fa fa-lg fa-fw fa-pen"></i>
            </button>';
$btnDelete = '<button class="btn btn-xs btn-default text-danger mx-1 shadow" title="Delete">
                  <i class="fa fa-lg fa-fw fa-trash"></i>
              </button>';
$btnDetails = '<button class="btn btn-xs btn-default text-teal mx-1 shadow" title="Details">
                   <i class="fa fa-lg fa-fw fa-eye"></i>
               </button>';
// dd($users);
$data =[];
foreach ($inventories as $inventory ) {
    $image=asset($inventory->product_image);
    $data[]=[
        '<img src='.$image.' width="75" height="75">',
        $inventory->product_name,
        $inventory->delivery_name,
        $inventory->quantity,
        $inventory->expense,
        $inventory->date,
        '<nobr>'.$btnEdit.$btnDelete.$btnDetails.'</nobr>',
    ];
}
$config = [
    'data' =>$data,
    'order' => [[1, 'asc']],
    'columns' => [null, null, null, ['orderable' => true]],
];
@endphp

{{-- Minimal example / fill data using the component slot --}}
<x-adminlte-datatable id="inventories_table" :heads="$heads" head-theme="dark" :config="$config"
    hoverable bordered compressed beautify/>

{{$inventories->links()}}
@endsection

Or the next one:

{{-- Setup data for datatables --}}
@php
$heads = [
    'Image',
    'Product Name',
    'Delivery Name',
    'Quantity',
    'Expense',
    'Date',
    ['label' => 'Actions', 'no-export' => true, 'width' => 5],
];
$btnEdit = '<button class="btn btn-xs btn-default text-primary mx-1 shadow" title="Edit">
                <i class="fa fa-lg fa-fw fa-pen"></i>
            </button>';
$btnDelete = '<button class="btn btn-xs btn-default text-danger mx-1 shadow" title="Delete">
                  <i class="fa fa-lg fa-fw fa-trash"></i>
              </button>';
$btnDetails = '<button class="btn btn-xs btn-default text-teal mx-1 shadow" title="Details">
                   <i class="fa fa-lg fa-fw fa-eye"></i>
               </button>';
// dd($users);
$data =[];
foreach ($inventories as $inventory ) {
    $image=asset($inventory->product_image);
    $data[]=[
        '<img src='.$image.' width="75" height="75">',
        $inventory->product_name,
        $inventory->delivery_name,
        $inventory->quantity,
        $inventory->expense,
        $inventory->date,
        '<nobr>'.$btnEdit.$btnDelete.$btnDetails.'</nobr>',
    ];
}

// NOTE NO DATA IS DEFINED ON THE CONFIG.
$config = [
    'order' => [[1, 'asc']],
    'columns' => [null, null, null, ['orderable' => true]],
];
@endphp

{{-- Minimal example / fill data using the component slot --}}
<x-adminlte-datatable id="inventories_table" :heads="$heads" head-theme="dark" :config="$config"
    hoverable bordered compressed beautify >
    @foreach($data as $row)
        <tr>
            @foreach($row as $cell)
                <td>{!! $cell !!}</td>
            @endforeach
        </tr>
    @endforeach
</x-adminlte-datatable>
{{$inventories->links()}}
@endsection

[ibrahimdevoloper]

Thanks i will check it asap

[ibrahimdevoloper]

i added the code below like your comment

@extends('adminlte::page')
@section('content_header')
<h2>Inventories</h2>
<a href="inventories/create"><x-adminlte-button class="btn-md"
    type="submit" label="Add Inventory" theme="success" icon="fas fa-md fa-save"/></a>
@endsection
@section('content')
{{-- Setup data for datatables --}}
@php
$heads = [
    'Image',
    'Product Name',
    'Delivery Name',
    'Quantity',
    'Expense',
    'Date',
    ['label' => 'Actions', 'no-export' => true, 'width' => 5],
];

$btnEdit = '<button class="btn btn-xs btn-default text-primary mx-1 shadow" title="Edit">
                <i class="fa fa-lg fa-fw fa-pen"></i>
            </button>';
$btnDelete = '<button class="btn btn-xs btn-default text-danger mx-1 shadow" title="Delete">
                  <i class="fa fa-lg fa-fw fa-trash"></i>
              </button>';
$btnDetails = '<button class="btn btn-xs btn-default text-teal mx-1 shadow" title="Details">
                   <i class="fa fa-lg fa-fw fa-eye"></i>
               </button>';
$data =[];
foreach ($inventories as $inventory ) {
    $image=asset($inventory->product_image);
    $data[]=[
        '<img src='.$image.' width="75" height="75">',
        $inventory->product_name,
        $inventory->delivery_name,
        $inventory->quantity,
        $inventory->expense,
        $inventory->date,
        '<nobr>'.$btnEdit.$btnDelete.$btnDetails.'</nobr>',
    ];
}
$config = [
    'data' =>$data,
    'order' => [[1, 'asc']],
    'columns' => [null, null, null, ['orderable' => true]],
];

@endphp

{{-- Minimal example / fill data using the component slot --}}
<x-adminlte-datatable id="inventories_table" :heads="$heads" head-theme="dark" :config="$config"
    hoverable bordered compressed beautify >
</x-adminlte-datatable>
@endsection

while the result was as follows how can i fix it ??

and how to make full use of datatables using your plugin in the backend (meaning what should i do to link the datatables to the controllers )

i really thank you for your help

[dfsmania]

@ibrahimdevoloper Problem is that you are not specifying properties for all your columns, see next code:

$config = [
    'data' =>$data,
    'order' => [[1, 'asc']],
    'columns' => [null, null, null, ['orderable' => true]],
];

the columns config says the column number 4 will be orderable, but you need to specify all the 7 columns. On the examples, we use it to remove orderable buttons on the header of the actions, so you should try:

$config = [
    'data' =>$data,
    'order' => [[1, 'asc']],
    'columns' => [null, null, null, null, null, null, ['orderable' => false]],
];

For more reference to columns configuration, always read the plugin documentation (Note link was not working at the moment i'm writing)

and how to make full use of datatables using your plugin in the backend (meaning what should i do to link the datatables to the controllers )

I'm not sure what you meaning with that. The idea is to read data from a database and fill the datatable, then you can construct the buttons available on the actions columns with an onclick property that will call a function defined on Javascript, the function may received the id of the item on the row, and do the actions (maybe loading a new view for edit the item data, or remove the item from database).

[ibrahimdevoloper]

I'm not sure what you meaning with that. The idea is to read data from a database and fill the datatable, then you can construct the buttons available on the actions columns with an onclick property that will call a function defined on Javascript, the function may received the id of the item on the row, and do the actions (maybe loading a new view for edit the item data, or remove the item from database).

I mean what should I put in the back end to make datatable paginate the database? Because i need to use all() method from my model which is no recommended

As for CRUD I understand i need make new views for them

Thanks a lot

[dfsmania]

@ibrahimdevoloper See the Plugin Server Side Documentation. I do not have experience with Server Side Processing in order to help you, but you can search on the internet...

You can use the config property to define all the underlying plugin option or configuration...

[ibrahimdevoloper]

Great thanks for your help i will close this thread right now