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

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?>" />