Jquery Datatable 分页按钮样式修复

Posted 2023-05-09

【中文标题】Jquery Datatable 分页按钮样式修复

【英文标题】：Jquery Datatable pagination button style fix

【发布时间】：2021-05-05 08:14:28

【问题描述】：

我正在使用 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, 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>`;
                        
                    ,
                ]
            ); 
        

【问题讨论】：

更新 jquery.datatables.min.js 到 v1.10.19 或更高版本

但我正在使用一个包先生@sta。该项目没有节点模块文件夹。

它也只在我添加"dom": 'lBfrtip', 和buttons 对象后出现

这里的“扭曲”是什么意思？您希望按钮看起来像什么？

【参考方案1】：

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