datatables + 2 footers +控制在footer_callback函数中处理哪一个 [英] datatables + 2 footers + control which one is manipulated in the footer_callback function

问题描述

这里是我的 FIDDLE

我想对这部分代码有更多的控制权：

  $（api.column（4）.footer（）） .html（
'$'+ pageTotal +'（$'+ total +'total）'
）; 
  

我想将此应用于我的 #total 页脚它正在应用于 #search 页脚，并正在更改顶部的 #search 页脚的值当我想要更改右下角的 #total 页脚

这是使用html这样的顺序：

 < tfoot id =search> 
< tr> 
< th>名字< / th> 
< th>姓氏< / th> 
< th> Position< / th> 
< th> Office< / th> 
< th>工资< / th> 
< / tr> 
< / tfoot> 
< tfoot id =total> 
< tr> 
< th colspan =4style =text-align：right>总计：< / th> 
< th>< / th> 
< / tr> 
< / tfoot> 
  

我可以在上面交换页脚， FIDDLE 在这里，它会出现我想要的方式，但多列过滤器搜索将中断。

解决方案

认为我需要替换这个

  $（api.column（4）.footer（））.html（
'$'+ pageTotal + '（$'+ total +'total）'
）; 
  

与此（获取第二个 th 标签的 tfoot 标签，ID为总计）：

  $（tfoot＃total th：nth-​​child（2））。html（
'$'+ pageTotal +'（$'+ total +'total）'
）
  

FIDDLE HERE

抛开（我想要的东西更好）：

这样做 $（tfoot th：nth-​​child（2））。html（33）在控制台中
数据表footer_callback
将更改页脚中第4列的值。 / p>

，但执行类似的命令 $（tfoot＃total th：nth-​​child（2））。html（33）在这里的控制台 JSFIDDLE 不会，我必须在 footer_callback 函数

here is my FIDDLE

I want to have more control over this part of the code:

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

I would like to apply this on my #total footer. It is currently being applied to the #search footer, and is changing the value of the #search footer in the top right of the table, when I want it to change the #total footer in the bottom right.

this is with the html like this order:

<tfoot id="search">
            <tr>
                <th>First name</th>
                <th>Last name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Salary</th>
            </tr>
        </tfoot>
         <tfoot id="total">
            <tr>
                <th colspan="4" style="text-align:right">Total:</th>
                <th></th>
            </tr>
        </tfoot>

I can swap the footers around above, FIDDLE here, and it will appear the way I want but the multi column filter search will break. Can I achieve what I am trying here without breaking anything?

解决方案

think i need to replace this

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

with this(getting the 2nd th tag of the tfoot tag with id total):

        $("tfoot#total th:nth-child(2)").html(
              '$'+pageTotal +' ( $'+ total +' total)'
        )

FIDDLE HERE

An aside(something I want ot understand better):

doing this $("tfoot th:nth-child(2)").html("33") in the console here datatables footer_callback will change the value of the 4th column in the footer.

but doing the similar command $("tfoot#total th:nth-child(2)").html("33") in the console here JSFIDDLE does not chnage it, I have to do it within the footer_callback function

这篇关于datatables + 2 footers +控制在footer_callback函数中处理哪一个的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！