Laravel-datatables: ๋Š๋ฆฐ ์„ฑ๋Šฅ

์— ๋งŒ๋“  2018๋…„ 03์›” 12์ผ  ยท  8์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: yajra/laravel-datatables

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

537 ๊ฐœ ๋ ˆ์ฝ”๋“œ๋ฅผ๋กœ๋“œ ํ•  ๋•Œ ์„ฑ๋Šฅ ์ €ํ•˜
ํŽ˜์ด์ง€๋กœ๋“œ์‹œ : 4.34 ์ดˆ
ํŽ˜์ด์ง€ ๋งค๊น€ : 3.98 ์ดˆ

"pageLength": 10
๋ฐ์ดํ„ฐ ํ…Œ์ด๋ธ”์˜ ํŽ˜์ด์ง€ ๋งค๊น€์„ ์‚ฌ์šฉํ•  ๋•Œ๋ณด ๋‹ค ์ฟผ๋ฆฌ์—์„œ 10๊ณผ ๊ฐ™์ด ํŽ˜์ด์ง€ ๋‹น ํ–‰์„ ์ œํ•œ ํ•  ์ˆ˜์žˆ๋Š” ๊ฐ€๋Šฅ์„ฑ์ด ์žˆ์Šต๋‹ˆ๊นŒ? ๋‹ค๋ฅธ 10 ๊ฐœ๋ฅผ๋กœ๋“œ ํ•  ๊ฒƒ์ž…๋‹ˆ๋‹ค ...

์ถ”์‹  : ํŽ˜์ด์ง€ ๋งค๊น€์ด ๋น„ํ™œ์„ฑํ™”๋˜์–ด ์žˆ์–ด๋„ ๋กœ๋”ฉ ์‹œ๊ฐ„์€ ์—ฌ์ „ํžˆ โ€‹โ€‹4.34 ์ดˆ

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

Controller

