wake-up-neo.com

Bootstrap-Paginierung in ASP.NET-Gridview-Pagerart?

Ich bin mit Header, Item und Footer bereits fertig, aber Pager nicht mit Bootstrap 3.0

Könnten Sie mir bitte erklären, wie Sie die Bootstrap-Paginierung im ASP.NET-Gridview-Pager-Stil implementieren?

Bitte helfen

Zusätzliche Information:::

Folgendes habe ich bisher durch Hinzufügen von CssClass getan. Die Tabellendarstellung ist perfekt für den Bootstrap-Stil.

<div class="table-responsive">
        <asp:GridView ID="grdSearchAgreement" runat="server" CssClass="table table-hover"
            GridLines="None" AllowPaging="true" PageSize="2">
        </asp:GridView>
    </div>

Und hier ist der Paging-Stil, der von ASP.NET GridView generiert wurde. Es ist die Tabellenstruktur t td.

<tr>
        <td colspan="7"><table>
            <tr>
                <td><span>1</span></td><td><a href="javascript:__doPostBack(&#39;ctl00$body$grdSearchAgreement&#39;,&#39;Page$2&#39;)">2</a></td><td><a href="javascript:__doPostBack(&#39;ctl00$body$grdSearchAgreement&#39;,&#39;Page$3&#39;)">3</a></td>
            </tr>
        </table></td>
    </tr>

Weitere Informationen finden Sie jedoch in Bootstrap 3.0 Pagination Document. Der Stil kann nur für ul li gelten. https://getbootstrap.com/docs/3.3/components/#pagination

    <ul class="pagination">
  <li><a href="#">&laquo;</a></li>
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#">&raquo;</a></li>
</ul>

Wie kann ich tr td pager ändern, der von gridview in ul li generiert wird?

13
Rabin Panichnok

Ich weiß, das ist alt, aber ich habe etwas gefunden, das ein CSS-Stil ist, einfach und schnell

https://sufiawan.wordpress.com/2014/09/26/asp-net-use-bootstrap-pagination-on-gridview/

Ich hoffe, dass es irgendwann jemanden retten wird.


aktualisieren:

* Falls der Link nicht erreichbar ist:

Sie fügen das CSS hinzu 

.pagination-ys {
    /*display: inline-block;*/
    padding-left: 0;
    margin: 20px 0;
    border-radius: 4px;
}

.pagination-ys table > tbody > tr > td {
    display: inline;
}

.pagination-ys table > tbody > tr > td > a,
.pagination-ys table > tbody > tr > td > span {
    position: relative;
    float: left;
    padding: 8px 12px;
    line-height: 1.42857143;
    text-decoration: none;
    color: #dd4814;
    background-color: #ffffff;
    border: 1px solid #dddddd;
    margin-left: -1px;
}

.pagination-ys table > tbody > tr > td > span {
    position: relative;
    float: left;
    padding: 8px 12px;
    line-height: 1.42857143;
    text-decoration: none;    
    margin-left: -1px;
    z-index: 2;
    color: #aea79f;
    background-color: #f5f5f5;
    border-color: #dddddd;
    cursor: default;
}

.pagination-ys table > tbody > tr > td:first-child > a,
.pagination-ys table > tbody > tr > td:first-child > span {
    margin-left: 0;
    border-bottom-left-radius: 4px;
    border-top-left-radius: 4px;
}

.pagination-ys table > tbody > tr > td:last-child > a,
.pagination-ys table > tbody > tr > td:last-child > span {
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px;
}

.pagination-ys table > tbody > tr > td > a:hover,
.pagination-ys table > tbody > tr > td > span:hover,
.pagination-ys table > tbody > tr > td > a:focus,
.pagination-ys table > tbody > tr > td > span:focus {
    color: #97310e;
    background-color: #eeeeee;
    border-color: #dddddd;
}

Und einfach im grd verwenden 

<PagerStyle CssClass="pagination-ys" />
38
iYazee6

Meine Antwort stammt aus der vorherigen Antwort von iYazee6 Was neu ist, ist die Verbesserung des CSS-Layouts für die Paginierung. Implementieren Sie es und zeigen Sie das Ergebnis an.

<asp:GridView ID="GridView1" runat="server" AllowPaging="True"  CssClass="table table-striped table-hover"   OnPageIndexChanging="GridView1_PageIndexChanging" PageSize="10">
    <PagerStyle HorizontalAlign = "Center" CssClass = "GridPager" />
...

cSS-Code:

.GridPager a,
.GridPager span {
    display: inline-block;
    padding: 0px 9px;
    margin-right: 4px;
    border-radius: 3px;
    border: solid 1px #c0c0c0;
    background: #e9e9e9;
    box-shadow: inset 0px 1px 0px rgba(255,255,255, .8), 0px 1px 3px rgba(0,0,0, .1);
    font-size: .875em;
    font-weight: bold;
    text-decoration: none;
    color: #717171;
    text-shadow: 0px 1px 0px rgba(255,255,255, 1);
}

