mobiTable jQuery Table Plugin Splash

mobiTable: The jQuery Responsive Table Plugin

About


mobiTable is a free to use responsive plug-in that rearranges HTML tables into a much easier to navigate format for mobile devices by showing the table rows one touch/click at a time. If you like the plugin, please give me a like on Facebook or a Google+.

Features
  • Multiple Table Support
  • Custom trigger width
  • SVG navigation icons

Demo


Resize your browser or try it out on a mobile device to see.

ID Name Address Phone Number Email Occupation
01 David 2221 SW 31st Street, Miami Florida, 33155 555-5633 killadave7back@gmail.com Stalker
02 Cherry 3212 Coral Street, Cleveland Ohio, 21232 443-2213 cherryJhulla@gmail.com Chef
ID Name Address Phone Number Email Occupation
01 John 4311 SW 21st Street, Miami Florida, 33144 305-2112 john_rock@gmail.com Mechanic
02 Samantha 4001 NW 63rd Street, New York NY, 774232 335-6643 smainila@gmail.com Attorney
03 Fernado 6433 NW 93rd Street, Orlando Florida, 44321 325-4883 fernadorlando@gmail.com Police Officer
04 Bill 2022 Oakland Street, Los Angelas California, 99321 699-5532 surferbill@gmail.com Doctor
05 Mary 2311 Sunbay Ave, Carlton North Carolina, 118653 966-2211 mbellagirl@gmail.com Executive Managment
06 Maria 1123 Collins Avenue, Miami Beach, 32211 305-3476 mroscha1981@gmail.com Pilot

Instructions


  1. Simply wrap your tables in a div with a unique class name. (see blue colored highlight in "HTML Code" section below)
  2. Add the path to the CSS file for mobiTable.(see velow)
  3. Add a path to the plugin and add the function call code below with the resolution width setting "mobileWidth". This is the less than or equal to tirgger to change to mobiTable. The default is 768 for mobile if you chose not to add this setting. You may change it to whatever works best.

CSS Link

<link href="css/mobiTable.css" rel="stylesheet" type="text/css"/>

HTML Code

<div class='mytable'> 

<table cellpadding='0' cellspacing='0'> 
<tbody>
<tr>
<th> Heading 1 </th>
<th> Heading 2 </th>
<th> Heading 3 </th>
</tr>
<tr>
<td> example 1 </td>
<td> example 2 </td>
<td> example 3 </td>
</tr>
</tbody>
</table>

</div>
jQuery Code

<script src='js/mobiTable.min.js'>  </script>
<script> 
  $('.mytable').mobiTable({
	mobileWidth: 768
});
  $('.mytable2').mobiTable({
	mobileWidth: 768
});
</script>

* Helpful Tips

DOWNLOAD: mobiTable.zip
Plugin Info: