How to make footable pagination work with asp.net gridview?

Question

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 tutorial says to add a custom div to the tfoot element of the table

<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.

Answer 1

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

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

    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'

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

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

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.