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

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

这是我的数据表

下面是我针对特定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>`;
                        }
                    },
                ]
            }); 
        }

用于重新评估的函数加载（）{ window.INVDT=$（'#tbl-client-for#u重新评估'）。数据表({ //处理：对， “dom”：“lBfrtip”， 服务器端：是的， “fnInitComplete”：函数（oSettings，json）{ toastr.options.progressBar=true； $（“#加载”）.hide（）； }, “自动宽度”：false， “长度菜单”：[[5,10,25,50，-1]，[5,10,25,50，“全部”]， “iDisplayLength”：6， 阿贾克斯：{ “url”：“{route（'admin.clients.show client returns'，$client->id）}”， “dataSrc”：函数（json）{ 返回json.data.filter（函数（项）{ 退货项目。对于重新估价数量！=空 }); } }, 按钮：{ 按钮：[ { 扩展：“复制”， className:“btn按钮csv按钮-html5 btn默认值”， 文本：“复制”， }, { 扩展：“csv”， className:“btn按钮csv按钮-html5 btn默认值”， 文本：“CSV”， }, { 扩展：“pdf”， className:“btn按钮csv按钮-html5 btn默认值”， 文本：“PDF”， }, { 扩展：“打印”， className:“btn按钮csv按钮-html5 btn默认值”， 文本：“打印”， }, { 扩展：“colvis”， className:“btn按钮csv按钮-html5 btn默认值”， 文本：“列可见性”， }, { 文本：“案件备案副本”， 类名：“btn按钮csv按钮-html5 btn信息”， 行动：功能（）{ console.log（'hello'） } } ], dom:{ 按钮：{ 类名：'btn btn primary' } } }, 栏目：[ { 数据：{}，名称：'客户端'，“类”：“文本nowrap文本中心”，呈现：函数（数据）{ 返回“`+（data.client？data.client:”）+“”； } }, { 数据：{}，名称：'amazon_order_id'，“类”：“text nowrap text center”，呈现：函数（数据）{ 返回“`+（data.amazon\u order\u id？data.amazon\u order\u id:”）+`； } }, { 数据：{}，名称：'退款'，“类”：“文本nowrap文本中心”，呈现：函数（数据）{ 返回“`+（data.returned？data.returned:”）+`； } }, { 数据：{}，名称：'goodwill_amount'，“类”：“文本nowrap文本中心”，呈现：函数（数据）{ 返回` $`+（data.nr\u amount\u remburable！=“0.00”？data.nr\u amount\u remburable:”）+` `+（数据.不正确\u fnsku\u数量>0？数据.如果金额\u可报销：“”）+` `+（数据.商誉金额！=“0.00”？数据.商誉金额：“”）+` `+（data.fr\u amount\u returnable！=“0.00”？data.fr\u amount\u returnable:”）+` `+（data.fr_fnsku！=null？data.fr_fnsku:“”）+` `+（data.fr\u报销单\u id！=null？data.fr\u报销单\u id:“”）+` `+（data.fr\u amount\u returnable！=“0.00”？data.fr\u amount\u returnable:”）+` `+（data.umr\u amount\u total！=“0.00”？data.umr\u amount\u total:”）+` `+（data.fr\u amount\u returnable！=“0.00”？data.fr\u amount\u returnable:”）+`； } }, ] }); }

---

我以前遇到过这个问题。只需覆盖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>

.dataTables_包装器.dataTables_分页.分页按钮{
填充：0px；
左边距：0px；
显示：内联；
边界：0px；
}
.dataTables_包装。dataTables_分页。分页按钮：悬停{
边界：0px；
}

update

jquery.datatables.min.js

到v1.10.19或更高版本，但我使用的是一个包sir@sta。该项目没有节点模块文件夹。此外，它仅在我添加了

“dom”：“lBfrtip”、

和

按钮

对象后才会出现。这里的“扭曲”是什么意思？你想让按钮看起来像什么？