Fetching more info using the row index

Hi everyone,

Last time i could fix the problem "DataTables server-side processing:DataTable warning:JSON data from server could not be parsed" in this post... http://datatables.net/forums/discussion/comment/45330#Comment_45330. With the help of Allan. Thanks again Allan.


Now as the datatable is setup and working fine , i now need to find how to fetch more info from the database based on the selected row using the row's index.

$sIndexColumn = "Contact_ID"; this is the primary key/index in my database.

The image explain partly .. http://pms.leadsys.co/Untitled%2066.jpg

When you click on particular row it will show more info about that row.



This is the script i have used as shown in the image, which jst shows the static info.

<script>
 $(document).ready(function () {
            $('#sorting-advanced').dataTable({
                "bProcessing": true,
                "bServerSide": true,
                "sAjaxSource": "./js/libs/DataTables/datatable.php"
            }).on('click', 'tbody td', function (event) {
                // Do not process if something else has been clicked
                if (event.target !== this) {
                    return;
                }

                var tr = $(this).parent(),
                    row = tr.next('.row-drop'),
                    rows;

                // If click on a special row
                if (tr.hasClass('row-drop')) {
                    return;
                }

                // If there is already a special row
                if (row.length > 0) {
                    // Un-style row
                    tr.children().removeClass('anthracite-gradient glossy');

                    // Remove row
                    row.remove();

                    return;
                }

                // Remove existing special rows
                rows = tr.siblings('.row-drop');
                if (rows.length > 0) {
                    // Un-style previous rows
                    rows.prev().children().removeClass('anthracite-gradient glossy');

                    // Remove rows
                    rows.remove();
                }

                // Style row
                tr.children().addClass('anthracite-gradient glossy');

                // Add fake row
                $('<tr class="row-drop">' +
                    '<td colspan="' + tr.children().length + '">' +
                        '<div class="float-right">' +
                            '<button type="submit" class="button glossy mid-margin-right">' +
                                '<span class="button-icon"><span class="icon-mail"></span></span>' +
                                'Send mail' +
                            '</button>' +
                            '<button type="submit" class="button glossy">' +
                                '<span class="button-icon red-gradient"><span class="icon-cross"></span></span>' +
                                'Remove' +
                            '</button>' +
                        '</div>' +
                        '<strong>Name:</strong> John Doe<br>' +
                        '<strong>Account:</strong> admin<br>' +
                        '<strong>Last connect:</strong> 05-07-2011<br>' +
                        '<strong>Email:</strong> john@doe.com' +
                    '</td>' +
                '</tr>').insertAfter(tr);

            });
        });
    </script>

How can i get the data dynamically. Please help.