2
我有一張表顯示從數據庫中提取的數據,現在我試圖執行包Chumper/Datatable。我已經成功地實現了它,除非我的按鈕位於列(每行有可以執行的兩種可能的行動。)添加按鈕觸發啓動模式裏面的Chumper Datatable行
這是刀片語法開始之前,我將其轉換爲數據表
<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">×</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>
由於你可以看到第一列鏈接到單個行的視圖,然後它還有一個編輯按鈕,它指向編輯視圖。最後是一個刪除按鈕,它調用引導模式,用戶可以通過它來確認記錄是否被刪除。
當我試圖實現Chumper數據表,我利用兩條路線的其中一個將服務於視圖,另一個用於Ajax請求
這對AJAX請求路由
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();
}
該方法
查看
{{ 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()
}}
我知道我可以通過一些HTML與功能,採用addColumn()
,但我的問題是如何呈現觸發模式的刪除按鈕?