// Server-side processing with object sourced data

$(document).ready(function() {

    var table = $('#example').DataTable( {

        "processing": true,

        "serverSide": true,

        "ajax": "/ssp/objects.php",

        "columns": [

            { "data": "first_name", className:"details" },

            { "data": "last_name" },

            { "data": "position" },

            { "data": "office" },

            { "data": "start_date" },

            { "data": "salary" }

        ]

    } );

    $(document).on('mouseover', 'tbody .details', function (event) {

        var me = this;

        var rowData = table.row(this).data();

        // qtip ajax has been depricated so doing the ajax externally.

        $.ajax({

            url: "/ssp/objects.php",

            contentType: "application/json; charset=utf-8",

            data: JSON.stringify({ employeeId: rowData.employeeId }),

            type: "post",

            success: function (response) {

              // Loop through tht response to get the correct record

              // This is for the test case only.  it is epxected

              // that the reposnse contain the single user's record

              var data = JSON.parse(response).data;

              for (i=0; i<data.length; i++) {

                if (data[i].first_name === rowData.first_name) {

                  myRecord = data[i];

                }

              }

                $(me).qtip({

                    overwrite: true, // Make sure the tooltip won't be overridden once created

                    content: myRecord.first_name,

                    show: {

                        event: event.type, // Use the same show event as the one that triggered the event handler

                        ready: true // Show the tooltip as soon as it's bound, vital so it shows up the first time you hover!

                    }

                }, event); // Pass through our original event to qTip

            }

        });

    });

} );