时间戳

首页 > 解决方案 > 成功的 AJAX 请求后 jQuery 数据表不绘制

jquery - 成功的 AJAX 请求后 jQuery 数据表不绘制

问题描述

我想提交一个 ajax 调用来切换每个选项卡，并且在成功的 ajax 请求后，将为不同的选项卡内容绘制一个数据表。 在此处输入图像描述

例如当点击Award Type时会有一个ajax请求创建一个数据表并成功返回到append here。数据返回成功，但表没有绘制。这是它的快照... 在此处输入图像描述

这是我的视图文件....正在处理 laravel 项目。

<style>
        .nav-tabs li a {
            padding: 0.75rem 1.25rem;
        }
        .nav-tabs.vertical li {
            border: 1px solid #ddd;
            display: block;
            width: 100%
        }

        .tab-pane {
            padding: 25px 0
        }

    </style>
    <section>
        <div class="container-fluid">
            <div class="card">
                <div class="card-body">
                    <ul class="nav nav-tabs" id="myTab" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" href="#" id="Leave_type-tab" data-toggle="tab" data-target="#Leave_type" role="tab" aria-controls="Leave_type" aria-selected="true">Leave</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link " href="{{route('award_type.index')}}" id="Award_type-tab" data-toggle="tab" data-target="#Award_type" role="tab" aria-controls="Award_type" aria-selected="false">Award Type</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="contact-tab" data-toggle="tab" data-target="#Contact" role="tab" aria-controls="Contact" aria-selected="false">Contact</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>


        <div class="container-fluid">
            <div class="card">
                <div class="card-body">
                    <div class="tab-content" id="myTabContent">

                        <div class="tab-pane fade show active" id="Leave_type" role="tab" aria-labelledby="Leave_type-tab">
                            <!--Contents for Leave starts here-->
                           Leave
                            <!--Contents for Leave ends here-->
                        </div>
                        <div class="tab-pane fade " id="Award_type" role="tab" aria-labelledby="Award_type-tab">
                            <div class="card-header"><h3 class="card-title">Add New Award Type</h3></div>
                            <div class="col-md-4 form-group">
                                <label><strong>{{trans('file.Award Type')}} *</strong></label>
                                <input type="text" name="award_type" id="award_type"  class="form-control"
                                       placeholder="{{trans('file.Award Type')}}">
                            </div>
                            <div class="col-md-4 form-group">
                                <input type="submit" name="award_type_submit" id="award_type_submit" class="btn btn-success" value="Save" />
                            </div>
                        </div>
                        <div class="tab-pane fade" id="Contact" role="tab" aria-labelledby="contact-tab">
                            <!--Contents for Contact starts here-->
                            Contact
                            <!--Contents for Contact ends here-->
                        </div>
                </div>
            </div>
        </div>
        </div>


        <div class="container-fluid">
            <div class="card">
                <div class="card-body">
                    <div id="my_table"></div>
                </div>
            </div>
        </div>


    </section>

    <script type="text/javascript">

    $('[data-toggle="tab"]').click(function(e) {
        let loadurl = $(this).attr('href');

        $.ajax({
            url: loadurl,
            dataType: "json",
            success: function (result) {

                $('#my_table').html(result.html);
            }})
    });

    </script>

我的控制器文件将接收 ajax 请求....

<?php


namespace App\Http\Controllers\Constants;


use App\AwardType;
use App\Http\Controllers\Controller;

class AwardTypeController extends Controller {

    public function index()
    {

            if (request()->ajax())
            {
                return datatables()->of(AwardType::select('id','award_name')->get())
                    ->setRowId(function ($award_type)
                    {
                        return $award_type->id;
                    })
                    ->addColumn('action', function ($data)
                    {
                        if (auth()->user()->can('user-edit'))
                        {
                            $button = '<button type="button" name="edit" id="' . $data->id . '" class="edit btn btn-primary btn-sm">Edit</button>';
                            $button .= '&nbsp;&nbsp;';
                            $button .= '<button type="button" name="delete" id="' . $data->id . '" class="delete btn btn-danger btn-sm">Delete</button>';
                            return $button;
                        } else
                        {
                            return '';
                        }
                    })
                    ->rawColumns(['action'])
                    ->make(true);
            }
            $view = view('settings.constants.award_type')->render();

            return response()->json(['html'=>$view]);
        }


}

最后是数据表.....


<div class="table-responsive">
    <table id="award_type-table" class="table table-striped">
        <thead>
        <tr>
            <th class="not-exported"></th>
            <th>{{trans('file.Award name')}}</th>
            <th>{{trans('file.action')}}</th>
        </tr>
        </thead>

    </table>
</div>



<script type="text/javascript">


    $(document).ready(function(){



        var table_table = $('#award_type-table').DataTable({
            responsive: true,
            fixedHeader: {
                header: true,
                footer: true
            },
            processing: true,
            serverSide: true,
            ajax:{
                url: "{{ route('award_type.index') }}",
            },

            columns:[
                {
                    data: null,
                    orderable:false,
                    searchable:false
                },
                {
                    data: 'award_name',
                    name: 'award_name',
                },
                {
                    data: 'action',
                    name: 'action',
                    orderable: false
                }
            ],



            "order": [],
            'language': {
                'lengthMenu': '_MENU_ {{trans("file.records per page")}}',
                "info": '{{trans("file.Showing")}} _START_ - _END_ (_TOTAL_)',
                "search": '{{trans("file.Search")}}',
                'paginate': {
                    'previous': '{{trans("file.Previous")}}',
                    'next': '{{trans("file.Next")}}'
                }
            },
            'columnDefs': [
                {
                    "orderable": false,
                    'targets': [0, 2],
                },
                {
                    'render': function(data, type, row, meta){
                        if(type === 'display'){
                            data = '<div class="checkbox"><input type="checkbox" class="dt-checkboxes"><label></label></div>';
                        }

                        return data;
                    },
                    'checkboxes': {
                        'selectRow': true,
                        'selectAllRender': '<div class="checkbox"><input type="checkbox" class="dt-checkboxes"><label></label></div>'
                    },
                    'targets': [0]
                }
            ],





            'select': {style: 'multi', selector: 'td:first-child'},
            'lengthMenu': [[10, 25, 50, -1], [10, 25, 50, "All"]],
            dom: '<"row"lfB>rtip',
            buttons: [
                {
                    extend: 'pdf',
                    text: '{{trans("file.PDF")}}',
                    exportOptions: {
                        columns: ':visible:Not(.not-exported)',
                        rows: ':visible'
                    },
                },
                {
                    extend: 'csv',
                    text: '{{trans("file.CSV")}}',
                    exportOptions: {
                        columns: ':visible:Not(.not-exported)',
                        rows: ':visible'
                    },
                },
                {
                    extend: 'print',
                    text: '{{trans("file.Print")}}',
                    exportOptions: {
                        columns: ':visible:Not(.not-exported)',
                        rows: ':visible'
                    },
                },

                {
                    extend: 'colvis',
                    text: '{{trans("file.Column visibility")}}',
                    columns: ':gt(0)'
                },
            ],
        });
        new $.fn.dataTable.FixedHeader( table_table );
    });

    </script>

标签： jqueryajaxlaraveldatatables

解决方案

推荐阅读