jQuery datagridview basic setup - maikelbos0/VDT GitHub Wiki

Include the following script files and the style sheets in your page(s). The style sheet jquery-datagridview.style.css is optional and provides basic styling; skip this or use it as a template if you want to provide your own styling. If you have installed the NuGet package you should find the script files in the Scripts folder and the style sheet in the Content folder.

<link rel="stylesheet" href="Content/jquery-datagridview.min.css" />
<link rel="stylesheet" href="Content/jquery-datagridview.style.min.css" />
<script type="text/javascript" src="Scripts/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="Scripts/jquery-datagridview.min.js"></script>

The plugin creates an in-place grid view on any element of your choosing by calling the datagridview function on the jQuery object. It supports creating multiple gridviews at the same time for a jQuery object containing more than one element.

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

<script type="text/javascript">
    $('#example-table').datagridview({
        columns: [
            { data: 'firstName' },
            { data: 'lastName' }
        ]
    });
</script>

Please note that creating the grid view is a separate step from populating it. After creating it you need to call the populate function in a callback. For a full explanation on populating, see populating. This callback can also be passed as the second parameter when creating a datagridview; see manipulating the datagridview after creating for more information.

<script type="text/javascript">
    $('#example-table').datagridview(function () {
        this.populate(new DataGridViewMetaData(null, false, 2, 25, 0), [
            { firstName: 'Keanu', lastName: 'Reeves' },
            { firstName: 'Laurence', lastName: 'Fishburne' }
        ]);
    });
</script>