Laravel-datatables: ๋ฐ์ดํ„ฐ ํ…Œ์ด๋ธ” ๊ฒฝ๊ณ  ajax ์˜ค๋ฅ˜ 404 ์ฐพ์„ ์ˆ˜ ์—†์Œ

์— ๋งŒ๋“  2016๋…„ 08์›” 28์ผ  ยท  10์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: yajra/laravel-datatables

๋ฌธ์ œ ์š”์•ฝ ๋˜๋Š” ๊ธฐ๋Šฅ ์š”์ฒญ

๋‚˜๋Š” laravel์„ ์ฒ˜์Œ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. jquery ํ”Œ๋Ÿฌ๊ทธ์ธ์„ ์‚ฌ์šฉํ•˜์—ฌ datatable์„ ์‹คํ–‰ํ•  ์ˆ˜์žˆ์—ˆ์Šต๋‹ˆ๋‹ค.
์„œ๋ฒ„ ์ธก ์ฒ˜๋ฆฌ๋ฅผ ๋ถ€ํƒํ•ฉ๋‹ˆ๋‹ค. ์š” ์ „์— 404 ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ–ˆ์Šต๋‹ˆ๋‹ค. ์˜ค๋Š˜ ๋‚˜๋Š” ๋งŒ๋‚ฌ๋‹ค
500 ๋‚ด๋ถ€ ์„œ๋ฒ„ ์˜ค๋ฅ˜. ์ •์˜๋˜์ง€ ์•Š์€ ๋ฉ”์„œ๋“œ Yajra \ Datatables \ Datatables๋ฅผ ํ˜ธ์ถœํ•ฉ๋‹ˆ๋‹ค.

  • ์ •์˜๋˜์ง€ ์•Š์€ ๋ฉ”์„œ๋“œ Yajra \ Datatables \ Datatables :: eloquent ()์— ๋Œ€ํ•œ ํ˜ธ์ถœ์ด ์žˆ์Šต๋‹ˆ๋‹ค. ์–ด์ œ 404 ํŒŒ์ผ์„ ์ฐพ์„ ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค. ์„œ๋ฒ„ ์ธก ์ฒ˜๋ฆฌ๋ฅผ ์‹คํ–‰ํ•  ์ˆ˜ ์žˆ๋„๋ก ์˜ค๋ฅ˜ ์ˆ˜์ •์„ ๋„์™€์ฃผ์„ธ์š”. ์›์ธ์„ ์•Œ ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค. ์ƒ‰์ธ์—์„œ ์ •๋ ฌ ๋ฐ ๊ฒ€์ƒ‰์„ ์‚ฌ์šฉํ•˜๊ณ ์žˆ๋Š” ๊ฒƒ์ผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ?
  • ์™ผ์ชฝ ์กฐ์ธ์— ๋Œ€ํ•œ ๋ฐ๋ชจ๋„ ํ™•์ธํ•˜๋ ค๊ณ ํ–ˆ์ง€๋งŒ ๋ฐ๋ชจ๋ฅผ๋ฐ›์„ ์ˆ˜ ์—†์—ˆ์Šต๋‹ˆ๋‹ค.
    ๊ฐ€์ž…์—๋Š” ๋ฒ”์ฃผ๊ฐ€ ์žˆ์œผ๋ฏ€๋กœ ์กฐ์ธ์ด ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค. ** _ ์กฐ์ธ์—์„œ ๊ฐ€์ ธ์˜จ ๋ฐ์ดํ„ฐ๋ฅผ ์–ด๋–ป๊ฒŒ ์ถœ๋ ฅํ•ฉ๋‹ˆ๊นŒ?
    ์—ด์—? ์„œ๋ฒ„ ์ธก ์ฒ˜๋ฆฌ์— ์‚ฌ์šฉ๋˜๋Š” ์กฐ์ธ์— ๋Œ€ํ•œ ๊ฐ„๋‹จํ•œ ์˜ˆ๋ฅผ ์ œ๊ณต ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๊นŒ?
  • ์—ด์—๋ณด๊ธฐ ๋ฐ ํŽธ์ง‘ ๋ฒ„ํŠผ๋„ ํ•„์š”ํ•œ ๊ฒฝ์šฐ ์–ด๋–ป๊ฒŒ ๋ฐฐ์น˜ํ•ฉ๋‹ˆ๊นŒ?

์ด๊ฒƒ์„ ๋ด ์ฃผ์…”์„œ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค.

๋ฌธ์ œ์˜ ์ฝ”๋“œ ์Šค ๋‹ˆํŽซ

image
์—ฌ๊ธฐ๊ฐ€ ..
image
index.blade.php
image
์„œ๋น„์Šค ์ œ๊ณต์ž
image
๋ณ„๋ช…
image

๋‹ค์Œ ๊ฐ€์ž…

