У меня есть таблица, в которую будут возвращаться данные, когда пользователь выбирает опцию из выпадающего списка, но добавленные данные не получают с ними функциональность x-editable.
Я хотел бы знать как я могу добавить x-editable к моим добавленным данным в таблице.
Код
view
$(document).ready(function() {
$('.username').editable({
url : this.url,
pk : this.id,
type : 'text',
validate:function(value){
if($.trim(value) === '')
{
return 'This field is required';
}
}
});
$('select[name="school"]').on('change', function() {
var schoolId = $(this).val();
console.log(schoolId);
$('.data_table').DataTable({
"drawCallback": function(settings) {
$('#ddd').html(settings._iRecordsTotal + ' Students');
},
processing: true,
destroy: true,
language: {
processing: '<span>Processing...</span>',
},
serverSide: true,
ajax: '{{ url('
dashboard / studentsIndexData ') }}/' + schoolId,
columns: [{
data: 'id'
},
{
data: 'photo'
},
{
data: 'students'
},
{
data: 'semester'
},
{
data: 'class'
},
{
data: 'action',
orderable: false,
searchable: false
},
],
"order": [
[0, "desc"]
],
dom: 'Bfrtip',
buttons: [{
extend: 'copy',
exportOptions: {
columns: [0, ':visible']
}
},
{
extend: 'excel',
exportOptions: {
columns: ':visible'
}
},
{
extend: 'csv',
exportOptions: {
columns: ':visible'
}
},
{
extend: 'pdfHtml5',
exportOptions: {
columns: [2, 3, 1]
}
},
{
extend: 'print',
exportOptions: {
columns: ':visible'
}
},
'colvis'
]
});
});
});
<script src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.1/jquery-editable/jquery-ui-datepicker/css/redmond/jquery-ui-1.10.3.custom.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.1/bootstrap-editable/js/bootstrap-editable.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-4">
<div class="panel">
<div class="panel-body">
<label for="school">Schools</label>
<select name="school" id="school" class="form-control">
<option value="1">Scool 1</option>
<option value="2">Scool 2</option>
<option value="3">Scool 3</option>
<option value="4">Scool 4</option>
</select>
</div>
</div>
</div>
</div>
<div class="table-responsive">
<table class="table table-striped table-bordered data_table width-full">
<thead>
<tr>
<th width="50">#</th>
<th width="60">Photo</th>
<th>Student</th>
<th>Semester</th>
<th>Class</th>
<th width="200">Action</th>
</tr>
</thead>
</table>
</div>
Back-end
public function indexData($id)
{
$students = DB::table('schools')
->where('schools.id', $id)
->join('school_semesters', 'school_semesters.school_id', '=', 'schools.id')
->join('semester_classes', 'semester_classes.semester_id', '=', 'school_semesters.id')
->join('class_students', 'class_students.class_id', '=', 'semester_classes.id')
->join('users', 'users.id', '=', 'class_students.user_id')
->join('user_profiles', 'users.id', '=', 'user_profiles.user_id')
->select(
\DB::raw('group_concat(DISTINCT school_semesters.name) as semester'),
\DB::raw('group_concat(DISTINCT semester_classes.name) as class'),
'users.name as students',
'user_profiles.photo as photo',
'users.id as id'
)
->groupBy('users.id')
->get();
return datatables()->of($students)
->escapeColumns(['action'])
->setRowId('id')
->addColumn( 'photo', function ( $student ) {
return [
'<a target="_blank" href="' . url('images') . '/' . $student->photo . '"><img src="' . url('images') . '/' . $student->photo . '" alt="' . $student->students . '" width="50" height="50" /></a>'
];
})
->addColumn( 'students', function ( $student ) {
return [
'<a href="#" data-type="text" data-title="Change Student Name" data-name="name" data-url="'. route('schoolAjaxUpdate').'" data-pk="'.$student->id.'" class="username">'.$student->students.'</a>'
];
})
->addColumn( 'action', function ( $student ) {
if(!empty($student->deleted_at)) {
$mm = '<form style="display: inline;" action="'. route('usersRestore', $student->id) .'" method="POST">
<input type="hidden" name="_method" value="POST">
<input type="hidden" name="_token" value="'. csrf_token() .'">
<button type="submit" class="btn btn-xs btn-warning">
<i class="fa text-white fa-recycle"></i> Restore</button>
</form>';
} else {
$mm = '<form style="display: inline;" action="'. route('users.destroy', $student->id) .'" method="POST">
<input type="hidden" name="_method" value="DELETE">
<input type="hidden" name="_token" value="'. csrf_token() .'">
<button type="submit" class="btn btn-xs btn-danger">
<i class="fa text-white fa-trash"></i> Remove</button>
</form>';
}
return [
'<a href="' . route( 'users.show', $student->id ) . '" class="btn btn-xs btn-info"><i class="fa text-white fa-eye"></i> Show</a>',
'<a href="' . route( 'users.edit', $student->id ) . '" class="btn btn-xs btn-primary"><i class="fa text-white fa-pencil"></i> Edit</a>',
$mm
];
})
->toJson();
}
Объяснение
Так что в основном мои данные (на стороне сервера) вернутся к таблице, когда Я выбираю школу, и часть, которая должна быть в x-редактируемой форме, это студентов здесь:
->addColumn( 'students', function ( $student ) {
return [
'<a href="#" data-type="text" data-title="Change Student Name" data-name="name" data-url="'. route('schoolAjaxUpdate').'" data-pk="'.$student->id.'" class="username">'.$student->students.'</a>'
];
})
В настоящее время она возвращается как тег a без какой-либо функциональности x-editable.
есть идеи?