jqwidgets-scripts-custom
Version:
jQWidgets is an advanced jQuery, Angular 7, Vue, React, ASP .NET MVC, Custom Elements and HTML5 UI framework.
129 lines (111 loc) • 6.91 kB
HTML
<html lang="en">
<head>
<title id='Description'>Grid Custom Element Paging</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
<meta name="description" content="This is an example of how to enable the paging in Custom Element Grid." />
<link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="../../../styles/demos.css" type="text/css" />
<script type="text/javascript" src="../../../scripts/webcomponents-lite.min.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxcore.elements.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxgrid.pager.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxgrid.sort.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxgrid.filter.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxgrid.columnsresize.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="../../../jqwidgets/jqxpanel.js"></script>
<script type="text/javascript" src="../../../scripts/demos.js"></script>
<script type='text/javascript'>
var source =
{
datatype: 'xml',
datafields: [
{ name: 'ShippedDate', map: 'm\\:properties>d\\:ShippedDate', type: 'date' },
{ name: 'Freight', map: 'm\\:properties>d\\:Freight', type: 'float' },
{ name: 'ShipName', map: 'm\\:properties>d\\:ShipName' },
{ name: 'ShipAddress', map: 'm\\:properties>d\\:ShipAddress' },
{ name: 'ShipCity', map: 'm\\:properties>d\\:ShipCity' },
{ name: 'ShipCountry', map: 'm\\:properties>d\\:ShipCountry' }
],
root: 'entry',
record: 'content',
id: 'm\\:properties>d\\:OrderID',
url: '../../sampledata/orders.xml'
};
var dataAdapter = new jqx.dataAdapter(source);
JQXElements.settings['gridSettings'] =
{
source: dataAdapter,
selectionmode: 'multiplerowsextended',
sortable: true,
pageable: true,
autoheight: true,
columnsresize: true,
columns: [
{ text: 'Ship Name', datafield: 'ShipName', width: 250 },
{ text: 'Shipped Date', datafield: 'ShippedDate', width: 230, cellsformat: 'D' },
{ text: 'Freight', datafield: 'Freight', width: 130, cellsformat: 'F2', cellsalign: 'right' },
{ text: 'Ship Address', datafield: 'ShipAddress', width: 350 },
{ text: 'Ship City', datafield: 'ShipCity', width: 100 },
{ text: 'Ship Country', datafield: 'ShipCountry', width: 101 }
]
};
window.onload = function() {
var myGrid = document.querySelector('jqx-grid');
var myPanel = document.querySelector('jqx-panel');
myGrid.addEventListener('pagechanged', function(event) {
document.getElementById('eventslog').style.display = 'block';
if (document.getElementsByClassName('logged').length >= 5) {
myPanel.clearcontent();
}
var args = event.args;
var eventData = 'pagechanged <div>Page:' + args.pagenum + ', Page Size: ' + args.pagesize + '</div>';
myPanel.prepend('<div class="logged" style="margin-top: 5px;">' + eventData + '</div>');
var paginginformation = myGrid.getpaginginformation();
document.getElementById('paginginfo').innerHTML = '<div style="margin-top: 5px;">Page:' + paginginformation.pagenum + ', Page Size: ' + paginginformation.pagesize + ', Pages Count: ' + paginginformation.pagescount + '</div>';
});
myGrid.addEventListener('pagesizechanged', function(event) {
document.getElementById('eventslog').style.display = 'block';
myPanel.clearcontent();
var args = event.args;
var eventData = 'pagesizechanged <div>Page:' + args.pagenum + ', Page Size: ' + args.pagesize + ', Old Page Size: ' + args.oldpagesize + '</div>';
myPanel.prepend('<div style="margin-top: 5px;">' + eventData + '</div>');
var paginginformation = myGrid.getpaginginformation();;
document.getElementById('paginginfo').innerHTML = '<div style="margin-top: 5px;">Page:' + paginginformation.pagenum + ', Page Size: ' + paginginformation.pagesize + ', Pages Count: ' + paginginformation.pagescount + '</div>';
});
};
</script>
<style>
jqx-panel > div {
border: none ;
}
</style>
</head>
<body>
<div class="example-description">
This example shows how to enable the paging feature of the Custom element Grid. You can define the initial page and the paging size. The paging appears at the bottom of the grid. You can go to a certain page by entering the page number and you can choose how many rows to show. The default is 5,10 or 20 rows. The pager has different modes. You can also show the pages on the left and click on a page number.
</div>
<div style="font-size: 13px; font-family: Verdana; float: left;">
<jqx-grid settings="gridSettings"></jqx-grid>
<div id='eventslog' style="display: none; margin-top: 30px;">
<div style="float: left;">
Event Log:
<jqx-panel></jqx-panel>
</div>
<div style="float: left;">
Paging Details:
<div id="paginginfo"></div>
</div>
</div>
</div>
</body>
</html>