jquery 通过datatables AJAX 属性传递要在控制器中使用的ID

gc0ot86w  于 2023-08-04  发布在  jQuery
关注(0)|答案(1)|浏览(99)

我试图得到产品的变种使用产品的id在控制器和显示他们使用datatables服务器端处理如下

$("#productVariants").DataTable({
    responsive: true,
    lengthChange: false,
    autoWidth: false,
    dom: "Bfrtip",
    buttons: ["pageLength", "copy", "csv", "excel", "pdf", "print"],
    processing: true,
    serverSide: true,
    ajax: {
        url: "/shop/product/variants/",
        type: "GET",
        'data': {
            id: $("#productVariants").attr("rel"),
        },
    },
    columns: [
        { data: "description", name: "description" },
        { data: "cost", name: "cost" },
        { data: "status", name: "status" },
        { data: "id",
            render: function(data, type, row) {
                return (
                    '<div class="dropdown dropdown-action">' +
                    '<a href="#" class="action-icon dropdown-toggle"'+ 
                   'data-toggle="dropdown" aria-expanded="false">'+
                   '<i class="fa fa-ellipsis-v"></i></a>' +
                    '<div class="dropdown-menu dropdown-menu-left">' +
                    '<a href="/shop/product/variants/' +
                    data +
                    '/edit"' +
                    'class="dropdown-item" data-toggle="tooltip"' +
                    'data-placement="top" title="Edit">' +
                    '<i class="fa fa-pen"' +
                    'aria-hidden="true"></i> Edit</a>' +
                    '<a rel="' +
                    data +
                    '" rel1="delete" href="javascript:"' +
                    'class="dropdown-item deleteProductVariant"' +
                    'data-toggle="tooltip" data-placement="top" title="Delete">' +
                   '<i class="fa fa-trash"></i> Delete</a>' +
                    "</div>" +
                    "</div>"
                );
            },
            name: "Action",
            orderable: false,
            searchable: false,
            printable: false
        }
    ],
    stateSave: true,
    bDestroy: true
});

字符串
我有一个路由配置如下

Route::get('/variants/{id}', [ProductController::class, 'variants']);


在控制器中,函数从路由中获取id,如下所示

if ($request->ajax()) {
        $data = $data = ProductVariant::join('statuses','product_variants.status_id',
      'statuses.id')->join('variant_types','product_variants.variant_type_id',
      'variant_types.id')->join('variant_categories','variant_types.cat_id',
      'variant_categories.id')->select('product_variants.id As id',
      'variant_types.name As name','product_variants.cost As cost',
      'variant_categories.name As category', 'statuses.name As status')
      ->where(['product_variants.p_id'=>$id])->get();
            return Datatables::of($data)->addIndexColumn()->make(true);
    }


当我运行它时,我在控制台中得到以下错误

GET http://127.0.0.1:8000/shop/product/variants/?draw=1&columns%
      5B0%5D%5Bdata%5D=category&columns%5B0%5D%5Bname%
      5D=category&columns%5B0%5D%5Bsearchable%5D=true&columns%
      5B0%5D%5Borderable%5D=true&columns%5B0%5D%5Bsearch%5D%5Bvalue
      %5D=&columns%5B0%5D%5Bsearch%5D%5Bregex%5D=false&columns%5B1
      %5D%5Bdata%5D=name&columns%5B1%5D%5Bname%5D=name&columns
      %5B1%5D%5Bsearchable%5D=true&columns%5B1%5D%5Borderable
      %5D=true&columns%5B1%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B1
      %5D%5Bsearch%5D%5Bregex%5D=false&columns%5B2%5D%5Bdata
      %5D=cost&columns%5B2%5D%5Bname%5D=cost&columns%5B2%5D%
      5Bsearchable%5D=true&columns%5B2%5D%5Borderable%5D=true&
      columns%5B2%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B2%
      5D%5Bsearch%5D%5Bregex%5D=false&columns%5B3%5D%5Bdata%5D=
      status&columns%5B3%5D%5Bname%5D=status&columns%5B3%5D%
      5Bsearchable%5D=true&columns%5B3%5D%5Borderable%5D=true&
      columns%5B3%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B3%5D%5
      Bsearch%5D%5Bregex%5D=false&columns%5B4%5D%5Bdata%5D=id&
      columns%5B4%5D%5Bname%5D=Action&columns%5B4%5D%5Bsearchable
      %5D=false&columns%5B4%5D%5Borderable%5D=false&columns%
      5B4%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B4%5D%5Bsearch%5D
      %5Bregex%5D=false&order%5B0%5D%5Bcolumn%5D=0&order%
      5B0%5D%5Bdir%5D=asc&start=0&length=10&search%5Bvalue%5D=&
     search%5Bregex%5D=false&id=742&_=1677158506437 404 (Not Found)


据我所知,一个新的URL正在形成,但还没有找到,我希望使用提供的URL,并传递ID,就像在laravel路由中所做的那样。如何正确地传递id并实现所需的输出?

bq3bfh9z

bq3bfh9z1#

对于任何有同样问题的人,以下是我如何解决这个问题的。我将route方法改为post,从route中删除了id变量,然后按如下所示更改了datatable代码

$("#productVariants").DataTable({
    responsive: true,
    lengthChange: false,
    autoWidth: false,
    dom: "Bfrtip",
    buttons: ["pageLength", "copy", "csv", "excel", "pdf", "print"],
    processing: true,
    serverSide: true,
    ajax: {
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
        url: "/shop/product/variants/",
        type: "POST",
        'data': {
            id: $("#productVariants").attr("rel"),
        },
    },
    columns: [
        { data: "category", name: "category" },
        { data: "name", name: "name" },
        { data: "cost", name: "cost" },
        { data: "quantity", name: "quantity" },
        { data: "status", name: "status" },
        { data: "id",
            render: function(data, type, row) {
                return (
                    '<div class="dropdown dropdown-action">' +
                    '<a href="#" class="action-icon dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><i class="fa fa-ellipsis-v"></i></a>' +
                    '<div class="dropdown-menu dropdown-menu-left">' +
                    '<a href="/shop/product/variants/' +
                    data +
                    '/edit"' +
                    'class="dropdown-item" data-toggle="tooltip"' +
                    'data-placement="top" title="Edit"><i class="fa fa-pen"' +
                    'aria-hidden="true"></i> Edit</a>' +
                    '<a rel="' +
                    data +
                    '" rel1="delete" href="javascript:"' +
                    'class="dropdown-item deleteProductVariant"' +
                    'data-toggle="tooltip" data-placement="top" title="Delete"><i class="fa fa-trash"></i> Delete</a>' +
                    "</div>" +
                    "</div>"
                );
            },
            name: "Action",
            orderable: false,
            searchable: false,
            printable: false
        }
    ],
    stateSave: true,
    bDestroy: true
});

字符串
请注意,唯一重要的更改是方法更改为post

相关问题