๊ณต์šฉ ํ•จ์ˆ˜ ์ƒ‰์ธ ($ request ์š”์ฒญ) {

    $categories = Category::all();

    $query = Accession::select('*');

    //this is for links that will run query according to
    //category type

    if ($request->input('type')){

        switch ($request->input('type')){

            case 'Photo':

                $query->where('category_id', 2);

                break;

            case 'Field Notes':

                $query->where('category_id', 3);

                break;

            case 'Audio Recording':

                $query->where('category_id', 4);

                break;

            case 'Instrument':

                $query->where('category_id', 5);

                break;

            case 'Music Scores':

                $query->where('category_id', 6);

                break;

            case 'Video':


                $query->where('category_id', 7);

                break;

            case 'Vertical Files':

                $query->where('category_id', 8);

                break;

            default:

                $query->orderBy('id', 'asc')->get();
        }

        $accessions = $query->orderBy('id')->get();
        return view('accessions.index', compact('accessions', 'categories'));


    }

    //this is for search bar

    $search = $request->input('search'); //<-- we use global request to get the param of URI

    if($search){

        $accessions = Accession::where('groupcountry','LIKE','%'.$search.'%')
                    ->orWhere('description', 'LIKE', '%'.$search.'%')
                    ->orWhere('author', 'LIKE', '%'.$search.'%')
                    ->orWhere('accession_no','LIKE','%'.$search.'%')
                    ->orWhere('year','LIKE','%'.$search.'%')
                    ->paginate(10);

        return view('accessions.index', compact('accessions', 'categories'));
    }
    else{


        $accessions = Accession::orderBy('id', 'asc')->get();
        return view('accessions.index', compact('accessions', 'categories'));
    }


}

์‹œ์Šคํ…œ ์„ธ๋ถ€ ์ •๋ณด

  • ์šด์˜ ์ฒด์ œ Windows 10
  • PHP ๋ฒ„์ „ PHP 5.6.20
  • Laravel ๋ฒ„์ „ Laravel Framework ๋ฒ„์ „ 5.2.45
  • Laravel-Datatables ๋ฒ„์ „ 6.0
question

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

404 Not Found ๋Š” php artisan serve ์‚ฌ์šฉํ•  ๋•Œ ํ™˜๊ฒฝ ๋ฌธ์ œ๋กœ ์ธํ•ด ๊ฐ„ํ—์ ์œผ๋กœ ๋ฐœ์ƒํ•˜๋Š” dataTables ๋ฌธ์ œ์ž…๋‹ˆ๋‹ค. ์ด ๋ฌธ์ œ๋ฅผ ๋ฐฉ์ง€ํ•˜๋ ค๋ฉด ๋ฐœ๋ ˆ, ํ™ˆ์Šคํ…Œ๋“œ ๋˜๋Š” wamp / xampp๋ฅผ ์‚ฌ์šฉํ•˜์‹ญ์‹œ์˜ค.

๋ชจ๋“  10 ๋Œ“๊ธ€

YajraDatatables \ FacadesDatatables๋ฅผ ์‚ฌ์šฉํ•˜๋„๋ก ๋„ค์ž„ ์ŠคํŽ˜์ด์Šค๋ฅผ ๋ณ€๊ฒฝํ–ˆ์Šต๋‹ˆ๋‹ค.
์ด์ œ ํ…Œ์ด๋ธ”์— ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ•˜๋”๋ผ๋„ ํ‘œ์‹œ๋ฉ๋‹ˆ๋‹ค.

image

์˜ค๋ฅ˜๋Š” ์˜ค๋ฅ˜ 200์ž…๋‹ˆ๋‹ค.

์˜ค๋ฅ˜๋ฅผ ๋” ์ž˜ ๋ณด๋ ค๋ฉด ajax ์‘๋‹ต์„ ๊ฒ€์‚ฌ ํ•ด๋ณด์‹ญ์‹œ์˜ค. ๋˜ํ•œ ์—ด๊ณผ js๊ฐ€ ํ…Œ์ด๋ธ” ๊ตฌ์กฐ์™€ ์ผ์น˜ํ•˜๋Š”์ง€ ๋‹ค์‹œ ํ™•์ธํ•ด์•ผ ํ•  ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๊ฒƒ์€ ์•„๋งˆ๋„ js ๋ฌธ์ œ ์ผ ๊ฒƒ์ž…๋‹ˆ๋‹ค.

์‘๋‹ต ํ•ด ์ฃผ์…”์„œ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค. ์˜ˆ, ์•„์•ฝ์Šค ์‘๋‹ต์„ ํ™•์ธํ–ˆ์Šต๋‹ˆ๋‹ค. JSON ๋ฆฐํŠธ๊ฐ€ ์ข‹์•„ ๋ณด์ž…๋‹ˆ๋‹ค. ์˜ค๋ฅ˜ 200์ด ์‚ฌ๋ผ์กŒ์Šต๋‹ˆ๋‹ค. ์—ด๊ณผ js๋ฅผ ํ™•์ธํ•˜๊ณ  ํ…Œ์ด๋ธ” ๊ตฌ์กฐ์™€ ์ผ์น˜์‹œํ‚ต๋‹ˆ๋‹ค. ์ง€๊ธˆ๊นŒ์ง€ ์˜ค๋ฅ˜๋Š”

image
๋‹ค์‹œ ํ™•์ธํ•ฉ๋‹ˆ๋‹ค

