具有删除格式的 DataTable 页脚回调

Question

我正在使用 Laravel (v8) blade 和 DataTable.Js 我有 table 并且有两列带有浮动数据，例如“24 000, 00 USD”。我必须为每页和所有数据显示此列数据的总计。但是我的代码显示不正确的结果。看来我必须从数据中删除空格和“USZ”和“USD”字母，然后将“，”浮动符号更改为“。”。

请帮我解决这个问题。

这是 blade

处的 JS 代码

 $("#kvit_date1, #kvit_date2").flatpickr({dateFormat: "Y-m-d"});

    //DataTables
    var table = $('#docsTable').DataTable({
        paging: true,
        searching: true,
        lengthChange: false,
        ordering: true,
        order: [[ 1, 'desc' ]],
        rowGroup: {
            dataSrc: 3
        },
        dom: 'Bfrtip',
        buttons: [
            'excel', 'print', 'pdf'
        ],
        footer: true,
        initComplete: function() {
            $('.buttons-copy').html('<i class="far fa-copy" />')
            $('.buttons-csv').html('<i class="far fa-file-csv" />')
            $('.buttons-excel').html('<i class="far fa-file-excel" />')
            $('.buttons-pdf').html('<i class="far fa-file-pdf" />')
            $('.buttons-print').html('<i class="fa fa-print" />')
        },
        language: {
            "lengthMenu": "Sahifada _MENU_ ta ma`lumot ko`rsat",
            "zeroRecords": "Xech narsa topilmadi uzr!",
            "info": "_PAGE_ sahifa, jami _PAGES_ sahifa",
            "infoEmpty": "Ma'lumotlar mavjud emas",
            "infoFiltered": "(_MAX_ ta malumot filtrlangan)",
            "search": "Izlash"
        },
        drawCallback: function () {
            var api = this.api();

            // Remove the formatting to get integer data for summation
            var intVal = function ( i ) {

                return typeof i === 'string' ?
                    parseFloat(i.replace(/'UZS', 'USD','/g, '.'))*1 :
                    typeof i === 'number' ?
                        i : 0;
            };

            // Total over all pages
            totalUZS = api
                .column( 6 )
                .data()
                .reduce( function (a, b) {
                    return intVal(a) + intVal(b);
                }, 0 );

            // Total over all pages
            totalUSD = api
                .column( 7 )
                .data()
                .reduce( function (a, b) {
                    return intVal(a) + intVal(b);
                }, 0 );

            // Total over this page
            pageUZS = api
                .column( 6, { page: 'current'} )
                .data()
                .reduce( function (a, b) {
                    return intVal(a) + intVal(b);
                }, 0 );
            // Total over this page
            pageUSD = api
                .column( 7, { page: 'current'} )
                .data()
                .reduce( function (a, b) {
                    return intVal(a) + intVal(b);
                }, 0 );

            // Update footer
            $( api.column( 6 ).footer() ).html(
                totalUZS + ' UZS / SAHIFA ' + pageUZS + ' UZS'
            );
            $( api.column( 7 ).footer() ).html(
                totalUSD + ' USD / SAHIFA ' + pageUSD + ' USD'
            );
        }

    });

这是 table header 个字段

<table class="datatables-basic table table-sm table-hover font-small-3" id="docsTable">
                            <thead class="thead-light">
                            <tr>
                                <th rowspan="2">#</th>
                                <th rowspan="2"></th>
                                <th rowspan="2">DOC#</th>
                                <th rowspan="2">SANA</th>
                                <th rowspan="2">HAMKOR</th>
                                <th rowspan="2">TELEFON</th>
                                <th colspan="2" class="text-center">NARXI</th>
                                <th rowspan="2">AMALLAR</th>
                            </tr>
                            <tr>
                                <th>UZS</th>
                                <th>USD</th>
                            </tr>
                            </thead>

Answer 1

这应该可以完成工作（另请注意，当您使用 parseFloat() 时，乘以 * 1 是多余的）：

 // Remove the formatting to get integer data for summation
 var intVal = function ( i ) {
     return typeof i === 'string'
         ? parseFloat(i.replace(/UZS|USD| /g, '').replace(/,/,'.')) //<= please, notice there's a space between USD| and /g
         : typeof i === 'number'
             ? i
             : 0
 }

如果我可以建议，嵌套三元运算符 很快就会让您的代码难以阅读。更喜欢 if... else... 而不是

具有删除格式的 DataTable 页脚回调

DataTable footer callback with remove formatting

javascript

datatables

laravel-blade