jqxGrid uses a virtualized paging which enables you to handle very large data sets without any impact on client side performance.
A live JavaScript/jQuery example of jqxGrid, the jQWidgets Grid component, with its complete source code below. It is one of 139 jqxGrid demos for jQuery.
autoheight property – Sets or gets the height of the grid to be equal to the summary height of the grid rows.width property – Sets or gets the Grid's width.columns property – Sets the Grid columns.pageable property – Enables or disables the Grid Paging feature.rendergridrows property – This is a function called when the grid is used in virtual mode.source property – Sets and gets the source.virtualmode property – Enables or disables the virtual data mode.To run it in your own page, load jqx.base.css, a theme and the library files below from npm (npm install jqwidgets-scripts) or the jsDelivr CDN, then add the markup and the script. jQuery is not required: jqxcore.js provides $. Getting started with jqxGrid shows the setup step by step.
The page loads jqx.base.css, a theme and these library files: jqxcore.js, jqxdata.js, jqxbuttons.js, jqxscrollbar.js, jqxmenu.js, jqxlistbox.js, jqxdropdownlist.js, jqxgrid.js, jqxgrid.pager.js, jqxgrid.selection.js.
It also loads helper scripts of this demo site, which are not part of the library: demos.js (getWidth() and other layout helpers).
$(document).ready(function () {
// prepare the data
var data = new Array();
var firstNames =
[
"Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"
];
var lastNames =
[
"Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"
];
var productNames =
[
"Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"
];
var priceValues =
[
"2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"
];
// generate sample data.
var generatedata = function (startindex, endindex) {
var data = {};
for (var i = startindex; i < endindex; i++) {
var row = {};
var productindex = Math.floor(Math.random() * productNames.length);
var price = parseFloat(priceValues[productindex]);
var quantity = 1 + Math.round(Math.random() * 10);
row["id"] = i;
row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
row["productname"] = productNames[productindex];
row["price"] = price;
row["quantity"] = quantity;
row["total"] = price * quantity;
data[i] = row;
}
return data;
}
var source =
{
datatype: "array",
localdata: {},
totalrecords: 1000000
};
// load virtual data.
var rendergridrows = function (params) {
var data = generatedata(params.startindex, params.endindex);
return data;
}
var totalcolumnrenderer = function (row, column, cellvalue) {
var cellvalue = $.jqx.dataFormat.formatnumber(cellvalue, 'c2');
return '<span style="margin: 6px 3px; font-size: 12px; float: right; font-weight: bold;">' + cellvalue + '</span>';
}
var dataAdapter = new $.jqx.dataAdapter(source);
$("#grid").jqxGrid(
{
width: getWidth('Grid'),
autoheight: true,
source: dataAdapter,
virtualmode: true,
pageable: true,
rendergridrows: rendergridrows,
columns: [
{ text: 'Id', datafield: 'id', width: 50 },
{ text: 'First Name', datafield: 'firstname', width: 120 },
{ text: 'Last Name', datafield: 'lastname', width: 120 },
{ text: 'Product', datafield: 'productname', width: 180 },
{ text: 'Quantity', datafield: 'quantity', width: 100, cellsalign: 'right' },
{ text: 'Unit Price', datafield: 'price', width: 100, cellsalign: 'right', cellsformat: 'c2' },
{ text: 'Total', datafield: 'total', cellsrenderer: totalcolumnrenderer, cellsalign: 'right' }
]
});
});<div id="grid"></div>