Jquery 数据表分页按钮样式修复

Question

我正在使用 Jquery 数据table，特别是 laravel 的 yajra 数据table。但是当我运行应用程序时，数据 table 分页按钮被扭曲了。我添加了一个自定义按钮，以便自定义按钮功能。如果有人知道如何修复请帮助。谢谢

这是我的数据table

这是我针对特定数据的代码table

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

我以前遇到过这个问题。只需覆盖 jquery 数据表的 css class 名称。试试这个代码，也许它能帮上忙。

<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>

Jquery 数据表分页按钮样式修复

Jquery Datatable pagination button style fix

javascript

jquery

datatables

laravel

yajra-datatable