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

Question

我是jQuery的新手，并且一直在从事使用DataTables显示和排序数据的项目。到目前为止，我拥有需要使用的大多数功能，但是我的脚本（总共列出一栏）的按钮脚本存在问题。

这是我的全部剧本：

$(document).ready(function() {
  $('#reportTable').DataTable({
    "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(4).data().reduce(function(a, b) {
        return intVal(a) + intVal(b);
      }, 0);

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

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

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

这是我的按钮脚本：

$('#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'
        }
      }
    }
  ]
});

我意识到这是一个初始化问题（因为我进行了两次初始化），但是我修复它的尝试无效。看来我应该可以执行以下操作：

$(document).ready(function() {
  $('#reportTable').DataTable({
    "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(4).data().reduce(function(a, b) {
        return intVal(a) + intVal(b);
      }, 0);

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

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

      // Update footer
      $(api.column(4).footer()).html(pageTotal.toFixed(2) + ' hours ( ' + total.toFixed(2) + ' total hours)');
    }
  }, {
    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'
          }
        }
      }
    ]
  });
});

...但是那对我不起作用。我没有收到任何错误，但是无论运行在“顶部”的脚本是什么，第二部分都将被忽略。有人可以向我解释其背后的逻辑吗？我在语法上苦苦挣扎。

谢谢！

Answer 1

注意：我尚未对此进行测试。我很快就会更新此答案。

首先，我建议将代码分成几部分进行重组，以使其易于发现问题。 我只是这样做，发现其中存在一些代码差异。

下面是您提供的最后代码的清理。

$( document ).ready(function() {
  $('#reportTable').DataTable({
    "footerCallback": footerCallback, 
    dom: 'Blfrtip',
    buttons: buttons
  });
});

function footerCallback(row, data, start, end, display) {
      var api = this.api();
     
      // 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;
      };


      var sumFn = function(a, b) { return intVal(a) + intVal(b); }
      
      // Total over all pages
      var total = api.column(4).data().reduce(sumFn, 0);
      
      var lengthOpts = { search: 'applied' };
      var length = api.column(4, lengthOpts).data().length;

      // Total over all filtered pages
      if (length) {
        pageTotal = api.column(4, lengthOpts).data().reduce(sumFn);
      } else {
        pageTotal = 0;
      }

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

      // Update footer
      var footerStr = pageTotal.toFixed(2) 
                    + ' hours ( ' 
                    + total.toFixed(2) 
                    + ' total hours)';
      $(api.column(4).footer()).html(footerStr);
  }
  
  function buttons(){
    return [
        {
          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'
            }
          }
        }
      ];
  }

从l337方法开始：

  

那也行得通！非常感谢您向我展示如何重新组织代码。我一定会继续这样做。 – l337方法

Answer 2

好的。问题在于括号

我会简短

这是正确的格式

$('#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)'
                );
            },

        });
    }
);

Working Fiddle