public function membresData()
    {

        $membres = Membre::
        join('equipes', 'equipes.id', '=', 'membres.equipe_id')
        ->join('laboratoires', 'laboratoires.id', '=', 'equipes.laboratoire_id')
        ->join('etablissements as e1', 'e1.id', '=', 'laboratoires.etablissement_id')
        ->leftjoin('etablissements as e2', 'e2.id', '=', 'membres.etablissement_id')
        ->leftjoin('profils', 'profils.id', '=', 'membres.profil_id')
        ->leftjoin('typemembres', 'typemembres.id', '=', 'membres.typemembre_id')
        ->select ('membres.id','equipes.axe_recherche','laboratoires.libelle','laboratoires.periode_accreditation_dd','laboratoires.periode_accreditation_df','e1.abbreviation as etablab','membres.nom', 'membres.prenom', 'membres.cv', 'membres.sujet', 'e2.abbreviation as etabmem', 'profils.typeprofil', 'membres.cin', 'membres.email','typemembres.typemembre')
        ->orderBy('axe_recherche', 'asc')
        ->get();

        if(request()->ajax()){
        return Datatables::of($membres)

         ->addColumn('name', 
                '{{$nom}} {{$prenom}}'
            )

         ->addColumn('cv', function ($membre) {
            if ($membre->cv != null){
            $url=url("uploadedCvMembre/$membre->etablab/$membre->cv");
            return '<div data-provide="photoswipe">
                        <img class="avatar avatar-sm cursor-pointer" src="'.$url.'" alt="Curriculum vitae de : '.$membre->prenom.' '.$membre->nom.'" data-provide="tooltip" data-original-title="Curriculum vitae" data-tooltip-color="primary" aria-describedby="tooltip946475">

                    </div>   ';
            }        
         })

         ->addColumn('laboratoire',
                'ยซ {{$etablab}} ยป {{ $libelle }} <small>{{ \Carbon\Carbon::parse($periode_accreditation_dd)->format("Y") }} - {{ \Carbon\Carbon::parse($periode_accreditation_df)->format("Y") }}</small>'
            )

         ->addColumn('action', 
            '<nav class="nav gap-1 fs-16">


                            <a class="nav-link disabled hover-warning" data-provide="tooltip" data-tooltip-color="warning" data-original-title="Modifier" href="{{route("membre.edit",$id)}}"><i class="ti-pencil"></i></a>



                            <form method="POST" action="{{ action("MembreController@destroy", ["id" => $id]) }}" class="delete_form">
                            <strong i="16">@csrf</strong>
                            @method("DELETE")
                            <a class="nav-link disabled hover-danger delete-btn" data-provide="tooltip" data-tooltip-color="danger" data-original-title="Supprimer" href="#"><i class="ti-trash"></i></a>
                            </form>


            </nav>'
        )

         ->rawColumns(['cv','laboratoire','action'])
         ->make(true);
        }else{
            abort('404');
        }

Js

app.ready(function(){
        $("#dtable").dataTable().fnDestroy();
        $('#dtable').DataTable({
        "columnDefs": [
            { "visible": false, "targets": [0,1] },
            { "orderable": false, "targets": [-1] }
        ],
        "order": [[ 1, 'asc' ]],
        processing: true,
        serverSide: true,
        ajax: '{!! route('membres') !!}',
        deferRender: true,
        columns: [
            { data: 'laboratoire', name: 'laboratoire' },
            { data: 'axe_recherche', name: 'axe_recherche' },
            { data: 'name', name: 'name' },
            { data: 'cv', name: 'cv', orderable: false, searchable: false },
            { data: 'sujet', name: 'sujet' },
            { data: 'etabmem', name: 'etabmem', orderable: false, searchable: false },
            { data: 'typeprofil', name: 'typeprofil' },
            { data: 'cin', name: 'cin' },
            { data: 'email', name: 'email' },
            { data: 'typemembre', name: 'typemembre' },
            { data: 'action', name: 'action', orderable: false, searchable: false}

        ],
        "drawCallback": function ( settings ) {
            $('[data-provide~="tooltip"]').each(function(){var b="";$(this).hasDataAttr("tooltip-color")&&(b=" tooltip-"+$(this).data("tooltip-color")),$(this).tooltip({container:"body",trigger:"hover",template:'<div class="tooltip'+b+'" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'})});
            var api = this.api();
            var rows = api.rows( {page:'current'} ).nodes();
            var last=null;

            api.column(0, {page:'current'} ).data().each( function ( group, i ) {
                if ( last !== group ) {
                    $(rows).eq( i ).before(
                        '<tr class="group bl-3 br-3 border-primary bg-light text-center" ><td class="fw-500" colspan="9">'+group+'</td></tr>'
                    );

                    last = group;
                }
            } );
            api.column(1, {page:'current'} ).data().each( function ( group, i ) {
                if ( last !== group ) {
                    $(rows).eq( i ).before(
                        '<tr class="group bl-3 border-warning bg-light" ><td class="fw-500" colspan="9">Equipe : '+group+'</td></tr>'
                    );

                    last = group;
                }
            } );

        }
    });


  });

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

์‹œ์Šคํ…œ์— ๋Œ€ํ•œ ์„ธ๋ถ€ ์ •๋ณด๋ฅผ ํฌํ•จํ•˜์‹ญ์‹œ์˜ค! ์ƒ๋žตํ•˜๋ฉด ๋‹ค๋ฅธ ์‚ฌ์šฉ์ž์˜ ์š”์ฒญ / ํ‹ฐ์ผ“๋ณด๋‹ค ํ‹ฐ์ผ“์˜ ์šฐ์„  ์ˆœ์œ„๊ฐ€ ๋‚ฎ์•„์ง‘๋‹ˆ๋‹ค.
  • ์šด์˜ ์ฒด์ œ Ubuntu 17.10
  • PHP 7.2.2
  • ๋ผ ๋ผ๋ฒจ 5.6
  • Laravel-Datatables 8.4
performance question

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

๋ฐ์ดํ„ฐ ์†Œ์Šค์—์„œ get() ๋ฅผ ์ œ๊ฑฐํ•˜์—ฌ ์ปฌ๋ ‰์…˜ ๋Œ€์‹  ์ฟผ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.

>orderBy('axe_recherche', 'asc')
        ->get(); // remove this line.

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

๋ฐ์ดํ„ฐ ์†Œ์Šค์—์„œ get() ๋ฅผ ์ œ๊ฑฐํ•˜์—ฌ ์ปฌ๋ ‰์…˜ ๋Œ€์‹  ์ฟผ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.

>orderBy('axe_recherche', 'asc')
        ->get(); // remove this line.

@yajra ๋ฌธ์ œ ํ•ด๊ฒฐ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค

์•ˆ๋…•ํ•˜์„ธ์š” ์™œ ์ฟผ๋ฆฌ๊ฐ€ ์ˆ˜์ง‘๋ณด๋‹ค ํ›จ์”ฌ ๋น ๋ฅธ์ง€ ์„ค๋ช…ํ•ด ์ฃผ์‹œ๊ฒ ์Šต๋‹ˆ๊นŒ?

๋ชจ๋“  ๊ฒฐ๊ณผ์™€ ํ•˜์œ„ ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ ธ์˜ค๊ณ  ๋œ ํšจ์œจ์ ์ธ ๊ธฐ๋Šฅ์„ ์ˆ˜ํ–‰ํ•˜๋ ค๊ณ ํ•˜๋Š” ๋Œ€์‹  ์ฟผ๋ฆฌ์— ๋Œ€ํ•œ ๋‚˜๋จธ์ง€ ๊ธฐ๋Šฅ์„ ์ˆ˜ํ–‰ํ•˜๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค.

์‘๋‹ต ์‹œ๊ฐ„์ด ๋Š๋ฆฝ๋‹ˆ๋‹ค
ํŽ˜์ด์ง€๋กœ๋“œ : 13.40 ์ดˆ
ํŽ˜์ด์ง€ ๋งค๊น€ : 9 ์ดˆ
์ฝ”๋“œ ์Šค ๋‹ˆํŽซ

์ œ์–ด ์žฅ์น˜

๊ณต์šฉ ํ•จ์ˆ˜ lending_return_log_server_side ()
{
$ alluser = ์„ธ์…˜ :: get ( 'alluser');
$ reference = $ this-> database-> getReference ( 'lending_return_log')-> getSnapshot ()-> getValue ();
$ reference = array_reverse ($ reference);
$ data = [];
$ ์ด๋ฆ„ = '';
$ email = '';
foreach ($ lending_return_log๋กœ $ reference) {
// dd ($ lending_return_log [ 'uid']);
foreach ($ alluser as $ key => $ value) {
if ($ key == $ lending_return_log [ 'uid']) {
$ name = $ value [ '์‚ฌ์šฉ์ž ์ด๋ฆ„'];
$ email = $ value [ 'email'];
}
}
$ nestedData [ 'user_info'] = " ". "
". $ email."
". $ lending_return_log [ 'lending_log_id'];
$ nestedData [ 'time_and_trx_id'] = \ Carbon \ Carbon :: parse ($ lending_return_log [ 'time'])-> format ( 'F j, Y, g : i a'). "
". $ lending_return_log [ 'trxid']." ";
$ nestedData [ 'back_amount'] = " ".number_format ($ lending_return_log [ 'amount_back_nob'], 8). "NOB ";
$ nestedData [ 'closing_balance'] = " ".number_format ($ lending_return_log [ 'final_balance_nob'], 8). "NOB ";
$ nestedData [ 'nob_price'] = $ lending_return_log [ 'nob_price_at']. "$";
$ nestedData [ 'curr_return'] = " ".number_format ($ lending_return_log [ 'return_of_cur'], 8). "". $ lending_return_log [ 'cur_type']. " ";

        $data[] = $nestedData;
    }
    // $reference = collect($reference);

    $finalData = Datatables::of($data)->rawColumns(['user_info', 'time_and_trx_id', 'back_amount', 'closing_balance', 'nob_price', 'curr_return'])->make(true);
    return $finalData;
}

JS

(ํ•จ์ˆ˜() {
$ ( '# table'). DataTable ({
์ฒ˜๋ฆฌ : ์‚ฌ์‹ค,
serverSide : true,
์•„์•ฝ์Šค : '{{url ('project-log-serverside ')}}',
์—ด : [
{๋ฐ์ดํ„ฐ : 'user_info', ์ด๋ฆ„ : 'user_info'},
{๋ฐ์ดํ„ฐ : 'time_and_trx_id', ์ด๋ฆ„ : 'time_and_trx_id'},
{๋ฐ์ดํ„ฐ : 'back_amount', ์ด๋ฆ„ : 'back_amount'},
{data : 'closing_balance', ์ด๋ฆ„ : 'closing_balance'},
{๋ฐ์ดํ„ฐ : 'nob_price', ์ด๋ฆ„ : 'nob_price'},
{๋ฐ์ดํ„ฐ : 'curr_return', ์ด๋ฆ„ : 'curr_return'},
]
});
});

ํŒจํ‚ค์ง€ ๋ฒ„์ „
๋ผ ๋ผ๋ฒจ 5.7
PHP : 7.2
๋ผ ๋ผ๋ฒจ ๋ฐ์ดํ„ฐ ํ…Œ์ด๋ธ” : 8.13.7
๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค : NoSql DB (Firebase)

์ด๊ฒŒ ๋ญ๊ฐ€ ์ž˜๋ชป ๋๋Š”์ง€ ์ œ๋ฐœ?
๊ฐ์‚ฌ

์ธ๋ฑ์‹ฑ ํ™•์ธ

์ œ์–ด ์žฅ์น˜:
$ trade1 = Tradecum3 :: where ( 'CODE', Auth :: user ()-> ucc_code)-> where ( 'SCPOPT', '! =', 'EX')-> select ( 'UNIQUEID', 'CODE' , 'TRDATE', 'BS', 'SCPOPT as INSTTYPE', 'SCPCODE', 'SCPNAME', 'DUEDATE', 'STRIKERATE', 'MKTRATE', 'QTY', DB :: raw ( 'ABS (MKTRATE * QTY ) MKTTOTAL๋กœ '));

    $trade2 = Tradecum2::where('CODE', Auth::user()->ucc_code)->where('SCPOPT', '!=', 'EX')->select('UNIQUEID', 'CODE', 'TRDATE', 'BS', 'SCPOPT as INSTTYPE', 'SCPCODE', 'SCPNAME', 'DUEDATE', 'STRIKERATE', 'MKTRATE', 'QTY', DB::raw('ABS(MKTRATE * QTY) as MKTTOTAL'));

    $trade = Tradecum1::where('CODE', Auth::user()->ucc_code)->where('SCPOPT', '=', 'EQ')->select('UNIQUEID', 'CODE', 'TRDATE', 'BS', 'SCPOPT as INSTTYPE', 'SCPCODE', 'SCPNAME', 'DUEDATE', 'STRIKERATE', 'MKTRATE', 'QTY', DB::raw('ABS(MKTRATE * QTY) as MKTTOTAL'))->union($trade1)->union($trade2);


    return DataTables::of($trade)
      ->addColumn('INSTNAME', function ($trade) {
       return $trade->SCPNAME."(". $trade->SCPCODE.")";
      })
      ->editColumn('INSTTYPE',function($trade){
        if($trade->INSTTYPE == "CE")
          return "Call Opt";
        else if ($trade->INSTTYPE == "PE")
          return "Put Opt";
        else if ($trade->INSTTYPE == "CF")
          return "Futures(EQ)";
      else if ($trade->INSTTYPE == "IF")
        return "Futures(INDEX)";
      else
        return $trade->INSTTYPE;
      })
  ->rawColumns(['INSTNAME'])
    ->make(true);

์ „๋ง:
$ ( '# recentTradeTableAll'). DataTable ({
์ฒ˜๋ฆฌ : ์‚ฌ์‹ค,
serverSide : true,
ํŒŒ๊ดด : ์ฐธ,
ajax : {
URL : "{{route ( 'datatable.trades')}}",
์œ ํ˜• : 'POST',
ํ—ค๋” : {
'X-CSRF-TOKEN': $ ( 'meta [name = "csrf-token"]'). attr ( 'content')
},
๋ฐ์ดํ„ฐ : function (d) {

                d.instrumentType = $("input[name='instrumentType']:checked").val();
                d.transaction_type = $("input[name='transaction_type']:checked").val();
            }
        },
        columns: [{
                data: 'TRDATE',
                name: 'TRDATE'
            },
            {
                data: 'BS',
                name: 'BS'
            },
            {
                data: 'INSTNAME',
                name: 'INSTNAME'
            },
            {
                data: 'STRIKERATE',
                name: 'STRIKERATE'
            },
            {
                data: 'INSTTYPE',
                name: 'INSTTYPE'
            },
            {
                data: 'DUEDATE',
                name: 'DUEDATE'
            },
            {
                data: 'MKTRATE',
                name: 'MKTRATE'
            },
            {
                data: 'QTY',
                name: 'QTY'
            },
            {
                data: 'MKTTOTAL',
                name: 'MKTTOTAL'
            }
        ]
    });

get ()์€ ๋ชจ๋“  ๋ฐ์ดํ„ฐ๋ฅผ๋กœ๋“œํ•˜๊ณ  pageLength๊ฐ€ ์ž‘๋™ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ์œ„๋Š” ๋ชจ๋“  ๋ ˆ์ฝ”๋“œ๋ฅผ๋กœ๋“œํ•ฉ๋‹ˆ๋‹ค.

๋ฐ์ดํ„ฐ ์†Œ์Šค์—์„œ get() ๋ฅผ ์ œ๊ฑฐํ•˜์—ฌ ์ปฌ๋ ‰์…˜ ๋Œ€์‹  ์ฟผ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.

>orderBy('axe_recherche', 'asc')
        ->get(); // remove this line.

์ด๋กœ ์ธํ•ด ๋‚ด ์ฟผ๋ฆฌ๊ฐ€ 20 ์ดˆ์—์„œ 2 ๋ฏธ๋งŒ์œผ๋กœ ๋Š˜์–ด๋‚ฌ์Šต๋‹ˆ๋‹ค. ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค!

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