jQuery Responsive Table Plugin ReStable

Add-ons

2026-07-26 03:48 5 次浏览 • 0 次下载 85.9KB

Plugin Description: jQuery restable is a very simple and lightweight (\~ 1KB) jQuery plugin. At specified responsive breakpoints, it converts the table structure into an unordered list structure to make table data suitable for display on small-screen devices.

Usage

Include the followingjquery/jquery.restable.min.jsandjquery.restable.min.cssfile in the page.

<link rel="stylesheet" type="text/css" href="css/jquery.restable.min.css" />
<script type="text/javascript" src="path/to/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.restable.min.js"></script>

HTML Structure

The table uses a basic HTML table structure:

<table class="mytable">
    <thead>
        <tr>
            <td>Period</td>
            <td>Full Board</td>
            <td>Half Board</td>
            <td>Bed and Breakfast</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>01/10/12 - 02/10/12</td>
            <td>20 ?lt;/td>
            <td>30 ?lt;/td>
            <td>40 ?lt;/td>
        </tr>
        <tr>
            <td>03/10/12 - 04/10/12</td>
           <td>40 ?lt;/td>
            <td>50 ?lt;/td>
            <td>60 ?lt;/td>
        </tr>
        <tr>
            <td>05/10/12 - 06/10/12</td>
            <td>70 ?lt;/td>
            <td>80 ?lt;/td>
            <td>90 ?lt;/td>
        </tr>
    </tbody>
</table>

Initialize the Plugin

After the page DOM elements have finished loading, you can initialize this responsive table plugin using the ReStable() method.

$(document).ready(function () {
    $('.mytable').ReStable();
});

The method above initializes all tables on the page. You can also initialize a specific table individually.

$(document).ready(function () {
    $('.mytable').ReStable();
});

Configuration Parameters

The available parameters for this responsive table plugin are as follows:

$('.mytable').ReStable({
    rowHeaders: true, 
    maxWidth: 480, 
    keepHtml: false
});

rowHeaders: Whether to display the table header.
maxWidth: Responsive breakpoint.
keepHtml: Whether to preserve the HTML content of each cell.