.GridPager a {
    background-color: #f5f5f5;
    color: #969696;
    border: 1px solid #969696;
}

.GridPager span {

    background: #616161;
    box-shadow: inset 0px 0px 8px rgba(0,0,0, .5), 0px 1px 0px rgba(255,255,255, .8);
    color: #f0f0f0;
    text-shadow: 0px 0px 3px rgba(0,0,0, .5);
    border: 1px solid #3AC0F2;
}

das Ergebnis ist:

 enter image description here

8
Eng. Samer T

Bootsrap Pagination ist statisch. Sie müssen es dynamisch machen, um es einer Rasteransicht hinzuzufügen, damit Pager-Elemente entsprechend der Anzahl der Datensätze in der Rasteransicht generiert werden. Sie müssen etwas Jquery-Code schreiben, um es dynamisch zu machen. Am besten verwenden Sie eines der vielen verfügbaren Jquery-Plugins, beispielsweise Bootpag .

Hier ist ein typisches Beispiel für Verwendung der Bootstrap-Paginierung in ASP.NET GridView .

1
Priya

Sie können PagerTemplate für das GridView-Steuerelement bereitstellen. http://msdn.Microsoft.com/de-de/library/system.web.ui.webcontrols.gridview.pagertemplate.aspx

1
Andrey M.

das Ergebnis von iYazee6 führt zu Anzeigeproblemen in meinem Raster. Es wird nur die erste Spalte des Gitters benötigt, um den Pager zu halten, selbst wenn der HTML-Code colspan = "6" für ein Gitter mit 6 Spalten ist. Ich kann nicht feststellen warum. Die verbesserte Lösung von GridPager CSS ist großartig. Ich habe einige weitere CSS hinzugefügt, um es wie Bootstrap ie GridPager-info OR GridPager-Danger OR= GridPager-Success zu verwenden die Farben entsprechend ändern.

CSS Snippet ist:

/***** GridPager-Danger *****/

.GridPager-Danger a,
.GridPager-Danger span {
    border: solid 1px #C60C30;
    background: #e9e9e9;
    color: #717171;
    
}

.GridPager-Danger a {
    background-color: #f5f5f5;
    color: #C60C30;
    border: 1px solid #C60C30;
}

.GridPager-Danger a:hover {
    background-color: #C60C30;
    color: #f5f5f5;
}

.GridPager-Danger span {
    background: #C60C30;
    color: #f0f0f0;
}



/***** GridPager-Success *****/

.GridPager-Success a,
.GridPager-Success span {
    border: solid 1px #3c763d;
    background: #eeffcc;
    color: #717171;
    
}

.GridPager-Success a {
    background-color: #eeffcc;
    color: #3c763d;
    border: 1px solid #3c763d;
}

.GridPager-Success a:hover {
    background-color: #3c763d;
    color: #f5f5f5;
}

.GridPager-Success span {
    background: #3c763d;
    color: #f0f0f0;
}

Sie müssen nur dieses CSS zusammen mit dem GridPager-CSS in die Datei GridPager.css kopieren und diesen Code in Ihren HTML-Code einfügen

<PagerStyle HorizontalAlign = "Center" CssClass="GridPager GridPager-Info" />

OR

<PagerStyle HorizontalAlign = "Center" CssClass="GridPager GridPager-Success" />

OR

<PagerStyle HorizontalAlign = "Center" CssClass="GridPager GridPager-Danger" />

Es könnte jemandem helfen, der Bootstrap verwendet

Das HTML Markup besteht aus einer ASP.Net GridView. Für die GridView habe ich das Paging mit der AllowPaging-Eigenschaft aktiviert und auch das Ereignis OnPageIndexChanging angegeben.

Der Code zum Binden der GridView mit Datensätzen aus der Customers-Tabelle der Northwind-Datenbank.

Um den GridView Pager zu formatieren, müssen Sie die folgenden Schritte ausführen.

Als Nächstes müssen Sie der Seite die Pager-CSS-Klasse mithilfe der PagerStyle-CssClass-Eigenschaft zuweisen (siehe unten).

using System.Data;
using System.Data.SqlClient;
using System.Configuration;

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        this.BindGrid();
    }
}

private void BindGrid()
{
    string strConnString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(strConnString))
    {
        using (SqlCommand cmd = new SqlCommand("SELECT * FROM Customers"))
        {
            using (SqlDataAdapter sda = new SqlDataAdapter())
            {
                cmd.Connection = con;
                sda.SelectCommand = cmd;
                using (DataTable dt = new DataTable())
                {
                    sda.Fill(dt);
                    GridView1.DataSource = dt;
                    GridView1.DataBind();
                }
            }
        }
    }
}


