Page in Table Format Using Remote Action

<apex:page controller="JQGridDemoController" sidebar="false" showHeader="false">
    <apex:stylesheet value="{!URLFOR($Resource.JQWidget, '/jqwidgets/styles/jqx.base.css')}"/>
    <apex:includeScript value="{!URLFOR($Resource.JQWidget, '/scripts/jquery-1.11.1.min.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.JQWidget, '/jqwidgets/jqxcore.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.JQWidget, '/jqwidgets/jqxdata.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.JQWidget, '/jqwidgets/jqxbuttons.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.JQWidget, '/jqwidgets/jqxscrollbar.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.JQWidget, '/jqwidgets/jqxmenu.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.JQWidget, '/jqwidgets/jqxcheckbox.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.JQWidget, '/jqwidgets/jqxlistbox.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.JQWidget, '/jqwidgets/jqxdropdownlist.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.JQWidget, '/jqwidgets/jqxgrid.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.JQWidget, '/jqwidgets/jqxgrid.sort.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.JQWidget, '/jqwidgets/jqxgrid.pager.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.JQWidget, '/jqwidgets/jqxgrid.selection.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.JQWidget, '/jqwidgets/jqxgrid.edit.js')}"/>
    <script type="text/javascript">
        $(document).ready(function () {
            var tableData;
            // prepare the data
            var source =
            {
                datafields: [
                    { name: 'contactName', type: 'string' },
                    { name: 'accountName', type: 'string' },
                    { name: 'createdDate', type: 'string' },
                    { name: 'mobilePhone', type: 'string' },
                    { name: 'email', type: 'string' },
                    { name: 'phone', type: 'string' },
                    { name: 'ContId', type: 'string' }
                ],
                localdata: tableData,
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            // initialize jqxGrid
            $("#jqxgrid").jqxGrid(
            {
                width: 1200,
                source: dataAdapter,
                pageable: true,
                autoheight: true,
                sortable: true,
                altrows: true,
                enabletooltips: true,
                editable: true,
                selectionmode: 'multiplecellsadvanced',
                columns: [
                  { text: 'Contact Name', datafield: 'contactName', width: 200 },
                  { text: 'Account Name', datafield: 'accountName', width: 200 },
                  { text: 'Created Date', datafield: 'createdDate', width: 200 },
                  { text: 'Mobile Phone', datafield: 'mobilePhone', width: 100, cellsalign: 'right' },
                  { text: 'Email', datafield: 'email', width: 200, cellsalign: 'right', },
                  { text: 'Phone', datafield: 'phone', cellsalign: 'right', width: 100},
                  { text: 'Id', datafield:'ContId', cellsalign: 'right', width: 200 }
                ],
            });
            Visualforce.remoting.Manager.invokeAction(
                    '{!$RemoteAction.JQGridDemoController.getData}',
                function(result, event) {
                    source.localdata = result;
                    // passing "cells" to the 'updatebounddata' method will refresh only the cells values when the new rows count is equal to the previous rows count.
                    $("#jqxgrid").jqxGrid('updatebounddata', 'cells');
                });
        });
    </script>
<div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
<div id="jqxgrid"></div>
</div>
</apex:page>
-------------------------------------------------------------------------------------------------------

Public class JQGridDemoController {

    Public JQGridDemoController() {}

    @RemoteAction
    public static List<WrapperClass> getData() {
        List<WrapperClass> lstWrapperClass = new List<WrapperClass>();
        for(Contact xContact : [select id, Name, Account.Name, CreatedDate, MobilePhone, Email, Phone from Contact]) {
            WrapperClass wrapperobj = new WrapperClass();
            wrapperobj.contactName = xContact.Name;
            wrapperobj.accountName = xContact.Account.Name;
            wrapperobj.createdDate = String.valueOf(xContact.CreatedDate);
            wrapperobj.mobilePhone = xContact.MobilePhone;
            wrapperobj.email = xContact.Email;
            wrapperobj.phone = xContact.Phone;
            wrapperobj.ContId = xContact.Id;
            lstWrapperClass.add(wrapperobj);
        }
        return lstWrapperClass;
    }

    Public class WrapperClass {
        Public String contactName;
        Public String accountName;
        Public String createdDate;
        Public String mobilePhone;
        Public String email;
        Public String phone;
        Public String ContId;
    }
}