Meteora.demo
Instructions:
Click the datagrid header names to sort. Double click the datagrid's input to edit
HTML source
<form action="/demo/ajax_post" method="post">
<div id="datagrid-demo-div"></div>
<div class="buttons">
<button type="button" onclick="$('datagrid_demo_div').control.reset()">Reset</button>
<button type="submit">Submit</button>
</div>
</form>
<div id="datagrid-demo-div"></div>
<div class="buttons">
<button type="button" onclick="$('datagrid_demo_div').control.reset()">Reset</button>
<button type="submit">Submit</button>
</div>
</form>
Javascript source
Meteora.uses('Meteora.Datagrid');
Meteora.onStart(
function () {
new Datagrid(
'datagrid-demo-div',
// the line below is the URL of the
// script that will feed the datagrid
// with JSON.
'/demo/ajax_datagrid'
);
}
);
Meteora.onStart(
function () {
new Datagrid(
'datagrid-demo-div',
// the line below is the URL of the
// script that will feed the datagrid
// with JSON.
'/demo/ajax_datagrid'
);
}
);
JSON response
[
{'id': 'ID', 'birthDate': 'Birth Date', 'name': 'Name', 'telephone': 'Telephone'},
{'id': 1, 'birthDate': '1974-05-02', 'name': 'Maria Juarez', 'telephone': '99826542'},
{'id': 2, 'birthDate': '1999-12-11', 'name': 'Joe Cool', 'telephone': '76458879'},
{'id': 3, 'birthDate': '1990-10-14', 'name': 'Igov Ivanov', 'telephone': '18576243'},
{'id': 4, 'birthDate': '1983-03-02', 'name': 'Tang lee', 'telephone': '93750183'},
{'id': 5, 'birthDate': '1980-02-02', 'name': 'Adamo Romo', 'telephone': '67838172'},
{'id': 6, 'birthDate': '1999-12-24', 'name': 'Gina Piccoli', 'telephone': '29958281'}
]
{'id': 'ID', 'birthDate': 'Birth Date', 'name': 'Name', 'telephone': 'Telephone'},
{'id': 1, 'birthDate': '1974-05-02', 'name': 'Maria Juarez', 'telephone': '99826542'},
{'id': 2, 'birthDate': '1999-12-11', 'name': 'Joe Cool', 'telephone': '76458879'},
{'id': 3, 'birthDate': '1990-10-14', 'name': 'Igov Ivanov', 'telephone': '18576243'},
{'id': 4, 'birthDate': '1983-03-02', 'name': 'Tang lee', 'telephone': '93750183'},
{'id': 5, 'birthDate': '1980-02-02', 'name': 'Adamo Romo', 'telephone': '67838172'},
{'id': 6, 'birthDate': '1999-12-24', 'name': 'Gina Piccoli', 'telephone': '29958281'}
]