Le plugin jquery à pied ne fonctionne pas avec asp.net Gridview et la pagination

J'utilise Masterpage avec le support de contenu, à l'intérieur je génère mon Gridview. J'utilise le plugin Footable Jquery afin de le rendre réactif. Mais quand j'utilise l'option pagination du Gridview, je perds la fonctionnalité css et js.Le plugin jquery à pied ne fonctionne pas avec asp.net Gridview et la pagination

page 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# page

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; 
    } 
}

tête Masterpage

<%@ 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

n'a pas trouvé de solution de travail pour cette question, s'il vous plaît aider

Source

2017-01-02 Adir Cohen

Essayez d'appeler la fonction footable à nouveau après le tri ou la pagination. Si cela ne fonctionne pas, supprimez le contrôle IsPostBack. Le problème réside avec cette ligne GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;. Cela doit être exécuté à chaque fois, tandis que les états GridView1.HeaderRow.Cells[4].Attributes["data-hide"] = "phone"; etc. sont conservés après la publication.

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

    //or 

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

Source

2017-01-02 12:46:52 VDWWD

essayé, ne fonctionne toujours pas j'ajouté ceci sur ASPX: Et votre fonction sur le code derrière –

Mis à jour ma réponse. – VDWWD

Désolé, essayé les deux cas, ne fonctionne pas D'autres idées? –

Le plugin jquery à pied ne fonctionne pas avec asp.net Gridview et la pagination

Répondre

Questions connexes