Question

我正在显示一个usertypes表。最后一列是一个操作列，其中包含一个按钮，用于打开一个用于编辑该usertype的模式。

由于某种原因，按钮什么都不做。

控制器：

public function usertype_getall(){
    $usertype = Usertype::select(['id','name','price','tv','created_at','updated_at']);
    return Datatables::of($usertype)
        ->addColumn('action',function($usertype){
            return '<button class="btn btn-sm yellow edit" onclick="edit_usertype('.$usertype->id .')"><i class="fa fa-cog"></i></button>';
        })
        ->setRowId('id')
        ->editColumn('tv',function($usertype){
            if($usertype->tv == 1){
                return 'Ja';
            }else{
                return 'Nee';
            }
        })
        ->editColumn('price','EUR {{$price}}')
        ->removeColumn('id')
        ->make(true);
}

我以我知道的两种方式加入。通过class / id和function但没有工作。预期的功能

@extends('app')
@section('content')
<div class="row"><div class='col-md-12'>
        <div class='portlet light bordered'>
            <div class='portlet-title'>
                <div class='caption font-red-sunglo'>
                    Ledentypes
                </div>
                <div class="actions">
                    <a id='create' href="#"  class="btn btn-circle btn-default">
                        <i class="fa fa-fax"></i> Nieuw lid </a>
                </div>
            </div>
            <div class='portlet-body'>
                <table id='type_table' class='table table-hover table-striped table-bordered'>
                    <thead>
                    <tr>
                        <th>Naam</th>
                        <th>Prijs</th>
                        <th>Tv</th>
                        <th>Created At</th>
                        <th>Updated At</th>
                        <th>Actions</th>
                    </tr>
                    </thead>
                    <tbody id='speeltypes_tbody'>

                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@stop
@push('scripts')
<script type="text/javascript">
$(document).ready(function(){
    $(function(){
        edit_usertype(5);
        function edit_usertype(id){
            alert("dsfds");
        }
        $(".edit").on('click',function(){
            alert('dsmfksdmfl');
        })
    })
    $(function() {
        $('#type_table').DataTable({
            processing: true,
            serverSide: true,
            ajax: '{{ url('c_usertype_getall') }}',
            columns: [
                {data: 'name', name: 'usertypes.name'},
                {data: 'price', name: 'usertypes.price'},
                {data: 'tv', name: 'usertypes.tv'},
                {data: 'created_at', name: 'usertypes.created_at'},
                {data: 'updated_at', name: 'usertypes.updated_at'},
                {data: 'action', name: 'action', orderable: false, searchable: false}
            ]
        });
    });
    $("#create").on('click',function(){
                $.ajax({
                    url :'./c_usertype_new',
                    type :'GET',
                    success : function(res){
                        $("#modal").html(res);
                        $("#modal").modal('show');
                    }
                })
            }
    )
})
</script>
@endpush

实际上唯一有效的jquery是datatable / create部分。即使是简单的警报也不会发射。当我按下按钮时我得到错误，没有定义函数edit_usertype。有什么想法吗？

Answer 1

这是因为删除按钮在构造数据表之前无法绑定。

这里是解决方案，需要在datatables DOM事件之后等待

https://datatables.net/reference/event/

$('#myTable').on('draw.dt', function () {
    alert('Table redrawn');
    // do the button binding work..
});

Laravel 5 yajra数据表中没有响应的按钮

1 个答案: