I do not know much about the subject but I think it's a postback problem. When I click on a number on my page the number is not put in active state, but the script that I have is for that reason but it does not work. if it puts it in active state for a fraction of a second until the page is reloaded and shows me the other data
Is there any solution by modifying the code I already have ??? otherwise, how could I solve it using AJAX or Angular? I think that for those cases it's those tools.
I have the following code in html (asp.net) c #
<div class="container-fluid" style="overflow: hidden;">
<asp:Repeater ID="rptPaging" runat="server" OnItemCommand="rptPaging_ItemCommand">
<HeaderTemplate>
<div class="container-fluid">
<div class="row">
<div class="col-sm-12 text-center">
<ul id="id_pgn" class="pagination">
</HeaderTemplate>
<ItemTemplate>
<li class="btn_pgn">
<asp:LinkButton ID="btnPage" CommandName="Page" CommandArgument="<%# Container.DataItem %>" runat="server">
<%# Container.DataItem %>
</asp:LinkButton>
</li>
</ItemTemplate>
<FooterTemplate>
</ul>
</div>
</div>
</div>
</FooterTemplate>
</asp:Repeater>
</div>
<script>
var header = document.getElementById("id_pgn");
var btns = header.getElementsByClassName("btn_pgn");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
});
}
</script>
As I use a repeater to show my data, in my code on the server side I have the following code for the page
/// <summary>
/// Page numeracion
/// </summary>
public int PageNumber
{
get
{
if (ViewState["PageNumber"] != null)
{
return Convert.ToInt32(ViewState["PageNumber"]);
}
else
{
return 0;
}
}
set { ViewState["PageNumber"] = value; }
}
private void BindRepeater()
{
//Create the PagedDataSource that will be used in paging
PagedDataSource pgitems = new PagedDataSource();
pgitems.DataSource = tab_user002.DefaultView;
pgitems.AllowPaging = true;
//Control page size from here
pgitems.PageSize = 4;
pgitems.CurrentPageIndex = PageNumber;
if (pgitems.PageCount > 1)
{
rptPaging.Visible = true;
ArrayList pages = new ArrayList();
for (int i = 0; i <= pgitems.PageCount - 1; i++)
{
pages.Add((i + 1).ToString());
}
rptPaging.DataSource = pages;
rptPaging.DataBind();
}
else
{
rptPaging.Visible = false;
}
//Finally, set the datasource of the repeater
rp_gs_tu.DataSource = pgitems;
rp_gs_tu.DataBind();
}
//This method will fire when clicking on the page no link from the pager repeater
protected void rptPaging_ItemCommand(object source, System.Web.UI.WebControls.RepeaterCommandEventArgs e)
{
PageNumber = Convert.ToInt32(e.CommandArgument) - 1;
BindRepeater();
}