Jquery Datatable pagination button style fix

Question

I am using Jquery datatable specially yajra datatable for laravel. But when I run the app, the datatable pagination buttons is distorted. I added a custom button in order for me to customize a button functions. If anyone know how to fix please help. Thanks.

Here is my data table

Here is my code for specific datatable

function load_for_reevaluation (){
            window.INVDT = $('#tbl-client-for_reevaluation').DataTable({
                //processing: true,
                "dom": 'lBfrtip',
                serverSide: true,
                "fnInitComplete": function (oSettings, json) {
                    toastr.options.progressBar = true;
                    $('#loading').hide();
                },
                "autoWidth": false,
                "lengthMenu": [[5, 10, 25, 50, -1], [5, 10, 25, 50, "All"]],
                "iDisplayLength": 6,
                
                ajax: {
                    "url": "{{ route('admin.clients.show-client-returns', $client->id) }}",
                    "dataSrc": function ( json ) {
                        return json.data.filter(function(item){
                            return item.for_reevaluation_qty != null
                        });
                    }
                },
                
                buttons:{
                    buttons:[
                        {
                            extend: 'copy',
                            className: 'btn buttons-csv buttons-html5 btn-default',
                            text: 'Copy',
    
                        },
                        {
                            extend: 'csv',
                            className: 'btn buttons-csv buttons-html5 btn-default',
                            text: 'CSV',
                        },
                        {
                            extend: 'pdf',
                            className: 'btn buttons-csv buttons-html5 btn-default',
                            text: 'PDF',
                        },
                        {
                            extend: 'print',
                            className: 'btn buttons-csv buttons-html5 btn-default',
                            text: 'Print',
                        },
                        {
                            extend: 'colvis',
                            className: 'btn buttons-csv buttons-html5 btn-default',
                            text: 'Column Visibility',
                        },
                        {
                            text: 'Copy for Case Filing',
                            className: 'btn buttons-csv buttons-html5 btn-info',
                            action: function(){
                                console.log('hello')
                            }
                        }

                    ],
                    dom:{
                        button:{
                            className:'btn btn-primary'
                        }
                    }
                },
                columns: [
                    {
                        data: {}, name: 'client', "class": "text-nowrap text-center", render: function (data) {
                            return `<span class=''>`+(data.client ? data.client : '')+"</span>";
                        }
                    },
                    {
                       data: {}, name: 'amazon_order_id', "class": "text-nowrap text-center", render: function (data) {
                            return `<span class="jc-order-id">`+(data.amazon_order_id ? data.amazon_order_id : '')+`</span>`;
                        }
                    },
                    {
                        data: {}, name: 'refunded', "class": "text-nowrap text-center", render: function (data) {
                            return `<span>`+(data.refunded ? data.refunded : '')+`</span>`;
                        }
                    },
                    {
                        data: {}, name: 'goodwill_amount', "class": "text-nowrap text-center", render: function (data) {
                            return `
                            $<span class="jc-never-returned-amount-reimbursable">`+(data.nr_amount_reimbursable!='0.00' ? data.nr_amount_reimbursable : '')+`</span>
                            <span class="jc-incorrect-fnsku-amount-reimbursable">`+(data.incorrect_fnsku_qty > 0 ? data.if_amount_reimbursable : '')+`</span>
                            <span class="jc-goodwill-amount-reimbursable">`+(data.goodwill_amount!='0.00' ? data.goodwill_amount : '')+`</span>
                            <span class="jc-fr-amount-reimbursable">`+(data.fr_amount_reimbursable!='0.00' ? data.fr_amount_reimbursable : '')+`</span>
                            <span class="jc-fr-fnsku" style="display:none">`+(data.fr_fnsku!=null ? data.fr_fnsku : '')+`</span>
                            <span class="jc-fr-reimbursement-id" style="display:none">`+(data.fr_reimbursement_id!=null ? data.fr_reimbursement_id : '')+`</span>
                            <span class="jc-fr-expected-reimbursable-amount" style="display:none">`+(data.fr_amount_reimbursable!='0.00' ? data.fr_amount_reimbursable : '')+`</span>
                            <span class="jc-fr-amount-received" style="display:none">`+(data.umr_amount_total!='0.00' ? data.umr_amount_total : '')+`</span>
                            <span class="jc-fr-discrepancy" style="display:none">`+(data.fr_amount_reimbursable!='0.00' ? data.fr_amount_reimbursable : '')+`</span>`;
                        }
                    },
                ]
            }); 
        }

Answer 1

I have experienced that issue before. just override the css class name of jquery datatables. Try this code, maybe it can help.

<style>
    .dataTables_wrapper .dataTables_paginate .paginate_button {
    padding : 0px;
    margin-left: 0px;
    display: inline;
    border: 0px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    border: 0px;
}
</style>