Footable jquery 插件不适用于 asp.net Gridview 和分页答案

【问题标题】：Footable jquery plugin not working with asp.net Gridview and paginationFootable jquery 插件不适用于 asp.net Gridview 和分页
【发布时间】：2017-01-02 12:30:17
【问题描述】：

我正在使用带有内容占位符的 Masterpage，在里面我正在生成我的 Gridview。

我正在使用 Footable Jquery 插件以使其具有响应性。但是当我使用 Gridview 的分页选项时，我失去了适合的 css 和 js 功能。

aspx 页面

<%@ Page Title="" Language="C#" MasterPageFile="~/www/MasterPage.master" AutoEventWireup="true" CodeFile="articleListing.aspx.cs" Inherits="www_articleListing" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/0.1.0/css/footable.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/0.1.0/js/footable.min.js"></script>
<script type="text/javascript">
    $(function () {
        $('#<%=GridView1.ClientID%>').footable();
    });
</script>
<link href="../css/article.css" rel="stylesheet" />
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<asp:GridView ID="GridView1" CssClass="footable" runat="server" AutoGenerateColumns="False" DataKeyNames="id_article" 
    data-page-size="10" DataSourceID="SqlDataSource1" AllowSorting="True" AllowPaging="True">
    <Columns>
        <%--<asp:CommandField ShowCancelButton="False" ShowDeleteButton="True" ShowEditButton="True" />--%>
        <asp:CommandField ShowEditButton="true" ButtonType="Image" ControlStyle-Width="16px" EditImageUrl="../Images/icons/edit-button.png" ItemStyle-Width="25px" UpdateText="Edit" />
        <asp:CommandField ShowDeleteButton="true" ButtonType="Image" ControlStyle-Width="16px" DeleteImageUrl="../Images/icons/delete-button.png" ItemStyle-Width="25px" />
        <asp:BoundField DataField="id_article" HeaderText="#" InsertVisible="False" ReadOnly="True" SortExpression="id_article" Visible="False" />
        <asp:BoundField DataField="article_title" HeaderText="Title" SortExpression="article_title" />
        <asp:BoundField DataField="article_writer" HeaderText="Writer" SortExpression="article_writer" />
        <asp:BoundField DataField="article_date" HeaderText="Date" SortExpression="article_date" />
        <asp:BoundField DataField="article_time" HeaderText="Time" SortExpression="article_time" />
    </Columns>
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ConnStr1 %>" SelectCommand="SELECT [id_article], [article_title], [article_writer], [article_date], [article_time] FROM [articles] ORDER BY [article_date] DESC, [article_time] DESC"></asp:SqlDataSource>

<a class="ui-button ui-widget ui-corner-all" id="newArticleBTN" href="addArticle.aspx">New article</a>
</asp:Content>

C# 页面

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;

public partial class www_articleListing : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        BindGrid();
    }
}

private void BindGrid()
{
    //Attribute to show the Plus Minus Button.
    GridView1.HeaderRow.Cells[0].Attributes["data-class"] = "expand";

    //Attribute to hide column in Phone.
    GridView1.HeaderRow.Cells[4].Attributes["data-hide"] = "phone";
    GridView1.HeaderRow.Cells[5].Attributes["data-hide"] = "phone";
    GridView1.HeaderRow.Cells[6].Attributes["data-hide"] = "phone";

    //Adds THEAD and TBODY to GridView.
    GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;
  }
}

母版页标题

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="www_MasterPage" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title> </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"/>
<link href="../css/main.css" rel="stylesheet" />
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">       </script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

First page look like that

After clicking on the pagination the page look like

没有找到任何有效的解决方案，请帮助

【问题讨论】：

标签： c# jquery asp.net gridview footable

【解决方案1】：

在分页或排序后再次尝试调用footable函数。

protected void GridView1_PageIndexChanging(object sender, GridViewPageEventArgs e)
{
    ScriptManager.RegisterStartupScript(Page, Page.GetType(), "footable", "$('#" + GridView1.ClientID + "').footable();", true);
}

如果这不起作用，请删除IsPostBack 检查。问题在于这一行GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;。每次都需要执行，而GridView1.HeaderRow.Cells[4].Attributes["data-hide"] = "phone";等的状态在回发后保持。

protected void Page_Load(object sender, EventArgs e)
{
    BindGrid();

    //or

    if (!IsPostBack)
    {
        BindGrid();
    }
    GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;
}

【讨论】：

试过了，还是不行我在aspx上加了这个：你的函数在后面的代码中
更新了我的答案。
抱歉，两种情况都试过了，都没有用。还有什么办法吗？
对不起，我没有。当我复制你的整个 sn-p 时，我在使用分页时得到了相同的结果。将GridView1.HeaderRow.TableSection = TableRowSection.TableHeader; 添加到页面加载为我修复了它。