Question

合并

这是我的小提琴attempt，但我无法使footer_callback代码起作用。我不确定我是否需要做出重大改变。

我有2个页脚，1个用于每列搜索（multi_filter），第2个用于柱子（footer_callback）。我稍微修改了multi_filter的代码（html和js）。我只是不确定要为footer_call_back工作做什么。 任何人都可以建议我如何让footer_callback代码工作（当前已注释掉）？

footer_call_back的html代码：

<tfoot>
    <tr>
      <th colspan="4" style="text-align:right">Total:</th>
      <th></th>
    </tr>
  </tfoot>

js code for footer_callback：

"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 this page
        pageTotal = api
            .column( 4, { page: 'current'} )
            .data()
            .reduce( function (a, b) {
                return intVal(a) + intVal(b);
            }, 0 );

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

multi_filter的HTML代码：

  <tfoot id="search">
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
    </tr>
  </tfoot>

jscoder for multifilter：

// Setup - add a text input to each footer cell
  $('#example tfoot#search th').each(function() {
    var title = $(this).text();
    $(this).html('<input type="text" placeholder="Search ' + title + '" />');
  });

  // DataTable
  var table = $('#example').DataTable();

  // Apply the search
  table.columns().every(function() {
    var that = this;

$('input', this.footer()).on('keyup change', function() {
  if (that.search() !== this.value) {
    that
      .search(this.value)
      .draw();
  }
});

EDIT1

这不起作用要么它修复了footer_callback，但打破了multi_filter

我已经整理了所有列，排在这里FIDDLE：

然后完成了此处推荐的更改FIDDLE 看起来像这样：

$(document).ready(function() {

 $('#example').DataTable( {

        // footer_callback code goes here...

    } );  // end $('#example').DataTable( {

//multi_filter code goes here...

} );

这使footer_callback工作，但multi_filter不起作用。无论如何，我可以让他们俩一起工作吗？

Answer 1

您需要将此footerCallback放在数据表初始化函数中。就像这个

$('#example').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 this page
            pageTotal = api
                .column( 4, { page: 'current'} )
                .data()
                .reduce( function (a, b) {
                    return intVal(a) + intVal(b);
                }, 0 );

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

        });

工作演示参考。

https://jsfiddle.net/dipakthoke07/7bh7w2tu/8/或 http://jsfiddle.net/dipakthoke07/s8F9V/569/

谢谢你希望这会对你有帮助。

如何在数据表中组合footer_callback和multi_filter

EDIT1

1 个答案: