Convert Asp.Net Gridview to Responsive Divs

It will converts the gridview to divs which is responsive and user friendly. just pass the cssclass of gridview to gridClass variable...

by ravimallya

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<table class="table table-striped">
	<tbody>
		<tr>
			<th class="col-sm-1">
				Col 1
			</th>
			<th class="col-sm-2">
				Col 2
			</th>
			<th class="col-sm-6">
				Col 3
			</th>
			<th class="col-sm-1">
				Col 4
			</th>
			<th class="col-sm-1">
				Col 5
			</th>
			<th class="col-sm-1">
				Col 6
			</th>
		</tr>
						<tr>
				<td>
					ILK-AK Garching
				</td>
				<td>
					Einen guten Titel zu finden ist eigentlich eine Diskussion …
				</td>
				<td>
					Eine wunderbare Heiterkeit hat meine ganze Seele eingenommen, gleich den süßen Frühlingsmorgen, die ich mit ganzem Herzen genieße. Ich bin allein und…
				</td>
				<td>
					Niedrig
				</td>
				<td>
					<time datetime="2014-07-18T12:03:38.9570000">18.07.2014 12:03</time>
				</td>
				<td>
					<time datetime="2014-08-20T14:15:39.3830000">20.08.2014 14:15</time>
				</td>
			</tr>
						<tr>
				<td>
					ILK-AK Garching
				</td>
				<td>
					Zeta-Kafka ist, gleich einem Manifest, pompös und glorreich
				</td>
				<td>
					Jemand musste Josef K. verleumdet haben, denn ohne dass er etwas Böses getan hätte, wurde er eines Morgens verhaftet. »Wie ein Hund!« sagte er, es wa…
				</td>
				<td>
					Niedrig
				</td>
				<td>
					<time rel="timeago" datetime="2014-08-20T13:41:22.3500000">20.08.2014 13:41</time>
				</td>
				<td>
					<time rel="timeago" datetime="2014-08-20T14:16:39.8170000">20.08.2014 14:16</time>
				</td>
			</tr>
			<tr>
				<td>
					ILK-AK Garching
				</td>
				<td>
					Tests von mechanischen Apparaten sind grundsätzlich erwünsc…
				</td>
				<td>
					Er hörte leise Schritte hinter sich. Das bedeutete nichts Gutes. Wer würde ihm schon folgen, spät in der Nacht und dazu noch in dieser engen Gasse mi…
				</td>
				<td>
					Mittel
				</td>
				<td>
					<time datetime="2014-08-20T13:41:51.0870000">20.08.2014 13:41</time>
				</td>
				<td>
					<time...

CSS

/* seo friendly tables */
 .div-table {
    display: table;
    /* Defines a Table */
    font-size: 14px;
    border-bottom: 1px solid #dddddd;
    color: #8d8d8d;
    margin: 0;
    width: 100%;
}
.table-container {
    display: table;
    width: 100%;
}
.table-head {
    display: table-header-group;
    /* Defines a table header group */
    font-weight: 600 !important;
    text-align: center;
    border: solid 1px #ddd;
    color: #333;
    background: rgb(242, 242, 242);
    font-size: inherit;
    vertical-align: middle;
}
.table-head .column {
    /* Column inside the table-head */
    background: #f2f2f2;
    color: #7d7d7d;
    border: solid 1px #ddd;
}
.table-row {
    display: table-row;
    /* Defines a table row */
    padding: 3px 6px;
    color: #333;
    border-collapse: collapse;
    text-align: center;
    vertical-align: middle;
}
.table-row .column:nth-child(1) {
    /* First column in a row */
    border-left: 1px solid #eeeeee;
}
.table-row:last-child .column {
    /* column in a last row */
    border-bottom: none;
}
.table-row:hover {
    background: #f9f9f9;
}
.column {
    display: table-cell;
    /* Defines a table cell */
    padding: 8px 3px;
    color: #333;
    border-bottom: 1px solid #eeeeee;
    border-right: 1px solid #eeeeee;
    vertical-align:middle;
}
/* Responsive table */
 @media all and (max-width:768px) {
    .div-table, .table-row, .column, .column:before {
        display: block;
        /* Converts a table, table row, table column and table column:before into a block element */
    }
    .div-table, .table-row .column:last-child {
        border-bottom: none;
    }
    .table-head {
        position: absolute;
        /* Hides table head but not using display none */
        top: -1000em;
        left: -1000em;
    }
    .table-row {
        border: 1px solid #eeeeee;
        margin: 20px 0;
    }
    .table-row .column {
        border-right:none;
        text-align: left;
    }
    .table-row .column:nth-child(1) {
...

JavaScript

$(document).ready(function () {
    var gridClass = $('.table');
    // counts total number of td in a head so that we can can use it for label extraction
    var head_col_count = $(gridClass).find('tbody th').size();

    // loop which replaces td
    for (i = 0; i <= head_col_count; i++) {
        // head column label extraction
        var head_col_label = $(gridClass).find('tbody th:nth-child(' + i + ')').text();
        // replaces td with <div class="column" data-label="label">
        $(gridClass).find('tr td:nth-child(' + i + ')').replaceWith(function () {
            return $('<div class="column" data-label="' + head_col_label + '">').append($(this).contents());
        });
    }
    // replaces table with <div class="table">
    $(gridClass).replaceWith(function () {
        return $('<div class="div-table">').append($(this).contents());
    });

    // replaces thead with <div class="table-head">
    $('.div-table tbody tr:first-child').replaceWith(function () {
        return $('<div class="table-head">').append($(this).contents());
    });
    // replaces tbody with <div class="table-container">
    $('.div-table tbody').replaceWith(function () {
        return $('<div class="table-container">').append($(this).contents());
    });
    // replaces tr with <div class="table-row">
    $('.div-table tr').replaceWith(function () {
        return $('<div class="table-row">').append($(this).contents());
    });
    // replaces th with <div class="column">
    $('.div-table th').replaceWith(function () {
        return $('<div class="column">').append($(this).contents());
    });
});