jQuery Grid with Salesforce Ajax Toolkit

jQueryGridDemo.html

<apex:page title="jQuery Grid Demo">
    
    <!-- Get the session for connection.js -->
    <script type="text/javascript">
        var __sfdcSessionId = '{!GETSESSIONID()}';
    </script>
    
    <!-- jQueryUI Theme -->
    <link rel="stylesheet" href="{!URLFOR($Resource.jQueryGridPre19, '/jquery-jquery-ui-b5c4529/themes/base/jquery.ui.all.css')}"/>
    
    <!-- Script references -->
    <apex:includeScript value="{!URLFOR($Resource.jQueryGridPre19, '/jquery-jquery-ui-b5c4529/jquery-1.5.1.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.jQueryGridPre19, '/jquery-jquery-ui-b5c4529/external/jquery.tmpl.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.jQueryGridPre19, '/jquery-jquery-ui-b5c4529/external/jquery.mousewheel-3.0.4.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.jQueryGridPre19, '/jquery-jquery-ui-b5c4529/ui/jquery.ui.core.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.jQueryGridPre19, '/jquery-jquery-ui-b5c4529/ui/jquery.ui.widget.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.jQueryGridPre19, '/jquery-jquery-ui-b5c4529/ui/jquery.ui.mouse.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.jQueryGridPre19, '/jquery-jquery-ui-b5c4529/ui/jquery.ui.button.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.jQueryGridPre19, '/jquery-jquery-ui-b5c4529/ui/jquery.ui.selectable.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.jQueryGridPre19, '/jquery-jquery-ui-b5c4529/ui/jquery.ui.spinner.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.jQueryGridPre19, '/jquery-jquery-ui-b5c4529/grid-spf/datasource.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.jQueryGridPre19, '/jquery-jquery-ui-b5c4529/grid-spf/datasource-local.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.jQueryGridPre19, '/jquery-jquery-ui-b5c4529/grid-spf/grid.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.jQueryGridPre19, '/jquery-jquery-ui-b5c4529/grid-spf/pager.js')}"/>
    <script src="../../soap/ajax/22.0/connection.js" type="text/javascript"/>

    <!-- javascript to setup jQuery Grid -->
    <script type="text/javascript">

    var grid, gridDataSource;     
    
    $(function() {
    
        // Create the datasource for grid
        gridDataSource = $.ui.datasource({
            paging: {
                limit: 10
            },
            source: function( request, response ) {
            
                sforce.connection.query("Select Id, FirstName, LastName, Email, LastLoginDate, LAN_ID__c From User Where Profile.Name = 'CIGNA Sys Admin' Order By LastModifiedDate Desc Limit 50", 
                {
                    onSuccess: function (queryResult, source) {
                        var result = queryResult.getArray('records');
                        var count = result.length;
                        // Poor mans paging...
                        var offset = request.paging.limit * (request.page - 1);
                        result = result.slice(offset , offset  + request.paging.limit);
                        response(result, count);
                    },
                    onFailure: function (error) {
                        alert(error);
                    }
                });
            }
        });

        // Setup the grid widget
        grid = $( "#developers-local" ).grid({
            source: gridDataSource,
            refresh: function() {
                $( this ).find( "tbody tr" ).addClass( function() {
                    if ( $( this ).tmplItem().data.selected ) {
                        return "ui-selected";
                    }
                });

            }
        });
        
        // Make the grid selectable
        $( "#developers-local" ).selectable({
            filter: "tr",
            stop: function() {
                $( this ).find( "tbody tr" ).each( function() {
                    $( this ).tmplItem().data.selected = $( this ).is(".ui-selected");
                });
            }
        });
        
        // Setup the pager widget
        $( "#pageDevelopers" ).pager({
            source: gridDataSource
        });
        
        // Bind the grid
        gridDataSource.refresh();
    });
    </script>

    <!-- Stylesheets for Grid -->
    <style>
    table.developerGrid {
        border-collapse: collapse;
        font-size: 90%;
    }
    table.developerGrid th, table.developerGrid td {
        padding: 0.5em;
        border: 1px solid black;
    }
    .ui-selecting td { 
        background: #eef; 
    }
    .ui-selected td { 
        background: #ddf;
    }
    </style>

    <!-- Page title -->
    <h1>jQuery UI Grid (pre 1.9)</h1>
    <br/>&nbsp;-<a href="https://github.com/jquery/jquery-ui/tree/grid">Github Branch</a>
    <br/>&nbsp;-<a href="http://wiki.jqueryui.com/w/page/34246941/Grid">Grid Planning Wiki</a>    

    <!-- jQuery Pager -->
    <p id="pageDevelopers">
        <button data-page="first">First</button>
        <button data-page="prev">Prev</button>
        <button data-page="prevStep">-1</button>
        <span>
            Page <input class="current" size="4"/>/<span class="total">0</span>,
            Total records <span class="totalRecords">0</span>
        </span>
        <button data-page="nextStep">+1</button>
        <button data-page="next">Next</button>
        <button data-page="last">Last</button>
    </p>
    
    <!-- jQuery Grid -->
    <table id="developers-local" class="developerGrid">
        <thead>
            <tr>
                <th data-field="FirstName">First Name</th>
                <th data-field="LastName">Last Name</th>
                <th data-field="Email">Email</th>
                <th data-field="LAN_ID__c">LAN ID</th>
                <th data-field="LastLoginDate">Last Login</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>

</apex:page>