2014-09-01 260 views
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">&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> 

由於你可以看到第一列鏈接到單個行的視圖,然後它還有一個編輯按鈕,它指向編輯視圖。最後是一個刪除按鈕,它調用引導模式,用戶可以通過它來確認記錄是否被刪除。

當我試圖實現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(),但我的問題是如何呈現觸發模式的刪除按鈕?

回答

1

管理找出這一個。我的答案可能不是解決這個問題的最佳方法,但是這個答案應該可行。

渲染數據表上你的看法

{{ 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' => '[email protected]' 
)); 

DeliveryRequests控制器

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(); 
    }