yajra / laravel-datatables-docs

Laravel DaTatables package documentation
https://yajrabox.com/docs/laravel-datatables
93 stars 611 forks source link

float/integer number cannot be searched in filter search box after upgraded to version ^10.0 #106

Open Lukimer opened 5 months ago

Lukimer commented 5 months ago

before upgraded to 10.0, the float / integer number can be searched.

yajra commented 5 months ago

Seems to be working fine using ^11 image

Please provide snippets to reproduce the issue. Thanks!

Lukimer commented 5 months ago

Thanks for prompt feedback! Any chance to fix it on v10?

Else I need to upgrade to laravel 11 with yajra/datatables v11 too.

Thanks Best

Lukimer commented 5 months ago
Screenshot 2024-04-11 at 11 50 55 AM Screenshot 2024-04-11 at 11 51 18 AM
yajra commented 5 months ago

Can you provide some snippets to reproduce the issue? Are you using collection or query/eloquent builder?

Lukimer commented 5 months ago

"laravel/framework": "^10.0", "yajra/laravel-datatables": "^10.11.4"

//javascript file setup var judgelistdatatable = jQuery('#datatable').DataTable({ stateSave: true, processing: true, serverSide: true,
ajax: { headers: { //csrf protection for ajax 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }, type: 'POST', url: "/call_ajax.php",
},
//currencyFormat: Event I removed currencyFormat, number also cannot be searched. columnDefs: [{ targets: [4, 6, 11], render: $.fn.dataTable.render.currencyFormat() }, ],

        columns: [
            { data: 'company_name', name: 'company_name', className: 'text-left' },
            { data: 'invoice_no', name: 'invoice_no', className: 'text-center' },
            { data: 'total_entry', name: 'total_entry', className: 'text-center', searchable: false },
            { data: 'total_entry_special', name: 'total_entry_special', className: 'text-center', searchable: false, },
            { data: 'price', name: 'price', className: 'text-right' },
            { data: 'earlybird_discount', name: 'earlybird_discount', className: 'text-center' },
            { data: 'total_amount', name: 'total_amount', className: 'text-right' },
            { data: 'status', name: 'status', className: 'text-center' },
            { data: 'payment_method', name: 'payment_method', className: 'text-center' },
            { data: 'pi_id', name: 'pi_id', className: 'text-center' },
            { data: 'receipts', name: 'receipts', searchable: false, className: 'text-center' },
            { data: 'received_amount', name: 'received_amount', className: 'text-right' },
            { data: 'receipt_no', name: 'receipt_no', className: 'text-center' },
            { data: 'action', name: 'action', orderable: false, searchable: false, className: 'text-center action-column' },
        ],
        pagingType: "full_numbers",
        pageLength: 10,
        lengthMenu: [10, 20, 50, 100, 200, 500, 1000],         
        autoWidth: false,
        responsive: true,
        dom: 'Blfrtip',
        info: true,
        initComplete: function(settings, json) { //to override bootstrap tooltip class
            // $('[data-bs-toggle="tooltip"]').tooltip();
        },
        drawCallback: function(settings) { //to override bootstrap tooltip class
            // $('[data-bs-toggle="tooltip"]').tooltip();
        },
        buttons: [{
                extend: 'refresh',
                text: '&nbsp;<i class="si si-refresh"></i>&nbsp;',
                attr: {
                    title: 'Refresh Data',
                    'data-bs-toggle': 'tooltip',
                    class: 'btn btn-sm btn-info',
                }
            },
            {
                extend: 'csv',
                title: 'Invoice List',
                footer: false,
                attr: {
                    title: 'Export CSV file',
                    'data-bs-toggle': 'tooltip',
                    class: 'btn btn-sm btn-info',
                },
                exportOptions: {
                    columns: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11,12],
                    orthogonal: 'export', //define data type is export
                }
            },
            {
                extend: 'excel',
                title: 'Invoice List',
                footer: false,
                attr: {
                    title: 'Export Excel file',
                    'data-bs-toggle': 'tooltip',
                    class: 'btn btn-sm btn-info',
                },
                exportOptions: {
                    columns: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11,12],
                    orthogonal: 'export', //define data type is export
                }
            },
        ],
        dom: "<'row'" +
            "<'col-sm-4'<'text-left py-2 mb-2'l>>" + //display row length per page
            "<'col-sm-4'<'text-center py-2 mb-2'B>>" + //export button
            "<'col-sm-4'<'text-right py-2 mb-2'f>>" + //search box
            ">" +
            "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>" + //i: showing entries info; p: showing paging buttons
            "<'row'<'col-sm-12'tr>>" + //table body
            "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>" //i: showing entries info; p: showing paging buttons
    });
