Make DataList responsive with paging using jQuery Footable plugin in ASP.Net

Last Reply one year ago By Waghmare

Posted one year ago

Hiii,

I want to add responsive behaviour to Datalist and implement paging in it.

Below are the HTML code of datalist.

<asp:DataList ID="dlBooking" runat="server" RepeatColumns="4" RepeatLayout="Table" Width="100%"
        OnItemDataBound="dlBooking_ItemDataBound" OnItemCommand="dlBooking_ItemCommand">
        <ItemTemplate>
            <div class="col-md-12 col-lg-12" style="padding: 5px; width: 100%">
                <div class="panel panel-default pnlhover" style="margin-bottom: 10px;" id="pnlHead" runat="server" >
 
                    <div class="panel-heading">
                        <div class="panel-title">
                            <div class="row">
                                <div class="col-md-3 col-lg-4">
                                    <b>
                                        <asp:Label ID="lblRoomID" runat="server" Text='<%# Eval("Id") %>' Visible="false" /></b>
                                    <asp:Label ID="lblRoomNo" runat="server" Text='<%# Eval("Room_No") %>' /></b>
                                </div>
                                <div class="col-md-8 col-lg-8">
                                    <b>
                                        <asp:Label ID="lblStatus" runat="server" Text='<%# Eval("Room_Status") %>' /></b>
                                </div>
                            </div>
 
                        </div>
                    </div>
 
                    <div class="panel-body">
                        <asp:DataList ID="dlBookingDetails" runat="server" RepeatLayout="Table" Width="100%" ShowHeader="true">
                            <ItemTemplate>
                                <div class="form-horizontal">
                                    <div class="form-group">
                                        <table class="table" style="margin-bottom: 0px" runat="server" id="listTable" >
                                            <tr>
                                                <td align="center"><b>Booked From :</b></td>
                                                <td>
                                                    <asp:Label ID="lblBookFrom" runat="server" Text='<%# Eval("BookedFrom","{0:dd/MMM/yyyy}") %>' /></td>
                                            </tr>
 
                                            <tr>
                                                <td align="center"><b>Booked To :</b></td>
                                                <td>
                                                    <asp:Label ID="lblBookTill" runat="server" Text='<%# Eval("BookedTill","{0:dd/MMM/yyyy}") %>' /></td>
                                            </tr>
                                        </table>
                                    </div>
                                </div>
                            </ItemTemplate>
                        </asp:DataList>
                    </div>
                    <div class="panel-footer">
                        <asp:LinkButton ID="btnBook" runat="server" Text="Book Now" CssClass="btn-success btn-block btn"></asp:LinkButton>
                    </div>
                </div>
            </div>
        </ItemTemplate>
    </asp:DataList>