grid-5.html

<div class="content">
    <div id="example_title">
        <h1>Load Data Once</h1>
        If you define the url property, then each type a new page is opened it will submit a request to the server for the new portion 
        of the data. However, if you use the load() method, it will load data from the URL, but only once. The grid will think it has local
        data source and will not send any more server side requests.
    </div>
    <div id="example_view"></div>
    <div id="example_code"></div>
</div>

<!--CODE-->
<div id="grid" style="width: 100%; height: 350px; overflow: hidden;"></div>

<!--CODE-->
<script>
$(function () {
    $('#grid').w2grid({ 
        name: 'grid', 
        columns: [                
            { field: 'lname', caption: 'Last Name', size: '30%', sortable: true },
            { field: 'fname', caption: 'First Name', size: '30%', sortable: true },
            { field: 'email', caption: 'Email', size: '40%', sortable: true },
            { field: 'sdate', caption: 'Start Date', size: '120px', sortable: true },
        ]
    });    
    w2ui['grid'].load('data/list.json');
});
</script>

<!--CODE-->

<!--CODE-->
<script type="text/json">
{
    "total": 9,
    "records": [
        { "recid": 1, "fname": "John", "lname": "Doe", "email": "jdoe@gmail.com", "sdate": "4/3/2012" },
        { "recid": 2, "fname": "Stuart", "lname": "Motzart", "email": "jdoe@gmail.com", "sdate": "4/3/2012" },
        { "recid": 3, "fname": "Jin", "lname": "Franson", "email": "jdoe@gmail.com", "sdate": "4/3/2012" },
        { "recid": 4, "fname": "Susan", "lname": "Ottie", "email": "jdoe@gmail.com", "sdate": "4/3/2012" },
        { "recid": 5, "fname": "Kelly", "lname": "Silver", "email": "jdoe@gmail.com", "sdate": "4/3/2012" },
        { "recid": 6, "fname": "Francis", "lname": "Gatos", "email": "jdoe@gmail.com", "sdate": "4/3/2012" },
        { "recid": 7, "fname": "Mark", "lname": "Welldo", "email": "jdoe@gmail.com", "sdate": "4/3/2012" },
        { "recid": 8, "fname": "Thomas", "lname": "Bahh", "email": "jdoe@gmail.com", "sdate": "4/3/2012" },
        { "recid": 9, "fname": "Sergei", "lname": "Rachmaninov", "email": "jdoe@gmail.com", "sdate": "4/3/2012" }
    ]
}
</script>