How to make 'Create' button in a datatable to open modal to add new records to table?

Question

I am using laravel 7 and yajra datatables and have managed to implement the datatable as a service. DataTatable As A Service. I am able to view data from mysql database on the datatable and would like to add more data to it. When i click the 'create' button defined on the datatable file, it redirects me to organizers/create which is another page. My requirement is that when i click the 'create' button, it should open a modal where i can capture data and add records to the database and show on table. Please assist.

1. Screenshot of the datatable

2. Web routes

use Illuminate\Support\Facades\Route;

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/', function () {
    return view('welcome');
});

Auth::routes();

Route::get('/home', 'HomeController@index')->name('home');

Route::resource('broadcasts', 'admin\BroadcastController');
Route::resource('organizers', 'admin\OrganizerController');
Route::resource('profile', 'user\ProfileController');

3. Organizer Controller

namespace App\Http\Controllers\admin;

use App\DataTables\OrganizerDatatable;
use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Redirect;

class OrganizerController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index(OrganizerDatatable $datatable)
    {
        return $datatable->render('admin.organizers.organizers');
    }

    public function create()
    {
       //
    }

    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        //
    }

    /**
     * Display the specified resource.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function show($id)
    {
        //
    }

    /**
     * Show the form for editing the specified resource.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function edit($id)
    {
        //
    }

    /**
     * Update the specified resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function update(Request $request, $id)
    {
        //
    }

    /**
     * Remove the specified resource from storage.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function destroy($id)
    {
        //
    }
}

4. Organizer Datatable

namespace App\DataTables;


use App\Organizer;
use Illuminate\Database\Eloquent\Builder;
use Yajra\DataTables\Html\Button;
use Yajra\DataTables\Html\Column;
use Yajra\DataTables\Html\Editor\Editor;
use Yajra\DataTables\Html\Editor\Fields;
use Yajra\DataTables\Services\DataTable;

class OrganizerDatatable extends DataTable
{
    /**
     * Build DataTable class.
     *
     * @param mixed $query Results from query() method.
     * @return \Yajra\DataTables\DataTableAbstract
     */
    public function dataTable($query)
    {
        return datatables($query);
    }

    /**
     * Get query source of dataTable.
     *
     * @return Builder
     */

    public function query()
    {
        $organizers = Organizer::all();

        return $this->applyScopes($organizers);

    }

    /**
     * Optional method if you want to use html builder.
     *
     * @return \Yajra\DataTables\Html\Builder
     */
    public function html()
    {

        return $this->builder()
            ->setTableId("organizers-table")
            ->columns($this->getColumns())
            ->minifiedAjax()
            ->dom('Bfrtip')
            ->orderBy(0, ['asc'])
            ->buttons($this->getButtons());

    }

    /**
     * Get columns.
     *
     * @return array
     */
    protected
    function getColumns()
    {
        return [

            Column::make('firstname'),
            Column::make('lastname'),
            Column::make('email'),
            Column::make('gender'),
            Column::make('phone'),

        ];

    }

    /**
     * Get buttons.
     *
     * @return array
     */

    protected
    function getButtons(): array
    {
        return [
            Button::make('create')->addClass('btn btn-sm'),
            Button::make('reload')->addClass('btn btn-sm'),
            Button::make('export')->addClass('btn btn-sm'),
            Button::make('print')->addClass('btn btn-sm'),
            Button::make('reset')->addClass('btn btn-sm'),

        ];
    }


    /**
     * Get filename for export.
     *
     * @return string
     */
    protected function filename()
    {
        return 'Organizer_' . date('YmdHis');
    }
}

5. Where datatable is displayed

@section('content')

    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-12">
                <h6 class="font-weight-bolder">All Organizers</h6>
                <hr style="width: 100%">
                {!! $dataTable->table([], true) !!}
            </div>
        </div>
    </div>
    @push('scripts')
        {!! $dataTable->scripts() !!}
    @endpush
@endsection

Answer 1

you will add model design

<div class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary">Save changes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

into your design page and call id of your model into create button.... Like This

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

Helping Link please Follow: https://getbootstrap.com/docs/4.0/components/modal/