如何解决yajra datatables在移动视图中响应表外
我在这里和google上搜索了此问题,但尚未解决,我使用Yajra创建了一个响应数据表,当一个字段仅包含几个字符串时,该数据表可以正常运行,即使在移动视图中也是如此。但是当该字段包含一个长字符串时,数据表中的列会从表中移出。我希望有人可以帮助我。 对不起,我的语言很难理解,谢谢。
App \ Http \ Controller
public function dataTable()
{
$data = SubjectMatter::query();
return Datatables::of($data)
->addIndexColumn()
->addColumn('course',function (SubjectMatter $model) { // get name from table users
return $model->course->name;
})
->addColumn('teacher',function (SubjectMatter $model) { // get name from table users
return $model->teacher->name;
})
->addColumn('classroom',function (SubjectMatter $model) { // get name from table users
return $model->classroom->name;
})
->addColumn('status',function ($row) { //get status Teacher from table users active or inactive
if ($row->status == 0) {
return '<span class="badge mr-3 badge-pill badge-danger">InActive</span>';
} else {
return '<span class="badge mr-3 badge-pill badge-success">Active</span>';
}
})
->addColumn('action',function ($row) { //button edit and delete
$btn = '<a href="javascript:void(0)"
data-id="' . $row->id . '" data-original-title="Edit"
id="editBtn"><i class="fa fa-edit text-primary"></i></a> |';
$btn = $btn . ' <a href="javascript:void(0)"
data-id="' . $row->id . '" data-original-title="Delete"
id="deleteBtn"><i class="fa fa-trash text-danger"></i></a>';
return $btn;
})
->addColumn('start',function ($row){
return \Carbon\Carbon::parse($row->start)->format("d F Y");
})
->addColumn('end',function ($row) { //button edit and delete
if ($row->end == null) {
$end = 'No end of materi';
} else {
$end = \Carbon\Carbon::parse($row->end)->format("d F Y");
}
return $end;
})
->rawColumns(['action','course','teacher','classroom','status','start','end'])
->make(true);
}
此视图:
<table id="dataTable" class="table table-sm mb-0 dt-responsive" style="width:100%;font-size=12px">
<thead class="bg-light">
<tr>
<th>No</th>
<th>Name</th>
<th>Course</th>
<th>Teacher</th>
<th>Classroom</th>
<th>Information</th>
<th>Youtube</th>
<th>Download Link</th>
<th>Start Date</th>
<th>End Date</th>
<th>Status</th>
<th>Action</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
var table = $('#dataTable').DataTable({
responsive: true,processing: true,serverSide: true,searching: true,ordering: true,ajax: "{{ route('jsonSubjectMatter') }}",lengthMenu: [
[5,10,25],[5,25]
],columnDefs: [{
"width": "5%","targets": 0
},{
"width": "50%","targets": 5
},],columns: [{
data: 'DT_RowIndex',name: 'DT_RowIndex',orderable: false,searchable: false
},{
data: 'name',name: 'name',},{
data: 'course',name: 'course',{
data: 'teacher',name: 'teacher',{
data: 'classroom',name: 'classroom',{
data: 'information',name: 'information',{
data: 'youtube',name: 'youtube',{
data: 'link',name: 'link',{
data: 'start',name: 'start',{
data: 'end',name: 'end',{
data: 'status',name: 'status',{
data: 'action',name: 'action',]
});
</script>
https://i.stack.imgur.com/FFZH5.png
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。