<asp:GridView ID="GridView1" HeaderStyle-BackColor="#3AC0F2" HeaderStyle-ForeColor="White"
    RowStyle-BackColor="#A1DCF2" AlternatingRowStyle-BackColor="White" AlternatingRowStyle-ForeColor="#000"
    runat="server" AutoGenerateColumns="false" AllowPaging="true" OnPageIndexChanging="OnPageIndexChanging">
    <Columns>
        <asp:BoundField DataField="ContactName" HeaderText="Contact Name" ItemStyle-Width="150px" />
        <asp:BoundField DataField="City" HeaderText="City" ItemStyle-Width="100px" />
        <asp:BoundField DataField="Country" HeaderText="Country" ItemStyle-Width="100px" />
    </Columns>
    <PagerStyle HorizontalAlign = "Right" CssClass = "GridPager" />
</asp:GridView>
<PagerStyle HorizontalAlign = "Right" CssClass = "GridPager" />


<style type="text/css">
    body
    {
        font-family: Arial;
        font-size: 10pt;
    }
    .GridPager a, .GridPager span
    {
        display: block;
        height: 15px;
        width: 15px;
        font-weight: bold;
        text-align: center;
        text-decoration: none;
    }
    .GridPager a
    {
        background-color: #f5f5f5;
        color: #969696;
        border: 1px solid #969696;
    }
    .GridPager span
    {
        background-color: #A1DCF2;
        color: #000;
        border: 1px solid #3AC0F2;
    }
</style>
0
Fezal halai

dies funktioniert für Bootstrap 4 RTL

add PagerStyle-CssClass = "bs4-aspnet-pager"

/*bs4-aspnet-pager*/
.bs4-aspnet-pager a,
.bs4-aspnet-pager span {
position: relative;
float: right;
padding: 6px 12px;
margin-right: -1px;
line-height: 1.42857143;
color: ##007bff;
text-decoration: none;
background-color: #fff;
border: 1px solid #ddd;
}

.bs4-aspnet-pager span {
z-index: 3;
color: #fff;
cursor: default;
background-color: #007bff;
border-color: #007bff;
}

.bs4-aspnet-pager tr > td:first-child > a,
.bs4-aspnet-pager tr > td:first-child > span {
margin-right: 0;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}

.bs4-aspnet-pager tr > td:last-child > a,
.bs4-aspnet-pager tr > td:last-child > span {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}

.bs4-aspnet-pager a:hover,
.bs4-aspnet-pager span:hover,
.bs4-aspnet-pager a:focus,
.bs4-aspnet-pager span:focus {
z-index: 2;
color: #23527c;
background-color: #eee;
border-color: #ddd;
}

.bs4-aspnet-pager td {
padding: 0;
}
/*end bs4-aspnet-pager */

Aufbauend auf dem Beitrag iYazee6 aus dem Blog von Yusuf Setiawan.

Ich spreche a: hover und span: hover auf und vergrößere die Polsterbreite, um einen Effekt auf die Maus zu erzielen. Die ursprüngliche Polsterung: 8px 12px. Die Schrift wurde auch fett dargestellt.

    .pagination-ys table > tbody > tr > td > a:hover,
    .pagination-ys table > tbody > tr > td > span:hover {
        padding: 8px 16px;
        color: #97310e;
        font-weight: bold;
        background-color: #eeeeee;
        border-color: #dddddd;
    }
0
Chris Catignani

Passen Sie einfach die Antworten von diese Frage an und Sie haben Nice GridView-Pager, die jedes Twitter Bootstrap-CSS-Design unterstützen.

GridView-Vorlage:

<asp:GridView ... AllowPaging="true" PageSize="10">
  ...
  <PagerStyle HorizontalAlign="Center" />
  <PagerTemplate>
    <ul class="pagination">
      <asp:Repeater ID="Pager" ItemType="System.Int32" SelectMethod="GetPages" runat="server">
        <ItemTemplate>
          <li class='<%#((int)Item == this.GridView.PageIndex+1)? "active" : "" %>'>
            <asp:LinkButton CommandName="Page" CommandArgument="<%# Item %>"
                Text="<%# Item %>" runat="server" OnClick="PageIndexChanging" />
          </li>
        </ItemTemplate>
      </asp:Repeater>
    </ul>
  </PagerTemplate>
</asp:GridView>

Serverseitiger Code:

public IEnumerable<int> GetPages()
{
    return Enumerable.Range(1, GridView.PageCount);
}

protected void PageIndexChanging(object sender, EventArgs e)
{
    LinkButton pageLink = (LinkButton)sender;
    GridView.PageIndex = Int32.Parse(pageLink.CommandArgument) - 1;

    BindDataToGridView();
}

enter image description here

0
Vladislav