http://myday.uz/js/ng_responsive_tables_mod.js

1/**
2 * NG Responsive Tables v1.0
3 * Inspiration: http://css-tricks.com/examples/ResponsiveTables/responsive.php
4 * Author: Tomislav Matijević
5 * List of functions:
6 *    - targetTable: Searches for each table row , find td and take its current index.
7 *      Apply to that index same index of table head or td in first table row ( in case there are no table header applied )
8 *    - checkForTableHead: If there is no table head defined, use td in first table row as table head (prevention mode)
9 * Config:
10 * - Adjust paddings
11 * - On each td there is class named "tdno[index]", so you can modify each td if you need custom padding
12 */
13
14;(function ($) {
15	$.fn.ngResponsiveTables = function (options) {
16		var defaults = {
17				smallPaddingCharNo: 5,
18				mediumPaddingCharNo: 10,
19				largePaddingCharNo: 15
20			},
21			//$selElement = this,
22			ngResponsiveTables = {
23				opt: '',
24				dataContent: '',
25				globalWidth: 0,
26				init: function () {
27					$selElement = $(this);
28					this.opt = $.extend(defaults, options);
29					if (2 >= $selElement.find('tr').first().find('td').size() && $selElement.find('tr img').size())
30					{
31						$selElement.addClass('responsiver');
32					}
33					else if (2 < $selElement.find('tr').first().find('td').size())
34					{
35						$selElement.addClass('responsive');
36						ngResponsiveTables.targetTable();
37					}
38				},
39				targetTable: function () {
40					var that = this;
41
42					this.opt = $.extend(defaults, options);
43
44					if ($selElement.find('tr').length > 1)
45					{
46						$selElement.find('tr').each(function(){
47							$(this).find('td').each(function(i, v){
48								that.checkForTableHead( $(this), i );
49								$(this).addClass('tdno' + i);
50							});
51						});
52					}
53					else
54					{
55						$selElement.addClass('one-row')
56					}
57				},
58				checkForTableHead: function (element, index) {
59					if ($selElement.find('th').length) {
60						this.dataContent = $selElement.find('th')[index].textContent;
61					} else {
62						this.dataContent = $selElement.find('tr:first td')[index].textContent;
63					}
64
65					// This padding is for large texts inside header of table
66					// Use small, medium and large paddingMax values from defaults to set-up offsets for each class
67					if (this.opt.smallPaddingCharNo > $.trim(this.dataContent).length) {
68						element.addClass('small-padding');
69					} else if (this.opt.mediumPaddingCharNo > $.trim(this.dataContent).length) {
70						element.addClass('medium-padding');
71					} else {
72						element.addClass('large-padding');
73					}
74					element.attr('data-content', this.dataContent);
75				}
76			};
77		return this.each(ngResponsiveTables.init);
78	};
79
80}(jQuery));