Responsive Data Tables with jQuery

On October 2011, we wrote a article called Responsive and SEO Friendly Data Tables which caught a lot of attention. now they are request asking for a plugin to convert the html table into a div based responsive table in real time using JavaScript. So, i started my hand getting in dirt.

i really don’t know how well it goes, this is my jQuery plugin. So, feel free to report bugs. before continuing please consider reading previous article for all the HTML and CSS stuff.

Basic HTML Table which we will convert into a div based table

<table>
        <thead>
		<tr>
			<td>Employee No</td>
			<td>User Name</td>
			<td>Real Name</td>
			<td>Age</td>
			<td>Profession</td>
			<td>Contact</td>
		<tr>
        </thead>
        <tr>
            <td>2311</td>
            <td>Lorem</td>
            <td>Ipsum dolor</td>
            <td>22</td>
            <td>Web designer</td>
            <td>1234567890</td>
	</tr>
        <tr>
            <td>4542</td>
            <td>Viverra</td>
            <td>Nam non viverra</td>
            <td>22</td>
            <td>Web developer</td>
            <td>2345678901</td>
        </tr>
        <tr>
            <td>5643</td>
            <td>Sed</td>
            <td>Donec sed volutpat</td>
            <td>25</td>
            <td>Editor</td>
            <td>3456789012</td>
        </tr>
        <tr>
            <td>5464</td>
            <td>Orci</td>
            <td>Phasellus eu orci nunc</td>
            <td>32</td>
            <td>User Interface</td>
            <td>4567890123</td>
        </tr>
    </table>

This basic table will be converted into div based table after jQuery

Step 1: Include jQuery Library

We are using jquery-1.7.1.min.js for real time table conversion grab you copy

<script src="js/jquery-1.7.1.min.js"></script>

If you can grab a copy don’t worry. we have included all the files in the source

Step 2: Adding the jQuery

We will start from the begining i.e from variables

var head_col_count = $('thead td').size();
var head_col_label = $('thead td:nth-child('+ i +')').text();

head_col_count

Returns total number of td’s inside thead

head_col_label

Extracts the value of td inside thead and then stores it to data-label

Now, the remaining tutorial will be followed inside the program through comments

<script>
	// counts total number of td in a head so that we can can use it for label extraction
	var head_col_count =  $('thead td').size();
	// loop which replaces td
	for ( i=0; i <= head_col_count; i++ )  {
		// head column label extraction
		var head_col_label = $('thead td:nth-child('+ i +')').text();
		// replaces td with <div class="column" data-label="label">
		$('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">
	$('table').replaceWith(
		function(){
			return $('<div class="table">').append($(this).contents());
		}
	);	
	// replaces thead with <div class="table-head">
	$('thead').replaceWith(
		function(){
			return $('<div class="table-head">').append($(this).contents());
		}
	);	
	// replaces tr with <div class="row">
	$('tr').replaceWith(
		function(){
			return $('<div class="row">').append($(this).contents());
		}
	);	
	// replaces th with <div class="column">
	$('th').replaceWith(
		function(){
			return $('<div class="column">').append($(this).contents());
		}
	);
</script>

And it works. I hope you got a clean understanding on this little jQuery plugin. please use our comments section for a thanking message, a bug report etc,.. Any kind of spreading the word is appreciated and its time to bed

I would like to thank useyourfred