Html:
<table id="affected-requirement-table" class="table table-hover table-sm table-bordered">
<!--Table head-->
<thead>
<tr>
<th>Requirements</th>
<th>Effect Type</th>
</tr>
</thead>
<!--Table head-->
<!--Table body-->
<tbody>
<!-- Ajax Load -->
</tbody>
<!--Table body-->
</table>
Jquery
$(document).ready(function () {
var affectedRequirementsTable = $('#affected-requirement-table').DataTable({
"scrollY": "200px",
"scrollCollapse": true,
"paging": false,
processing: true,
serverSide: true,
bFilter: false,
"bInfo": false,
"bPaginate": true,
"ordering": false,
"bLengthChange": false,
ajax: {
url: '{!! \Illuminate\Support\Facades\URL::to("cr/requirements-datatables") !!}'
},
columns: [
{data: 'number'},
{data: 'effect-type'}
],
// "fnCreatedRow" : function (row, data, dataIndex) {
// var div = document.createElement("div");
// $(div).html('<select name= "changeRequest[]" class="form-control effect-type-select" id="mySelect"> <option selected="selected" value="None">None</option> <option value="Addition">Addition</option> <option value="Deletion">Deletion</option> </select>');
// $(row).children("td:last-child").append(div);
// }
});
// draw the table
affectedRequirementsTable.draw();
$("#affected-requirement-table").on('change',".effect-type-select",function (e) {
var optionSelected = $("option:selected", this);
var valueSelected = this.value;
console.log(valueSelected);
});
})
маршруты:
Route::get('cr/requirements-datatables', "ChangeRequestController@requirementsAndEffectTypesDatatables");
Контроллер:
public function requirementsAndEffectTypesDatatables(ChangeRequests $request)
{
$changeRequest = DB::table('requirement')->select(['number','id']);
return DataTables::of($changeRequest)->addColumn('effect-type', function ($changeRequest) {
return '
<select name= "changeRequest[]" class="form-control effect-type-select" id="mySelect">
<option selected="selected" value="None">None</option>
<option value="Addition">Addition</option>
<option value="Deletion">Deletion</option>
</select>';
})->rawColumns(['effect-type'])->make(true);
}