DEV Community

hmz4dev
hmz4dev

Posted on

listing data with jtable in laravel project?

Top comments (1)

Collapse
 
mousomashakel profile image
mouso

Controller JTableController.php

    namespace App\Http\Controllers;

    use App\Models\YourModel;
    use Illuminate\Http\Request;

    class JTableController extends Controller
    {
        public function index()
        {
            return view('jtable-demo');
        }

        public function list(Request $request)
        {
            $offset = $request->input('jtStartIndex', 0);
            $limit = $request->input('jtPageSize', 10);
            $sorting = $request->input('jtSorting', 'id ASC');

            $query = YourModel::query();

            // Apply sorting
            list($sortField, $sortDirection) = explode(' ', $sorting);
            $query->orderBy($sortField, $sortDirection);

            // Get total count
            $totalCount = $query->count();

            // Apply pagination
            $data = $query->skip($offset)->take($limit)->get();

            return response()->json([
                'Result' => 'OK',
                'TotalRecordCount' => $totalCount,
                'Records' => $data
            ]);
        }

        public function create(Request $request)
        {
            $data = $request->validate([
                'field1' => 'required',
                'field2' => 'required',
                // Add validation for other fields
            ]);

            $record = YourModel::create($data);

            return response()->json([
                'Result' => 'OK',
                'Record' => $record
            ]);
        }

        public function update(Request $request)
        {
            $data = $request->validate([
                'id' => 'required|exists:your_table,id',
                'field1' => 'required',
                'field2' => 'required',
                // Add validation for other fields
            ]);

            $record = YourModel::find($request->id);
            $record->update($data);

            return response()->json([
                'Result' => 'OK'
            ]);
        }

        public function delete(Request $request)
        {
            $request->validate(['id' => 'required|exists:your_table,id']);

            YourModel::destroy($request->id);

            return response()->json([
                'Result' => 'OK'
            ]);
        }
    }
Enter fullscreen mode Exit fullscreen mode

for routes in routes/web.php

    Route::get('/jtable-demo', [JTableController::class, 'index']);
    Route::post('/jtable/list', [JTableController::class, 'list']);
    Route::post('/jtable/create', [JTableController::class, 'create']);
    Route::post('/jtable/update', [JTableController::class, 'update']);
    Route::post('/jtable/delete', [JTableController::class, 'delete']);
Enter fullscreen mode Exit fullscreen mode

and the view jtable-demo.blade.php

    @extends('layouts.app')

    @section('content')
    <div class="container">
        <div id="jtable-container"></div>
    </div>

    <script>
    $(document).ready(function() {
        $('#jtable-container').jtable({
            title: 'Records',
            paging: true,
            pageSize: 10,
            sorting: true,
            defaultSorting: 'id ASC',
            actions: {
                listAction: '/jtable/list',
                createAction: '/jtable/create',
                updateAction: '/jtable/update',
                deleteAction: '/jtable/delete'
            },
            fields: {
                id: {
                    key: true,
                    list: false
                },
                field1: {
                    title: 'Field 1',
                    width: '20%'
                },
                field2: {
                    title: 'Field 2',
                    width: '20%'
                },
                // Add other fields as needed
            }
        });

        // Load data
        $('#jtable-container').jtable('load');
    });
    </script>
    @endsection
Enter fullscreen mode Exit fullscreen mode

try this out and tell me if it works ???