image

image

image

404 Not Found ๋Š” php artisan serve ์‚ฌ์šฉํ•  ๋•Œ ํ™˜๊ฒฝ ๋ฌธ์ œ๋กœ ์ธํ•ด ๊ฐ„ํ—์ ์œผ๋กœ ๋ฐœ์ƒํ•˜๋Š” dataTables ๋ฌธ์ œ์ž…๋‹ˆ๋‹ค. ์ด ๋ฌธ์ œ๋ฅผ ๋ฐฉ์ง€ํ•˜๋ ค๋ฉด ๋ฐœ๋ ˆ, ํ™ˆ์Šคํ…Œ๋“œ ๋˜๋Š” wamp / xampp๋ฅผ ์‚ฌ์šฉํ•˜์‹ญ์‹œ์˜ค.

@yajra . ์˜ˆ. ํ˜„์žฌ xampp๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ๊ณ„์† ๊ฒ€์ƒ‰

๊ฒฝ๋กœ ์ •์˜๊ฐ€ ๊ฒ€ํ† ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ๊ฐ„ํ—์  ์ธ 404์ด์ง€๋งŒ ajax๊ฐ€ ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ˜ํ™˜ํ•ฉ๋‹ˆ๋‹ค. ํ™˜๊ฒฝ ๋ฌธ์ œ์— ๋Œ€ํ•ด ๋™์˜ํ•ด์•ผํ•œ๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.

heroku์—์„œ ๋ผ์ด๋ธŒ ์•ฑ์„ ๋ฐฐํฌํ–ˆ์Šต๋‹ˆ๋‹ค. 404๊ฐ€ ์‚ฌ๋ผ์กŒ์Šต๋‹ˆ๋‹ค. ๊ทธ๋ž˜์„œ ์ด๊ฒƒ์€ ํ™•์ธ ๋œ ํ™˜๊ฒฝ ๋ฌธ์ œ์ž…๋‹ˆ๋‹ค. ์ด๊ฒƒ์„ ๋‹ซ์Šต๋‹ˆ๋‹ค. @yajra ์˜ค๋ฅ˜๋ฅผ

์œ„์˜ ์†”๋ฃจ์…˜์€ ํ”„๋กœ์ ํŠธ๋ฅผ XAMPP์˜ HTDOCS ๋˜๋Š” WAMPP์˜ www๋กœ ์ „์†กํ•˜๊ฑฐ๋‚˜ ๋ผ์ด๋ธŒ๋กœ ์‹คํ–‰ํ•˜๊ธฐ ๋งŒํ•˜๋ฉด๋ฉ๋‹ˆ๋‹ค.

@ marker17 ์€ ๋‹ค์Œ๊ณผ ๊ฐ™์ด javascript ์™€ web.php ๋ฅผ

 $(document).ready(function () {
    var table = $('#example').DataTable({
        dom: 'lBrtip',
        processing: true,
        serverSide: true,
        ajax: {
            'url':'{!!url("ajax/chapter/list")!!}',
            'type': 'POST',
            'headers': {
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
            }
            },

        orderCellsTop: true,
        fixedHeader: true,

        "columns": [{
                data: 'DT_RowIndex',
                orderable: false,
                searchable: true
            },

            {data: 'stream_id'},
            {data: 'course_id'},
            {data:  'subject_id'},
            {data:  'chapter_name'},
            {data: 'status'},
            {data: 'edit_delete',orderable: false},
        ],
    });

});

๊ทธ๋ฆฌ๊ณ  web.php

๊ฒฝ๋กœ :: ์ž„์˜ ( 'ajax / chapter / list', 'YourController @Method ');

์ด ์ฝ”๋“œ๋Š” ๋‚˜๋ฅผ ์œ„ํ•ด ์ผํ–ˆ์Šต๋‹ˆ๋‹ค.

@ marker17 ์€ ๋‹ค์Œ๊ณผ ๊ฐ™์ด javascript ์™€ web.php ๋ฅผ

 $(document).ready(function () {
    var table = $('#example').DataTable({
        dom: 'lBrtip',
        processing: true,
        serverSide: true,
        ajax: {
            'url':'{!!url("ajax/chapter/list")!!}',
            'type': 'POST',
            'headers': {
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
            }
            },

        orderCellsTop: true,
        fixedHeader: true,

        "columns": [{
                data: 'DT_RowIndex',
                orderable: false,
                searchable: true
            },

            {data: 'stream_id'},
            {data: 'course_id'},
            {data:  'subject_id'},
            {data:  'chapter_name'},
            {data: 'status'},
            {data: 'edit_delete',orderable: false},
        ],
    });

});

๊ทธ๋ฆฌ๊ณ  web.php

๊ฒฝ๋กœ :: ์ž„์˜ ( 'ajax / chapter / list', 'YourController @Method ');

์ด ์ฝ”๋“œ๋Š” ๋‚˜๋ฅผ ์œ„ํ•ด ์ผํ–ˆ์Šต๋‹ˆ๋‹ค.

๋‚ด ํ•˜๋ฃจ๋ฅผ ๊ตฌํ•ด์ค˜

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