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.

Please leave a comment with the reason for the downvote t_t, I'm new and trying to help ppl, did I do something wrong with the Q&A? — Felipe Carminati, Jun 26 '14 at 21:33
I didn't downvote, but people generally get irritated if you do not show evidence of work that you have done to resolve this. So it might help to show sample of your code and explain where exactly the script is not working. — crafter, Jun 26 '14 at 23:31
Thank you @crafter, I did some editions and I hope it is a bit better. — Felipe Carminati, Jun 27 '14 at 13:55
Great, and you posted your solution back as an answer and added links and sample code. I upvoted because of this to balance your downvote. ;) — crafter, Jun 27 '14 at 14:25

score 2 · Accepted Answer · edited May 23 '17 at 12:08

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.

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

1 Answers1