tui-grid
Version:
TOAST UI Grid : Powerful data grid control supported by TOAST UI
95 lines (88 loc) • 3.04 kB
HTML
<html lang="ko">
<head>
<meta charset="utf-8">
<title>10. Binding to remote data using net</title>
<link rel="stylesheet" type="text/css" href="./css/tui-example-style.css" />
<link rel="stylesheet" type="text/css" href="../dist/tui-grid.css" />
<link rel="stylesheet" type="text/css" href="https://uicdn.toast.com/tui.pagination/v3.3.0/tui-pagination.css" />
</head>
<body>
<div class="description">
You can see the tutorial <a href="https://github.com/nhnent/tui.grid/blob/master/docs/binding-to-remote-data.md" target="_blank">here</a>.
</div>
<div class="code-html contents">
<div id="grid"></div>
</div>
</body>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mockjax/1.6.2/jquery.mockjax.min.js"></script>
<script type="text/javascript" src="https://uicdn.toast.com/tui.code-snippet/v1.5.0/tui-code-snippet.js"></script>
<script type="text/javascript" src="https://uicdn.toast.com/tui.pagination/v3.3.0/tui-pagination.js"></script>
<script type="text/javascript" src="../dist/tui-grid.js"></script>
<script type="text/javascript" src="./data/basic-dummy.js"></script>
<script type="text/javascript">
$.mockjax({
url: 'api/readData',
responseTime: 0,
response: function(settings) {
var page = settings.data.page;
var perPage = settings.data.perPage;
var start = (page - 1) * perPage;
var end = start + perPage;
var data = gridData.slice(start, end);
this.responseText = JSON.stringify({
result: true,
data: {
contents: data,
pagination: {
page: page,
totalCount: 20
}
}
});
}
});
</script>
<script type="text/javascript" class="code-js">
var grid = new tui.Grid({
el: $('#grid'),
scrollX: false,
scrollY: false,
minBodyHeight: 30,
rowHeaders: ['rowNum'],
pagination: true,
columns: [
{
title: 'Name',
name: 'name'
},
{
title: 'Artist',
name: 'artist'
},
{
title: 'Type',
name: 'type'
},
{
title: 'Release',
name: 'release'
},
{
title: 'Genre',
name: 'genre'
}
]
});
grid.use('Net', {
perPage: 3,
readDataMethod: 'GET',
api: {
readData: 'api/readData'
}
});
</script>
</html>