jquery - 使用 Laravel 重新加载 DataTables AJAX

Question

已更新

这个想法是这样的，当模式打开以创建或编辑用户时，会进行验证，一旦您单击提交，它将隐藏模式并刷新页面上已有的数据表，该数据表使用 jquery datattabes。网。问题是点击提交后没有任何反应。

这是我一直用来指导自己的信息:

http://datatables.net/reference/api/ajax.reload()

http://bootstrapvalidator.com/examples/ajax-submit/

<script>

$(document).ready(function() {

var oTable = $('#dataTable-users').dataTable( {
    "bProcessing": true,
    "bServerSide": true,
    "sAjaxSource": "{{ URL::to('usuarios.tabla') }}"
})

$('.editUser')
    .bootstrapValidator( {
        excluded: [':disabled', ':hidden', ':not(:visible)'],
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            first_name: {
                validators: {
                    notEmpty: {
                        message: 'El nombre es obligatorio y no puede quedar vacio.'
                    },
                    stringLength: {
                        min: 3,
                        max: 100,
                        message: 'El nombre no puede tener menos de 3 letras.'
                    },
                    regexp: {
                        regexp: /^[a-zA-Z]+$/,
                        message: 'El nombre solo puede contener letras y espacios.'
                    }
                }
            },

            last_name: {
                validators: {
                    notEmpty: {
                        message: 'El apellido es obligatorio y no puede quedar vacio.'
                    },
                    stringLength: {
                        min: 3,
                        max: 100,
                        message: 'El apellido no puede tener menos de 3 letras.'
                    },
                    regexp: {
                        regexp: /^[a-zA-Z]+$/,
                        message: 'El apellido solo puede contener letras y espacios.'
                    }
                }
            },

            email: {
                validators: {
                    notEmpty: {
                        message: 'El email es obligatorio y no puede quedar vacio.'
                    },
                    emailAddress: {
                        message: 'La información ingresada no corresponde a un email.'
                    }
                }
            }
        }
    })
    .on('success.form.bv', function(e) {
        // Prevent form submission
        e.preventDefault();

        var $form = $(e.target),                        // The form instance
            bv    = $form.data('bootstrapValidator');   // BootstrapValidator instance

        // Use Ajax to submit form data
        $.post($form.attr('action'), $form.serialize(), function(result) {
            $('#user-modal').modal("hide");
            oTable.ajax.url( 'http://localhost:8888/adp/usuarios.tabla' ).load();
        });
    });
});
</script>

还有景色

@foreach($users as $key => $value)
<div class="modal fade edit-user-modal{{ $value->id }} user-modal" id="user-modal" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true" >
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">Editando usuario <strong>{{ $value->username }}</strong></h4>
            </div>
            <div class="modal-body">

                {{ Form::model($value, array('route' => array('usuarios.update', $value->id), 'class' => 'editUser', 'method' => 'PUT')) }}

                <div class="form-group">
                    {{ Form::label('password', 'Contraseña') }}
                    {{ Form::password('password', array('class' => 'form-control')) }}
                </div>

                <div class="form-group">
                    {{ Form::label('first_name', 'Nombres') }}
                    {{ Form::text('first_name', Input::old('first_name'), array('class' => 'form-control')) }}
                </div>

                <div class="form-group">
                    {{ Form::label('last_name', 'Apellidos') }}
                    {{ Form::text('last_name', Input::old('last_name'), array('class' => 'form-control')) }}
                </div>

                <div class="form-group">
                    {{ Form::label('email', 'Email') }}
                    {{ Form::text('email', Input::old('email'), array('class' => 'form-control')) }}
                </div>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
                &nbsp;
                {{ Form::token() }}
                {{ Form::submit('Editar usuario', array('class' => 'btn btn-primary')) }}
                {{ Form::close() }}
            </div>
        </div>
    </div>
</div>

@endforeach

Answer 1

如果您使用 Laravel 包 Yajra DataTable ( https://github.com/yajra/laravel-datatables )，

window.LaravelDataTables["user-table"].ajax.reload();

我希望这会对某人有所帮助。