有腳的jquery插件不能與asp.net一起使用Gridview和分頁

我正在使用內容佔位符的主頁，裏面我正在生成我的Gridview。有腳的jquery插件不能與asp.net一起使用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

沒有發現該問題的任何可行的解決方案，請大家幫忙

來源

2017-01-02 Adir Cohen

嘗試分頁或排序後再次調用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; 
}

來源

2017-01-02 12:46:52 VDWWD

試了，仍然沒有工作添加此上ASPX：的

後更新我的答案。 – VDWWD

對不起，試過這兩種情況，不工作有沒有其他的想法？ –

有腳的jquery插件不能與asp.net一起使用Gridview和分頁

回答

相關問題