单击列编辑而不是编辑按钮

Question

I'm using Yajra datatable, I had an issue as what title said.

here's my controller so far :

public function makeActionButtonsForDatatable($model)
{

    if ($model->employed_type == DriverEmployedType::PARTTIME) {

        return '<a href="' . route('parttimeavailable.create', ['driver' => $model->id]) . '"
                    class="btn btn-default btn-xs"></span>Set Parttime 
                </a>
                <a href="' . route('driver.edit', ['driver' => $model->id]) . '"
                    class="btn btn-primary btn-xs"><span class="fa fa-pencil"></span> Edit
                </a>
                <a id="delBtn" data-url="'.route('driver.destroy', ['driver' => $model->id]).'"
                    data-toggle="modal" data-target=" #modalDelete" data-title="Confirmation" data-table-name="#datatable" data-message="Do you want to delete this record?" 
                    class="btn btn-danger btn-xs delete" >
                    <span class="fa fa-trash-o"></span> Delete
                </a>';

    }

    switch ($model->status) {
        default:
            return'
                <a href="' . route('driver.edit', ['driver' => $model->id]) . '"
                    class="btn btn-primary btn-xs"><span class="fa fa-pencil"></span> Edit
                </a>
                <a id="delBtn" data-url="'.route('driver.destroy', ['driver' => $model->id]).'"
                    data-toggle="modal" data-target=" #modalDelete" data-title="Confirmation" data-table-name="#datatable" data-message="Do you want to delete this record?" 
                    class="btn btn-danger btn-xs delete" >
                    <span class="fa fa-trash-o"></span> Delete
                </a>
            ';
            break;
    }
}

public function makeDatatable($obj) {

    return Datatables::of($obj)
    ->addColumn('action', function ($model) {
            return $this->makeActionButtonsForDatatable($model);
    })
    ->editColumn('full_name', function($model) {
            return '<a href="' . route('driver.edit', ['driver' => $model->full_name]) . '"</a>';
    })
    ->editColumn('employed_type', function($model){
        return DriverEmployedType::getString($model->employed_type);
    })
    ->make(true);
}

and here's my datatable code so far :

$(document).ready(function(){
    var datatable = $('#datatable').DataTable(
    {
        dom: "lrtip",
        responsive: true,
        processing: true,
        serverSide: true,
        bSortCellsTop: true,
        ajax: {
            url:  "{{ route('driver.list') }}",
            data: { '_token' : '{{csrf_token() }}'},
            type: 'POST',
        },
        columns: [
        { data: 'full_name', name: 'full_name', className: 'text-center', },
        { data: 'mobile', name: 'mobile', className: 'text-center', },
        { data: 'nric', name: 'nric', className: 'text-center', },
        { data: 'license', name: 'license', className: 'text-center', },
        { data: 'employed_type', name: 'employed_type', className: 'text-center', },
        { data: 'action', name: 'action', className: 'text-center', orderable: false, searchable: false  },
        ],
    });
});

It didn't works, and didn't display my fullname column. I want is once I click the name it goes to edit form with that driver Id.

any idea ?

Answer 1

I think you missed to close <a> for fullName column, try below code:

public function makeDatatable($obj) {

    return Datatables::of($obj)
    ->addColumn('action', function ($model) {
            return $this->makeActionButtonsForDatatable($model);
    })
    ->editColumn('full_name', function($model) {
            return '<a href="' . route('driver.edit', ['driver' => $model->id]) . '">'. $model->full_name .'</a>';
    })
    ->editColumn('employed_type', function($model){
        return DriverEmployedType::getString($model->employed_type);
    })
    ->make(true);
}

Let me know if you still facing the same!