jQuery datagridview populating

Once the grid is in place, you can populate it using the populate function inside the callback to the data grid. This function takes three arguments: metaData, data and optionally totals.

• metaData is of type DataGridViewMetaData; this type contains a normalized version of the parameters the grid needs to create sorting and paging
• data is an array of objects that have properties that match your column definitions; a row will be created for each object in the array
• totals is an object that has properties that match your column definitions; a totals row will be created if this parameter is supplied

<div id="example-table"></div>

<script type="text/javascript">
    $('#example-table').datagridview({
        columns: [
            { data: 'firstName' },
            { data: 'lastName' }
        ]
    }, function () {
        this.populate(new DataGridViewMetaData(
            'firstName', // Current sort column
            false, // Sort descending
            2, // Total number of items
            25, // Page size
            0 // Current page
        ), [
            { firstName: 'Keanu', lastName: 'Reeves' },
            { firstName: 'Laurence', lastName: 'Fishburne' }
        ]);
    });
</script>

The sortColumn parameter should match the sortData property of a column if it is present; otherwise it should match the required data property.

Please note that the meta data you pass will not be used to manipulate, sort, or slice the data in any way. For example, it is therefore possible to provide a page size smaller than the number of items in the data array and the grid view will still show all your items.

The populate function will automatically correct the paging elements and the sort display to the provided details; it is therefore perfectly possible to change all sorting and paging options (like sort column, page size and current page) when calling populate, allowing you to use external elements to determine both the data and the meta data.