jQuery Table Column Resizing Plugin colResizable.js

Add-ons

2026-07-26 04:24 6 次浏览 • 0 次下载 14.8KB

Plugin Description: The jQuery plugin colResizable is used to resize table columns. It is compatible with both mouse and touch devices and offers several useful features, such as preserving the layout after page refreshes or postbacks.

colResizable.js

Compatible with mouse and touch devices (PCs, tablets, and mobile phones)
Compatible with percentage-based and pixel-based table layouts
Resize columns without changing the overall table width (optional)
No external resources required (such as images or stylesheets)
Optional layout persistence after page refreshes or postbacks
Customizable column handles
Small footprint (colResizable 1.0 is only 2 KB)
Events

Usage Instructions

To use this plugin, once jQuery has been loaded, add a script reference to colResizable.min.js in the head section of the document. To enhance a table or a collection of tables, select it using a jQuery wrapper and apply the colResizable() method.

1 2	`<script` `src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>` `<script` `src="colResizable-1.6.js"></script>`

html

<table id="myTable" border="0" width="100%" >
    <thead>
      <tr>
        <th data-resizable-column-id="a"><input type="checkbox" /></th>
        <th data-resizable-column-id="b">Category Type </th>
        <th data-resizable-column-id="c">Activity Name </th>
        <th data-resizable-column-id="d">Status </th>
        <th data-resizable-column-id="e">Action Options</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><input type="checkbox" /></td>
        <td>Youth Diary</td>
        <td>2014 Youth Diary Writing Contest </td>
        <td>Submitted </td>
        <td>Under Review</td>
      </tr>
      <tr>
        <td><input type="checkbox" /></td>
        <td>My Child and I: Our Growing-Up Story</td>
        <td>Growing-Up Story </td>
        <td>Approved </td>
        <td>Under Review</td>
      </tr>
    </tbody>
  </table>
</div>

$(function() {
    $("table").colResizable({
        liveDrag: true, // Display the dragging position in real time
        gripInnerHtml: "<div class='grip'></div>",
        postbackSafe: true, // Preserve the previously dragged column widths after refreshing
    });
})