Datasource of Datagrid can either be a javascript array or a function to load data from a remote location. In eager mode, datasource is loaded only once and in lazy mode ,invoked everytime whenever the state changes like paging or sorting. To update the datasource use $('#example').puidatatable('option', 'datasource', newdatasource).
$('#grid').puidatagrid({ datasource: [], content: function(data) {} ... });
<div id="grid"></div>
Name | Type | Default | Description |
---|---|---|---|
onLabel | string | yes | Label for the on state. |
offLabel | string | no | Label for the pff state. |
onIcon | string | null | Icon for the on state. |
offIcon | string | null | Icon for the off state. |
style | string | null | Inline style of the element. |
styleClass | string | null | Style class of the element. |
$(function() { $('#localgrid').puidatagrid({ paginator: { rows: 9 }, header: 'Local Javascript Array', datasource: [ {'brand': 'Volkswagen', 'year': 2012, 'color': 'White', 'vin': 'dsad231ff'}, {'brand': 'Audi', 'year': 2011, 'color': 'Black', 'vin': 'gwregre345'}, {'brand': 'Renault', 'year': 2005, 'color': 'Gray', 'vin': 'h354htr'}, {'brand': 'BMW', 'year': 2003, 'color': 'Blue', 'vin': 'j6w54qgh'}, {'brand': 'Ford', 'year': 1995, 'color': 'White', 'vin': 'hrtwy34'}, {'brand': 'Fiat', 'year': 2005, 'color': 'Black', 'vin': 'jejtyj'}, {'brand': 'Honda', 'year': 2012, 'color': 'Yellow', 'vin': 'g43gr'}, {'brand': 'Volvo', 'year': 2013, 'color': 'White', 'vin': 'greg34'}, {'brand': 'Ford', 'year': 2000, 'color': 'Black', 'vin': 'h54hw5'}, {'brand': 'BMW', 'year': 2013, 'color': 'Red', 'vin': '245t2s'}, {'brand': 'Jaguar', 'year': 2011, 'color': 'Blue', 'vin': 'few234'}, {'brand': 'Ford', 'year': 2010, 'color': 'White', 'vin': 'bfnt23'}, {'brand': 'BMW', 'year': 2011, 'color': 'Green', 'vin': 'aad423'}, {'brand': 'Mercedes', 'year': 2012, 'color': 'Black', 'vin': 'vx23f2'}, {'brand': 'Fiat', 'year': 2014, 'color': 'Grey', 'vin': 'vxr23fd'}, {'brand': 'Renault', 'year': 2015, 'color': 'Blue', 'vin': 'vxc23f'}, {'brand': 'Volvo', 'year': 2015, 'color': 'Yellow', 'vin': 'vxcff4'}, {'brand': 'Volvo', 'year': 2015, 'color': 'White', 'vin': 'ht3w1d'}, {'brand': 'Renault', 'year': 2013, 'color': 'Black', 'vin': 'az12s2'}, {'brand': 'Fiat', 'year': 2015, 'color': 'Green', 'vin': 'ds12d1'}, {'brand': 'Volkswagen', 'year': 2001, 'color': 'Grey', 'vin': 'vsd3f2'}, {'brand': 'Volvo', 'year': 2011, 'color': 'Blue', 'vin': 'dsy4g22'}, {'brand': 'BMW', 'year': 1996, 'color': 'Black', 'vin': 'h3g254'}, {'brand': 'Audi', 'year': 2005, 'color': 'Red', 'vin': 'g54gwg'}, {'brand': 'Ford', 'year': 2011, 'color': 'Blue', 'vin': '14ffqf4'}, {'brand': 'BMW', 'year': 2015, 'color': 'Black', 'vin': 'h465he6'}, {'brand': 'Jaguar', 'year': 2010, 'color': 'White', 'vin': 'dsf4frt'}, {'brand': 'Jaguar', 'year': 2009, 'color': 'Red', 'vin': 'g6hehr'}, ], content: function(car) { return $('<div title="'+ car.vin + '"><img src="resources/demo/images/car/' + car.brand + '.gif" /><div class="car-detail">' + car.year + ' - ' + car.color +'</div></div>').puipanel(); } }); $('#remotegrid').puidatagrid({ header: 'Remote Restful Webservice', paginator: { rows: 9 }, datasource: function(callback) { $.ajax({ type: "GET", url: 'rest/cars/list', dataType: "json", context: this, success: function(response) { callback.call(this, response); } }); }, content: function(car) { return $('<div title="'+ car.vin + '"><img src="resources/demo/images/car/' + car.brand + '.gif" /><div class="car-detail">' + car.year + ' - ' + car.color +'</div></div>').puipanel(); } }); $('#lazygrid').puidatagrid({ header: 'Remote Restful Webservice - Lazy', lazy: true, paginator: { rows: 9, totalRecords: 200 }, datasource: function(callback, ui) { var uri = 'rest/cars/lazylist/' + ui.first + '/' + 9; $.ajax({ type: "GET", url: uri, dataType: "json", context: this, success: function(response) { callback.call(this, response); } }); }, content: function(car) { return $('<div title="'+ car.vin + '"><img src="resources/demo/images/car/' + car.brand + '.gif" /><div class="car-detail">' + car.year + ' - ' + car.color +'</div></div>').puipanel(); } }); });
<div id="localgrid"></div> <div id="remotegrid"></div> <div id="lazygrid"></div>