Jquery Datatable 分页按钮样式修复

问题描述

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

这是我的数据表

这是我的特定数据表的代码

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,"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',text: 'CSV',{
                            extend: 'pdf',text: 'PDF',{
                            extend: 'print',text: 'Print',{
                            extend: 'colvis',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',render: function (data) {
                            return `<span class="jc-order-id">`+(data.amazon_order_id ? data.amazon_order_id : '')+`</span>`;
                        }
                    },{
                        data: {},name: 'refunded',render: function (data) {
                            return `<span>`+(data.refunded ? data.refunded : '')+`</span>`;
                        }
                    },name: 'goodwill_amount',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>`;
                        }
                    },]
            }); 
        }

解决方法

我以前遇到过这个问题。只需覆盖 jquery 数据表的 css 类名。试试这个代码，也许它会有所帮助。

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