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>@R_169_4045@ion</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: '@R_169_4045@ion',name: '@R_169_4045@ion',{
                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 (将#修改为@）