jQuery SerializeTable Example

jQuery SerializeTable is a jquery plugin that get data from table when click in row. And make into JSON all data, and can be read by PHP and return to input or to any element by AJAX.

Click in row to view demo

Name	University	Postcode	Region
Heberti Almeida	Oxford Brookes	OX3 0BT	London
Luis Silva	Bath Spa	BA2 9BN	South West
Rafael Kowal	York College	YO23 2BB	North west
Isaque Siqueira	Oxford	OX1 2DH	London
Alex Arno	Worcester Tech	WR1 2JF	West Mids
Heber Arag�o	York College	YO23 2BB	North west

How to use it

<script src="jquery.js"></script>
<script src="jquery.serializetable.js"></script>
<script>
$(document).ready(function() {
        $("#your_table").serializeTable({
                "file": "path/to/file.php",
                "params": "parameter_name",
                "data": "#element"
        });
});
</script>

Options

file: Name of AJAX file. Defaults to empty.
params: Name of parameter to request. Defaults to params.
data: Element, ID or Class to return AJAX data. Defaults to #content.
attr: Attribute that contains the field name. Defaults to rel.
loading_text: Text displayed on loading. Defaults to empty.
loading_class: Class to personalize loading. Defaults to serializetable-ldg.

Usage

Plugin

<script>
$(document).ready(function() {
        $("#my_table").serializeTable({
                "file": "ajax.php",
                "params": "juice",
                "data": "#return"
        });
});
</script>

HTML

<table>
        <thead>
                <tr>
                        <th>Name</th>
                        <th>Color</th>
                </tr>
        </thead>
        <tbody>
                <tr>
                        <td rel="name">Heberti</td>
                        <td rel="color">Blue</td>
                </tr>
                <tr>
                        <td rel="name">Luis</td>
                        <td rel="color">Green</td>
                </tr>
        </tbody>
</table>
<div id="return"></div>

PHP REQUEST

<?php
        $json = $_REQUEST["juice"];
        $obj = json_decode($json);
?>   

<!-- Sample -->
<input type="text" value="<?php echo $obj[0]->name?>" />
<input type="text" value="<?php echo $obj[0]->color?>" />