Javascript 带有总和和合计按钮的jQuery数据表

我是jQuery新手，一直在从事一个使用DataTables显示和排序数据的项目。到目前为止，我已经具备了需要使用的大部分功能，但是我的脚本（提供了一列的总数）与我的buttons脚本存在问题

以下是我的全部脚本：

$（文档）.ready（函数（）{
$（'#reportTable'）。数据表({
“footerCallback”：函数（行、数据、开始、结束、显示）{
var api=this.api（），
数据；
//删除格式以获取求和的整数数据
var intVal=函数（i）{
返回类型i==='string'？
i、 替换（/[\$，]/g，）*1：
i的类型=='编号'？
i:0；
};
//总页数
total=api.column（4.data（）.reduce（函数a，b）{
返回intVal（a）+intVal（b）；
}, 0);
//所有筛选页面的总计
如果（api）第4列{
搜索：“已应用”
}).data（）.length）{
pageTotal=api.列（4{
搜索：“已应用”
}).data（）.reduce（函数（a，b）{
返回intVal（a）+intVal（b）；
});
}否则{
pageTotal=0；
}
$（api.column（4.footer（））.html（pageTotal.toFixed（2））；
//更新页脚
$（api.column（4.footer（））.html（pageTotal.toFixed（2）+'hours（'+total.toFixed（2）+'total hours'）；
}
});
});

以下是我的按钮脚本：

$（'#reportTable'）。数据表({
dom:'Blfrtip'，
按钮：[{
扩展：“pdf”，
类名：“绿色图标文件”，
标题:"报告",，
文件名：“报告”，
出口选择：{
列：[0,1,2,3,4,5,6]
}
},
{
扩展：“excel”，
className:“绿色图标列表alt”，
标题:"报告",，
文件名：“报告”，
出口选择：{
列：[0,1,2,3,4,5,6]
}
},
{
扩展：“复制”，
className:“绿色标志符号标志符号重复”，
出口选择：{
列：[0,1,2,3,4,5,6]
}
},
{
扩展：“打印”，
类名：“绿色字形图标”“字形图标打印”，
标题:"报告",，
文本：“打印”，
出口选择：{
修饰语：{
页面：“当前”
}
}
}
]
});

我意识到这是一个初始化问题（因为我初始化了两次），但我试图修复它的尝试不起作用。看起来我应该可以做这样的事情：

$（文档）.ready（函数（）{
$（'#reportTable'）。数据表({
“footerCallback”：函数（行、数据、开始、结束、显示）{
var api=this.api（），
数据；
//删除格式以获取求和的整数数据
var intVal=函数（i）{
返回类型i==='string'？
i、 替换（/[\$，]/g，）*1：
i的类型=='编号'？
i:0；
};
//总页数
total=api.column（4.data（）.reduce（函数a，b）{
返回intVal（a）+intVal（b）；
}, 0);
//所有筛选页面的总计
如果（api）第4列{
搜索：“已应用”
}).data（）.length）{
pageTotal=api.列（4{
搜索：“已应用”
}).data（）.reduce（函数（a，b）{
返回intVal（a）+intVal（b）；
});
}否则{
pageTotal=0；
}
$（api.column（4.footer（））.html（pageTotal.toFixed（2））；
//更新页脚
$（api.column（4.footer（））.html（pageTotal.toFixed（2）+'hours（'+total.toFixed（2）+'total hours'）；
}
}, {
dom:'Blfrtip'，
按钮：[{
扩展：“pdf”，
类名：“绿色图标文件”，
标题:"报告",，
文件名：“报告”，
出口选择：{
列：[0,1,2,3,4,5,6]
}
},
{
扩展：“excel”，
className:“绿色图标列表alt”，
标题:"报告",，
文件名：“报告”，
出口选择：{
列：[0,1,2,3,4,5,6]
}
},
{
扩展：“复制”，
className:“绿色标志符号标志符号重复”，
出口选择：{
列：[0,1,2,3,4,5,6]
}
},
{
扩展：“打印”，
类名：“绿色字形图标”“字形图标打印”，
标题:"报告",，
文本：“打印”，
出口选择：{
修饰语：{
页面：“当前”
}
}
}
]
});
});

……但这对我不起作用。我没有收到任何错误，但无论哪个脚本在“顶部”运行，第二部分都会被忽略。有人能给我解释一下这背后的逻辑吗？我正在努力学习语法

---

谢谢

注意：我还没有测试这个。我将很快更新这个答案

首先，我建议将代码分块重新组织，以便于发现问题。 我只是这样做了，发现有一些代码差异

下面是对您提供的最后一批代码的清理

$（文档）.ready（函数（）{
$（'#reportTable'）。数据表({
“footerCallback”：footerCallback，
dom:'Blfrtip'，
按钮：按钮
});
});
函数页脚回调（行、数据、开始、结束、显示）{
var api=this.api（）；
//删除格式以获取求和的整数数据
var intVal=函数（i）{
return（typeof i=='string'）？i.replace（/[\$，]/g'，）*1:
（类型i==‘编号’）？i:0；
};
var sumFn=函数（a，b）{return intVal（a）+intVal（b）；}
//总页数
var total=api.column（4.data（）.reduce（sumFn，0）；
var lengthOpts={search:'applied'}；
var length=api.column（4，lengthOpts.data（）.length；
//所有筛选页面的总计
if（长度）{
pageTotal=api.column（4，lengthOpts.data（）.reduce（sumFn）；
}埃尔斯
$('#example').DataTable( {
    "paging":   false,
    "ordering": false,
    "info":     false
} );

$('#example').DataTable( {
    {"paging":   false},
    {"ordering": false},
    {"info":     false}
} );

$(document).ready(
    function() {
        $('#reportTable').DataTable({

            dom: 'Blfrtip',
            buttons: [{
                    extend: 'pdf',
                    className: 'green glyphicon glyphicon-file',
                    title: 'Report',
                    filename: 'Report',
                    exportOptions: {
                        columns: [0, 1, 2, 3, 4, 5, 6]
                    }
                },
                {
                    extend: 'excel',
                    className: 'green glyphicon glyphicon-list-alt',
                    title: 'Report',
                    filename: 'Report',
                    exportOptions: {
                        columns: [0, 1, 2, 3, 4, 5, 6]
                    }
                },
                {
                    extend: 'copy',
                    className: 'green glyphicon glyphicon-duplicate',
                    exportOptions: {
                        columns: [0, 1, 2, 3, 4, 5, 6]
                    }
                },
                {
                    extend: 'print',
                    className: 'green glyphicon glyphicon-print',
                    title: 'Report',
                    text: 'Print',
                    exportOptions: {
                        modifier: {
                            page: 'current'
                        }
                    }
                }
            ],
            "footerCallback": function(row, 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(5)
                    .data()
                    .reduce(function(a, b) {
                        return intVal(a) + intVal(b);
                    }, 0);

                // Total over all filtered pages
                if (api.column(5, {
                        search: 'applied'
                    }).data().length) {
                    pageTotal = api
                        .column(5, {
                            search: 'applied'
                        })
                        .data()
                        .reduce(function(a, b) {
                            return intVal(a) + intVal(b);
                        });
                } else {
                    pageTotal = 0;
                }

                $(api.column(5).footer()).html(
                    pageTotal.toFixed(2)
                );

                // Update footer
                $(api.column(5).footer()).html(
                    pageTotal.toFixed(2) + ' hours ( ' + total.toFixed(2) + ' total hours)'
                );
            },

        });
    }
);