如何使页脚分页与asp.net gridview一起工作?

Footable is a plugin for jQuery responsive data tables, when I tried to use it together with asp.net GridView component, I had a problem to attach the pagination plugin to the bottom of the table.

Footable是jQuery响应性数据表的一个插件，当我尝试将它与asp.net GridView组件一起使用时，我遇到了将分页插件附加到表底部的问题。

Footable tutorial says to add a custom div to the tfoot element of the table

页脚教程说明向表的tfoot元素添加自定义div

<div class="pagination pagination-centered hide-if-no-paging"></div>

But the problem is, how to put this custom html inside tfoot tag, as GridView automatic generates the whole html? You can't simple put html together with asp.net, so I had to make a workaround method to generate the code inside tfoot. I hope it will help someone in the future, as I did't find any similar solution to this particular problem.

但问题是，如何将这个自定义html放到tfoot标记中，因为GridView自动生成整个html?你不能简单地将html与asp.net放在一起，所以我必须制定一个变通的方法来生成tfoot中的代码。我希望它能帮助将来的某个人，因为我没有找到任何类似的方法来解决这个特殊的问题。

1 个解决方案

#1

To solve the problem I adapted a method I found here: ASP.NET GridView Newbie Questions About TFOOT and TH

为了解决这个问题，我采用了我在这里找到的一种方法:ASP。关于TFOOT和TH的NET GridView新手问题。

To include the custom div tag required for pagination, the result was:

为了包含分页所需的自定义div标记，结果是:

    protected void onRowCreate(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.Footer)
        {
            int colSpan = e.Row.Cells.Count;

            for (int i = (e.Row.Cells.Count - 1); i >= 1; i -= 1)
            {
                e.Row.Cells.RemoveAt(i);
                e.Row.Cells[0].ColumnSpan = colSpan;
            }

            e.Row.Cells[0].Controls.Add(new LiteralControl("<ul class='pagination pagination-centered hide-if-no-paging'></ul>"));
        }
    }

And so called it on GridView declaration, at 'onRowCreated'

在GridView声明中叫做onRowCreated

 <asp:GridView ID="gridViewClientes" ShowFooter="true" OnRowCreated="onRowCreate">

Dont forget to call this on tablePrerender, to create TFOOT correctly:

不要忘记在桌面上调用它，以正确地创建TFOOT:

gridViewClientes.FooterRow.TableSection = TableRowSection.TableFooter;

NOTE: I actually had to change the DIV element from footable example to a UL element in order to work correctly.

注意:实际上我必须将DIV元素从footable示例更改为UL元素，以便正确工作。

#1