yajra commented 5 months ago

JS looks fine, how about the php code?

Lukimer commented 5 months ago
$draw = $request->get('draw');
            $start = $request->get("start");
            $rowperpage = $request->get("length"); // Rows display per page

            $columnIndex_arr = $request->get('order');
            $columnName_arr = $request->get('columns');
            $order_arr = $request->get('order');
            $search_arr = $request->get('search');

            $columnIndex = $columnIndex_arr[0]['column']; // Column index
            $columnName = $columnName_arr[$columnIndex]['data']; // Column name
            $columnSortOrder = $order_arr[0]['dir']; // asc or desc
            $searchValue = $search_arr['value']; // Search value   

            $submission_rs = DB::table('invoices')
            ->select('invoices.*');                             

            $total_rec = $submission_rs->count();
            if ($searchValue!=""){
                        $submission_rs
                        -> where(function($query) use ($searchValue) {
                           $query-> orwhere('invoices.company_name', 'like', '%' .$searchValue . '%')
                                 -> orwhere('invoices.invoice_no', 'like', '%' .$searchValue . '%')    
                                 -> orwhere('invoices.receipt_no', 'like', '%' .$searchValue . '%')                                
                                 -> orwhere('invoices.price', 'like', '%' .$searchValue . '%')
                                 -> orwhere('invoices.earlybird_discount', 'like', '%' .$searchValue . '%')
                                 -> orwhere('invoices.discount', 'like', '%' .$searchValue . '%')
                                 -> orwhere('invoices.total_amount', 'like', '%' .$searchValue . '%')
                                 -> orwhere('invoices.status', 'like', '%' .$searchValue . '%')
                                 -> orwhere('invoices.payment_method', 'like', '%' .$searchValue . '%')
                                 -> orwhere('invoices.receipt_str', 'like', '%' .$searchValue . '%')
                                 -> orwhere('invoices.received_amount', 'like', '%' .$searchValue . '%');
                        });
            }
            $total_rec_filter = $submission_rs->count();

            $submission_rs -> skip($start)
                         -> take ($rowperpage)
                         -> orderBy($columnName,$columnSortOrder);

            $submission_rs_array = $submission_rs->get();

            $datatable_output = Datatables::of($submission_rs_array)          

            ->addColumn('action', function($row){
                $outbody = '<div class="btn-group">';  
                //some button actions
                $outbody.= '</div>';
                $actionBtn = $outbody;
                return $actionBtn;
            })
            ->rawColumns(['action'])
            ->setTotalRecords($total_rec)
            ->setFilteredRecords($total_rec_filter)
            ->skipPaging()         
            ->smart(false)
            ->make(true);          
 return $datatable_output;
yajra commented 5 months ago

It appears that you are using collection thus 4800 != 4,800. I suggest you query instead and let the package handle the pagination, search, sort, and counting. Something like:

 $submission_rs = DB::table('invoices')
            ->select('invoices.*');      

            $datatable_output = Datatables::of($submission_rs_array)          

            ->addColumn('action', function($row){
                $outbody = '<div class="btn-group">';  
                //some button actions
                $outbody.= '</div>';
                $actionBtn = $outbody;
                return $actionBtn;
            })
            ->rawColumns(['action'])
            ->smart(false)
            ->make(true);        

 return $datatable_output;
Lukimer commented 5 months ago

Dear Bro

I tried to remove the formatter in js file: columnDefs: [{ // targets: [4, 6, 11], // render: $.fn.dataTable.render.currencyFormat() }, ],

Also, just using your suggestion that let the package handle the functions: ->rawColumns(['action']) ->smart(false) ->make(true);

However, the issue still occurs, only the number cannot be searched.

BTW, thanks for your support!

Best Luk