Add button to trigger bootstrap modal inside Chumper Datatable row

Question

I have a table which displays data fetched from the database, and now I'm trying to implement the package Chumper/Datatable. I have successfully implemented it except the column where my buttons are located (each row has two possible actions that can be performed. )

This is the blade syntax before I started converting it for Datatables

<table class="table table-hover table-striped table-bordered">
<thead>
    <tr>
        <th>SR Number</th>
        <th>Requested at</th>
        <th>Requested To</th>
        <th>Requested From</th>
        <th></th>
        <th></th>
    </tr>
</thead>
<tbody>
    @foreach ($pending_dr as $key => $dr)
        <tr>
            <td>{{ HTML::linkRoute('requisition-slips.show', $dr['delivery_request_number'], $dr['id']) }}</td>
            <td>{{ $dr['created_at'] }}</td>
            <td>{{ $dr['delivery_from'] }}</td>
            <td>{{ $dr['delivery_to'] }}</td>
            <td>{{ HTML::linkRoute('requisition-slips.edit', 'Edit',array($dr['id']), array('class' => 'btn btn-default')) }}</td>
            <td>
                {{ Form::button('<span class="glyphicon glyphicon-trash"></span> Cancel', array('name'=>'cancelDR', 'class' => 'btn btn-danger btn-block', 'type' => 'button',  'data-toggle' => 'modal', 'data-target' => '#cancel-DR-'.$dr['id'])) }}
            </td>
            {{ Form::open(array('route' => array('requisition-slips.destroy', $dr['id']), 'method' => 'delete')) }}
                <div class="modal fade" id='cancel-DR-{{ $dr['id'] }}'>
                  <div class="modal-dialog">
                    <div class="modal-content">
                      <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                        <h4 class="modal-title">Cancel RS</h4>
                      </div>
                      <div class="modal-body">
                        <p>Are you sure want to cancel RS#<b>{{ $dr['delivery_request_number'] }}</b></p>
                      </div>
                      <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">No</button>
                        {{ Form::submit('Yes', array('name'=>'cancelDR', 'class' => 'btn btn-danger')) }}
                      </div>
                    </div><!-- /.modal-content -->
                  </div><!-- /.modal-dialog -->
                </div><!-- /.modal -->
            {{ Form::close() }}
        </tr>
    @endforeach
</tbody>
</table>

As you can see the first columns is linked go to the view of the individual row, then it also has a Edit button, which points to the edit view. And finally a delete button which calls a bootstrap modal, through which the user can confirm if the record will be deleted.

When I tried implementing the Chumper datatable, I made use of the two routes in which one will serve the view and the other for the ajax request

this is the method for the ajax request route

public function ajaxPending()
{
    return Datatable::collection($this->delivery_request->all(array('id','delivery_request_number','created_at', 'delivery_from', 'delivery_to','delivery_status')))
        ->showColumns('delivery_request_number','created_at', 'delivery_from', 'delivery_to', 'Edit')
        // ->addColumn('View', function($model) {
        //    return '<button class="btn btn-danger">View</button>';
        // })
        ->addColumn('delivery_request_number', function($model) {
            return '<a href='.$model->id.'>'.$model->delivery_request_number.'</a>';
        })
        ->addColumn('Edit', function($model) {
            return '<a href='.$model->id.'/edit class="btn btn-default">Edit</a>';
        })
        ->addColumn('Delete', function($model) {
            // Add HTML code of button
            $button =
            '<button name="cancelDR" class="btn btn-danger btn-block" type="button" data-toggle="modal" data-target="#cancel-DR-"'.$model->id.'><span class="glyphicon glyphicon-trash"></span> Cancel</button>';

            return $button.$modal;
        })
        ->searchColumns('delivery_request_number','created_at', 'delivery_from', 'delivery_to','delivery_status')
        ->orderColumns('delivery_request_number','created_at', 'delivery_from', 'delivery_to','delivery_status')
        ->make();
}

View

{{ Datatable::table()
    ->addColumn('RS#','Requested At', 'Requested to', 'Deliver from', 'Edit', 'Delete')       // these are the column headings to be shown
    ->setUrl(route('api.ajax'))   // this is the route where data will be retrieved
    ->render() 
}}

I know I can pass some HTML with the function, using the addColumn(), but my question is how do I render the Delete button which triggers the modal?

Answer 1

Managed to figure this one out. My answer might not be the best way to solve this, but this answer should work.

Render the Datatable on your view

{{ Datatable::table()
    ->addColumn('RS#','Requested At', 'Requested to', 'Deliver from', 'Edit', 'Delete')
    ->setUrl(route('api.ajax'))
    ->render() }}

routes.php

Route::get('api/ajax', array(
    'as'   => 'api.ajax',
    'uses' => 'DeliveryRequestsController@ajax'
));

DeliveryRequests Controller

public function ajax()
    {
        return Datatable::query($this->delivery_request->ajaxDeliveryRequests('Pending'))
            ->showColumns('delivery_request_number','created_at', 'delivery_from', 'delivery_to')
            ->addColumn('delivery_request_number', function($model) {
                return '<a href='.$model->id.'>'.$model->delivery_request_number.'</a>';
            })
            ->addColumn('Edit', function($model) {
                return '<a href='.$model->id.'/edit class="btn btn-default">Edit</a>';
            })
            ->addColumn('Delete', function($model) {
                $modal =
                    '<div class="modal fade" id="cancel-DR-'.$model->id.'">
                        '.Form::open(array("route" => array("requisition-slips.destroy", $model->id), "method" => "delete")).'
                            <div class="modal-dialog">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                                        <h4 class="modal-title">Cancel RS</h4>
                                    </div>
                                    <div class="modal-body">
                                        <p>Are you sure want to cancel RS#<b>'.$model->delivery_request_number.'</b></p>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-default" data-dismiss="modal">No</button>
                                        <button type="submit" class="btn btn-danger" name="cancelDR">Yes</button>
                                    </div>
                                </div><!-- /.modal-content -->
                            </div><!-- /.modal-dialog -->
                        '.Form::close().'
                    </div><!-- /.modal -->';

                return Form::button('<span class="glyphicon glyphicon-trash"></span> Cancel', array('name'=>'cancelDR', 'class' => 'btn btn-danger btn-block', 'type' => 'button',  'data-toggle' => 'modal', 'data-target' => '#cancel-DR-'.$model->id)).$modal;
            })
            ->searchColumns('delivery_request_number','created_at', 'delivery_from', 'delivery_to')
            ->orderColumns('delivery_request_number','created_at', 'delivery_from', 'delivery_to')
            ->make();
    }