Question

我是新手使用数据表，出于某种原因我实现了此处引用的footercallback代码：https://www.datatables.net/examples/advanced_init/footer_callback.html 我的页面＆＃39;金额列的所有页面的总数一直以NaN的形式返回。每页总计工作正常。

HTML

<div class="col-lg-9 table-responsive" id="tableCont">
<div class="dataTables_paginate"></div>
<table style="width:2850px;" class="table table-bordered table-hover table-striped table-responsive" id="fundQueryDataTbl"
       data-body="@Url.Action("GetFundingData", "FundingProfiles", new { fundingYear = Model.FiscalYear })"
       data-header="@Url.Action("GetColumnNames", "FundingProfiles", new { fundingYear = Model.FiscalYear })">
    <thead>
        <tr></tr>
    </thead>
    <tfoot>
        <tr>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
        </tr>
    </tfoot>
</table>

脚本：

$('#fundQueryDataTbl').DataTable({
    initComplete: function () {
        //Column names identified as DDL search - 5/6/16
        var txtSearchNames = ['Funding Category', 'Funding Subcategory', 'Award Class', 'Grant Class Desc', 'Grant Type Desc', 'Us Territory'];

        this.api().columns().every(function () {

            var column = this;
            var columnName = $(this.header()).text();

            //Certain columns were decided upon to have text searches as opposed to DDL. 
            if (txtSearchNames.indexOf(columnName) > -1) {

                //Client wanted title to have / in it - cannot set that in FQ Model prop name.
                if (columnName === "Us Territory") {
                    $(this.header()).text('US/Territory');
                    this.draw();
                }

                var select = $('<select class="form-control"><option value=""></option></select>')
                    .appendTo($(column.header())).on('change', function () {

                        var val = $.fn.dataTable.util.escapeRegex($(this).val());

                        column.search(val ? '^' + val + '$' : '', true, false).draw();
                    });

                column.data().unique().sort().each(function (d, j) {
                    select.append('<option value="' + d + '">' + d + '</option>');
                });


            } else {

                $('<input type="text" placeholder="Search" class="form-control">')
                    .appendTo($(column.header())).on('keyup change', function () {

                        column.search(this.value).draw();
                    });
            }


        });
    },

    //responsive: true,        
    ordering: false,
    bPaginate: true,
    deferRender: true,
    scrollY: '80vh',
    scrollX: true,
    autoWidth: false,
    dom: 'Brtip',
    buttons: [
        { extend: 'pageLength' },
        $.extend(true, {}, cleanHeaderRow, {
            extend: 'excel',
            text: 'Save in Excel'
        }),
        $.extend(true, {}, cleanHeaderRow, {
            extend: 'csv',
            text: 'Save in CSV'
        })
    ],
    ajax: {
        "url": url,
        "dataSrc": ""
    },
    "footerCallback": function (tfoot, data, start, end, display) {

        var api = this.api(), data;

        // Remove the formatting to get integer data for summation
        var intVal = function (i) {
            return typeof i === 'string' ?
                i.replace(/[\$,]/g, '') * 1 :
                typeof i === 'number' ?
                i : 0;
        };

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


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

        // Update footer
        $(api.table().footer()).html(
            '$ ' + pageTotal + '  ' + total
        );

        $(tfoot).find('th').eq(0).html('$' + pageTotal + ' over all total: $' + total);
    },
    columns: declareColumns(columnKeys)
});

数据图像

Answer 1

正在与评论系统作斗争，所以只是把它放在这里。根据您更新的评论，您的括号导致负数的问题在这里我建议：

＆＃13;

  // Remove the formatting to get integer data for summation
var intVal = function (i) {
  if(typeof i === 'string') {
    let multiplier = /[\(\)]/g.test(i) ? -1 : 1;
    
    return (i.replace(/[\$,\(\)]/g, '') * multiplier)
  }
  
  return typeof i === 'number' ?
    i : 0;
};


console.log(intVal("$123,234"))
console.log(intVal("($123,234)"))
console.log(intVal(new Date()))
console.log(intVal(55))

＆＃13;

我强烈建议您查看一些自定义渲染功能，而不是您拥有的功能。如果您愿意，可以为每列定义不同的渲染函数，并根据渲染请求（显示，顺序，过滤器，等等）返回以不同方式格式化的数据。

所有行总数的数据表页脚回调返回NaN

1 个答案: