数据表中的2个页脚行，1个用于过滤器，1个用于summ行

Question

我试图在我的桌子2英尺行的基础上。我是过滤器，另一个是总和。它分开工作，但不是一起工作。感谢帮助。 我怀疑是在方法'.footer（）'中试图将值显示在页脚的第一行。

<table id="vydana_faktura_seznam" class="table table-striped table-bordered dt-responsive nowrap">
        <thead>
            <tr>
                <th>ID</th>
                <th>ICO</th>
                <th>Jmeno spolecnosti</th>
                <th>Datum vystaveni</th>
                <th dt:sortInitDirection="asc">Datum splatnosti</th>
                <th>Spedice</th>
                <th>SPZ</th>
                <th>VS</th>
                <th>Castka</th>
                <th>Mena</th>
                <th>Vystavil</th>
                <th>Zaplacena</th>
            </tr>
        </thead>
        <tfoot>
            <!--            search row -->
            <tr> 
                <th />
                <th />
                <th />
                <th />
                <th />
                <th />
                <th />
                <th />
                <th />
                <th />
                <th />
                <th />
            </tr>
            <!-- summ row -->

            <tr>
                <td />
                <td />
                <td />
                <td />
                <td />
                <td />
                <td />
                <td />
                <td class="footer_summ" style="text-align: right; padding: 8px 10px"></td>
                <td />
                <td />
                <td />
            </tr>
        </tfoot>

<script type="text/javascript">
        $('#vydana_faktura_seznam tfoot tr:eq(0) th').each( function () {
            var title = $(this).text();
            $(this).html( '<input type="text" placeholder="Hledej '+title+'" style="width:100%" />' );
        } );

        // DataTable
        var table = $('#vydana_faktura_seznam').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();
                }
            } );
        } );
    </script>

    <script type="text/javascript">
        $('#vydana_faktura_seznam').DataTable( {
             "footerCallback" : function ( data ) {
                    var api = this.api(), data;
                    // Remove the formatting to get integer data for summation

                    var intVal = function ( i ) {
                        return typeof i === 'string' ? i.replace(/[&nbsp;]/g, '') * 1 : typeof i === 'number' ? i : 0;
                    };
                    // Total over all pages
                    var total = api
                        .column( 8 )
                        .data()
                        .reduce( function (a, b) {
                            return intVal(a) + intVal(b);
                        }, 0 );

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

                    // Update footer
                    $( api.column( 8 ).footer() ).html(
                        pageTotal
                    );
                }
        } );
    </script>

Answer 1

Finnaly我在这里帮助解决了我的问题 https://datatables.net/examples/api/multi_filter.html