0

我有一个 Laravel 5.8 项目,我想将 Ajax 用于我的 CRUD,当然我使用数据表。它工作正常,我成功地将数据保存在数据库中,但有两个问题。我先给你看一下代码。

这是我的Controller

<?php

namespace App\Http\Controllers\Admin;

use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use App\Restaurant;
use App\Kitchen;
use Validator;

class RestaurantsController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        if(request()->ajax())
        {
            return datatables()->of(Restaurant::latest()->get())
                    ->addColumn('action', function($data){
                        $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;
                    })
                    ->rawColumns(['action'])
                    ->make(true);
        }
        return view('admin.restaurants.index');
    }

    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        $rules = array(
            'naziv' => 'required|unique:restaurants|max:90',
            'adresa' => 'required|max:150',
            /*
            'pon_pet' => 'required',
            'min_dostava' => 'required|numeric|max:5',
            'vrijeme_dostave' => 'required|max:10|numeric',
            'cijena_dostave' => 'required|numeric|max:5',
            'podrucije_grada' => 'required',
            'br_telefona' => 'required|numeric|unique:restaurants',
            'lokacija' => 'max:999',
            'kuhinja_id' => 'required',
            'user_id' => 'required'
            */
        );

        $error = Validator::make($request->all(), $rules);

        if($error->fails())
        {
            return response()->json(['errors' => $error->errors()->all()]);
        }

        $form_data = array(
            'naziv' => $request->naziv,
            'adresa' => $request->adresa,
            /*
            'pon_pet' => $request->pon_pet,
            'min_dostava' => $request->min_dostava,
            'vrijeme_dostave' => $request-> vrijeme_dostave,
            'cijena_dostave' => $request->cijena_dostave,
            'podrucije_grada' => $request->podrucije_grada,
            'br_telefona' => $request->br_telefona,
            'lokacija' => $request->lokacija,
            'kuhinja_id' => $request->kuhinja_id,
            'user_id' => $request->user_id
            */
        );

        Restaurant::create($form_data);

        return response()->json(['success' => 'Data Added successfully.']);
    }
}

在我的blade

!-- DataTales Example -->
<div class="card shadow mb-4">
    <div class="card-header py-3">
        <h6 class="m-0 font-weight-bold">Baza restorana</h6>
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Naziv</th>
                        <th>Adresa</th>
                        <th>Action</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
</div>
<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle"
    aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <span id="form_result"></span>
                <form method="post" id="sample_form" class="form-horizontal" enctype="multipart/form-data">
                    @csrf
                    <div class="form-group">
                        <label class="control-label col-md-4">Naziv</label>
                        <div class="col-md-8">
                            <input type="text" name="naziv" id="naziv" class="form-control" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-md-4">Adresa</label>
                        <div class="col-md-8">
                            <input type="text" name="adresa" id="adresa" class="form-control" />
                        </div>
                    </div>
                    <br />
                    <div class="form-group" align="center">
                        <input type="hidden" name="action" id="action" />
                        <input type="hidden" name="hidden_id" id="hidden_id" />
                        <input type="submit" name="action_button" id="action_button" class="btn btn-warning"
                            value="Add" />
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

@endsection

<script>
    $(document).ready(function(){

 $('#dataTable').DataTable({
  processing: true,
  serverSide: true,
  ajax:{
   url: "{{ route('admin.restaurants.index') }}",
  },
  columns:[
   {
    data: 'id',
    name: 'id'
   },
   {
    data: 'naziv',
    name: 'naziv'
   },
   {
    data: 'adresa',
    name: 'adresa'
   },
   {
    data: 'action',
    name: 'action',
    orderable: false
   }
  ]
 });

 $('#create_record').click(function(){
  $('.modal-title').text("Add New Record");
     $('#action_button').val("Add");
     $('#action').val("Add");
     $('#formModal').modal('show');
 });

 $('#sample_form').on('submit', function(event){
  event.preventDefault();
  if($('#action').val() == 'Add')
  {
   $.ajax({
    url:"{{ route('admin.restaurants.store') }}",
    method:"POST",
    data: new FormData(this),
    contentType: false,
    cache:false,
    processData: false,
    dataType:"json",
    success:function(data)
    {
     var html = '';
     if(data.errors)
     {
      html = '<div class="alert alert-danger">';
      for(var count = 0; count < data.errors.length; count++)
      {
       html += '<p>' + data.errors[count] + '</p>';
      }
      html += '</div>';
     }
     if(data.success)
     {
      html = '<div class="alert alert-success">' + data.success + '</div>';
      $('#sample_form')[0].reset();
      $('#dataTable').DataTable().ajax.reload();
     }
     $('#form_result').html(html);
    }
   })
  }
 });
});
</script>

问题

一个问题是,当我单击Add提交输入时,它会保存我的数据,但它仅在白页上显示响应,而不仅仅是将其添加到数据表中。

第二问题是我的数据甚至没有显示在数据表中。它是空的,我不知道为什么。

请帮忙,我该怎么办?有什么建议么?

4

2 回答 2

0

您是否在 web.php 中添加了 admin.restaurants.index ?

于 2020-08-31T15:40:58.043 回答
0

我认为您的两个问题都来自同一个问题,您重新分配数据表,使其变为空(因为您没有使用以前的配置分配它$('#dataTable').DataTable())试试这个,首先将您的数据表添加到变量中:

let datatable = $('#dataTable').DataTable({
...

因此,您可以刷新相同的数据表而无需重新分配它

datatable.ajax.reload()
于 2020-08-31T16:05:00.430 回答