ScreenShot:
Scripts:
<meta name=”viewport” content=”width=device-width, initial-scale=1″ />
<link href=”http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css”
rel=”stylesheet”>
http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js
https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js
<link rel=”stylesheet” href=”http://cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css” />
http://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js
<style>
.panel {
padding: 15px;
margin-bottom: 20px;
background-color: #ffffff;
border: 2px solid #57BC90;
border-color:#57BC90;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}
.panel-heading {
padding: 10px 15px;
margin: -15px -15px 15px;
font-size: 17.5px;
font-weight: 500;
background-color:#6c7a89;
border: 1px solid #e4287e;
border-bottom-color:#e4287e;
}
.panel-footer {
padding: 10px 15px;
margin: 15px -15px -15px;
background-color: #f5f5f5;
border-top: 1px solid #dddddd;
border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;
}
.panel-body
{
background-color: #ffffff;
border: 2px solid #57BC90;
border-color:#57BC90;
}
.siz
{
padding-left:10px;
padding-top:30px;
padding-right:10px;
}
.clr
{
color:#57BC90;
}
hr.style-one {
border: 0;
height: 55px;
margin-left:33%;
background-image: url(img/type_1.png);
background-repeat: no-repeat;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
box-sizing: border-box;
display: inline-block;
min-width: 1.5em;
padding: 0.5em 1em;
margin-left: 2px;
text-align: center;
text-decoration: none !important;
cursor: pointer;
*cursor: hand;
color: #333 !important;
border: 1px solid transparent;
}
//Reponsive From My Css
@media screen and (max-width: 600px),(max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px)
{
table td + td + td + td + td + td + td + td + td + td + td {
border: none;
word-break: break-all;
}
.footable
{
clear: both;
margin-bottom: 6px !important;
max-width: none !important;
table-layout: fixed;
word-break: break-all;
}
thead {
display: none;
}
tr {
margin-bottom: 20px;
display: block;
border-bottom: 2px solid #ddd;
border: 2px solid #57BC90;
border-color:#57BC90;
}
td {
display: block;
text-align: right;
font-size: 13px;
border-bottom: 1px dotted #ccc;
}
td:last-child {
border-bottom: 0;
}
tr:nth-of-type(2n)
{
background-color: inherit;
}
tbody td
{
display: block;
text-align: center;
border-collapse: separate;
}
tbody td:before
{
content: attr(data-th);
display: block;
text-align: left;
color:#e4287e;
}
//Add Header To Datatable Reponsive
/*
Label the data*/
td:nth-of-type(1):before
{
content: “ID”;
}
td:nth-of-type(2):before
{
content: “First Name”;
}
td:nth-of-type(3):before
{
content: “Last Name”;
}
td:nth-of-type(4):before
{
content: “Fees Paid”;
}
td:nth-of-type(5):before
{
content: “Gender”;
}
td:nth-of-type(6):before
{
content: “Email Id”;
}
td:nth-of-type(7):before
{
content: “Telephone Number”;
}
td:nth-of-type(8):before
{
content: “Date Of birth”;
}
td:nth-of-type(9):before
{
content: “Is Active”;
}
td:nth-of-type(10):before
{
content: “Creation Date”;
}
td:nth-of-type(11):before
{
content: “last Modified Date”;
}
}
</style>
$(document).ready(function () {
$(‘#example’).DataTable({
“paging”: true,
“ordering”: true,
“info”: true
});
});
Body Tag:
<form id=”form1″ runat=”server”>
Students Portal
ID | First Name | Last Name | Fees Paid | Gender | Email Id | Telephone Number | Date Of Birth | Is Active | Creation Date | last Modified Date |
---|---|---|---|---|---|---|---|---|---|---|
Total: | ||||||||||
ID | First Name | Last Name | Fees Paid | Gender | Email Id | Telephone Number | Date Of Birth | Is Active | Creation Date | last Modified Date |
</div>
</FooterTemplate>
</asp:Repeater>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
Cs File:
protected void Page_Load(object sender, EventArgs e)
{
SqlConnection con = new SqlConnection(“Data Source=ARAVIND;Initial Catalog=aravind;User ID=xxx;Password=test123;”);
DataSet dataset = new DataSet();
SqlDataAdapter da = new SqlDataAdapter(“select * from tbl_Datatable1”, con);
da.Fill(dataset, “tbl_Datatable”);
rptOscarNominees.DataSource = dataset;
rptOscarNominees.DataBind();
}