jQWidgets Forums
jQuery UI Widgets › Forums › Grid › Grid sample for virtual scrolling loading data from JSP
Tagged: angular grid, bootstrap grid, Grid virtual scrolling large data set, javascript grid, jquery grid, jqwidgets grid, jqxgrid
This topic contains 5 replies, has 2 voices, and was last updated by Vrushali 8 years, 8 months ago.
-
Author
-
Hello,
I am working on a Grid which loads data from a very large table from database. I checked your samples for virtual mode, however, they use the generatedata function which locally creates the data for the page. I tried to write the generatedata function myself but still was getting Java heap size error. Could you please provide me a sample which has all the following features,
1. Grid – Virtual mode scrolling,
2. Dataloading – from JSP – I am not able to understand how to use LoadServerData and generatedata together. Eventhough we restrict the data to be loaded by generatedata, the LoadServerData has already tried to all records at once. Could you please let me know how to pass the startIndex and endIndex parameters to LoadServerData ? Also, how to make use of the same parameters in JSP SQL query?Thanks,
VrushaliHello Vrushali,
You could try to fallow this approach on similar way for Java:
http://www.jqwidgets.com/jqxgrid-virtual-scrolling-with-php-and-mysql/Also I would like to suggest you those topics:
http://www.jqwidgets.com/community/topic/maximum-rows-allowed-in-grid/#post-76547
http://www.jqwidgets.com/community/topic/using-virtualmode-with-loadserverdata/
Please, take a look this example.
This is on PHP but you could use same way.Important is to implement
rendergridrowswhen usevirtualmode: true,
The callback – rendergridrows is a function called when the grid is used in virtual mode.
The function should return an array of rows which will be rendered by the Grid.Best Regards,
Hristo HristovjQWidgets team
http://www.jqwidgets.comHi Hritso,
Thanks for your help. I tried the first example you have provided. However, the grid only scrolls for 3,4 times. Loads upto 17th record. The scrollbar pretty long. And it does allow to scroll below after 17th record. I am not sure what is wrong. Could you please check my code below.
——————————- JSP Page —————————————–
<!DOCTYPE HTML> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <!-- Meta, title, CSS, favicons, etc. --> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>MAPP | Data Logger Dashboard </title> <!-- Bootstrap --> <link href="KNEOLib/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"> <!-- Font Awesome --> <link href="KNEOLib/font-awesome/css/font-awesome.min.css" rel="stylesheet"> <!-- NProgress --> <link href="KNEOLib/nprogress/nprogress.css" rel="stylesheet"> <!-- Custom Theme Style --> <link href="build/css/custom.min.css" rel="stylesheet"> <link href="images/logo.ico" rel="shortcut icon" type="image/x-icon"> <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="jqwidgets/styles/jqx.classic.css" type="text/css" /> <script type="text/javascript" src="scripts/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="jqwidgets/jqxcore.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/jqxdatatable.js"></script> <script type="text/javascript" src="jqwidgets/jqxmenu.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/jqxdata.js"></script> <script type="text/javascript" src="jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="jqwidgets/jqxwindow.js"></script> <script type="text/javascript" src="jqwidgets/jqxnumberinput.js"></script> <script type="text/javascript" src="jqwidgets/jqxinput.js"></script> <script type="text/javascript" src="jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="jqwidgets/globalization/globalize.js"></script> <script type="text/javascript" src="jqwidgets/jqxcombobox.js"></script> <script type="text/javascript" src="jqwidgets/jqxsplitter.js"></script> <script type="text/javascript" src="jqwidgets/jqxexpander.js"></script> <script type="text/javascript" src="jqwidgets/jqxtabs.js"></script> <script type="text/javascript" src="jqwidgets/jqxcalendar.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.selection.js"></script> <script type="text/javascript" src="jqwidgets/jqxpanel.js"></script> <script type="text/javascript" src="jqwidgets/jqxcheckbox.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/jqxvalidator.js"></script> <script type="text/javascript" src="jqwidgets/jqxdata.export.js"></script> <script type="text/javascript" src="jqwidgets/jqxgrid.export.js"></script> <script type="text/javascript" src="jqwidgets/jqxgrid.aggregates.js"></script> <script type="text/javascript" src="jqwidgets/jqxgrid.grouping.js"></script> <script type="text/javascript" src="scripts/demos.js"></script> <script type="text/javascript"> $(document).ready(function() { var customFilterWhere; customFilterWhere = ""; //----------------RAW Data Grid -----------------------------------// var source_Raw_Data = { datatype: "json", datafields: [ { name: 'TRACE_DATE', type: 'date' }, { name: 'PLC_NAME', type: 'string' }, { name: 'CODE', type: 'string' }, { name: 'MESSAGE', type: 'string' }, { name: 'RISE', type: 'date' }, { name: 'FALL', type: 'date' }, { name: 'DOWNTIME', type: 'string' }], id: 'Id_Raw_Data', cache: false, url: 'MaintJsps/populateRawData.jsp', sortcolumn: 'TRACE_DATE', sortdirection: 'asc' }; var dataAdapter_Raw_Data = new $.jqx.dataAdapter(source_Raw_Data,{ beforeprocessing: function (data) { source_Raw_Data.totalrecords = data[0].TotalRows; console.log("Total:"+source_Raw_Data.totalrecords); }, formatData: function (data) { data.customFilter = customFilterWhere; return data; }, }); $("#RawData").jqxGrid({ width: 1000, source: dataAdapter_Raw_Data, filterable: true, sortable: true, virtualmode: true, rendergridrows: function(obj) { return obj.data; }, showstatusbar: true, statusbarheight: 25, showaggregates: true, columns: [ { text: 'Trace Date', datafield: 'TRACE_DATE', width: 100, cellsformat: 'dd-MM-yyyy'}, { text: 'Machine', datafield: 'PLC_NAME', width: 140 }, { text: 'Event Code', datafield: 'CODE', width: 90, cellsformat: 'F2', cellsalign: 'center' }, { text: 'Event Massage', datafield: 'MESSAGE', width: 350 }, { text: 'Rise Time', datafield: 'RISE', width: 100, cellsformat: 'T'}, { text: 'Fall Time', datafield: 'FALL', width: 100, cellsformat: 'T'}, { text: 'Duration(Sec.)', datafield: 'DOWNTIME', width: 120, cellsformat: 'F2', cellsalign: 'center'} ], }); // ------------------------- RAW Data Grid End ------------------------- }); </script> </head> <body class="nav-md"> <jsp:include page="TemplateNavBar.jspf"/> <!-- page content Start --> <div class="right_col" role="main"> <div id="RawData"></div> </div> <!-- page Content End --> <!-- footer content --> <footer> <div class="pull-right">TESTING</div> <div class="clearfix"></div> </footer> <!-- /footer content --> <!-- Custom Theme Scripts --> <script src="build/js/custom.min.js"></script> </body> </html>——————————- Data Loading JSP ————————————-
<%@ page import="java.sql.*"%> <%@ page import="com.google.gson.*"%> <%@ page import="global.dbconnect.*"%> <% String where = ""; String customFilter = request.getParameter("customFilter"); if(customFilter == null) customFilter = "" ; String sort = request.getParameter("$orderby"); if(sort == null) sort= " TRACE_DATE " ; String filterscount = request.getParameter("filterscount"); if(filterscount == null) filterscount= "0" ; if (Integer.parseInt(filterscount) > 0) { where = request.getParameter("where"); if(where == null) where = "" ; } if (where.equals("") && !customFilter.equals("")) where = " Where " + customFilter; else if (!where.equals("") && !customFilter.equals("")) where = where + " AND " + customFilter; System.out.println("Custom Filter:"+customFilter); String recordstartindex = request.getParameter("recordstartindex"); if(recordstartindex == null) recordstartindex = "0" ; String recordendindex = request.getParameter("recordendindex"); if(recordendindex == null) recordendindex= "16" ; int rows = Integer.parseInt(recordendindex) - Integer.parseInt(recordstartindex) ; String limitStr = ""; if (rows > 0) limitStr = " LIMIT " + recordstartindex + "," + String.valueOf(rows); DBConnection dbConnection = new DBConnection(); ResultSet totalPLC_ALARMList; totalPLC_ALARMList = dbConnection.exeQuery("SELECT COUNT(*) AS Count FROM plc_alarm " + where); String totalRecords = ""; while (totalPLC_ALARMList.next()) { totalRecords = totalPLC_ALARMList.getString("Count"); } totalPLC_ALARMList.close(); String sql = "select TRACE_DATE , PLC_NAME , CODE, MESSAGE , RISE , FALL ,DOWNTIME from PLC_ALARM " + where + " ORDER BY " + sort + limitStr; System.out.println(sql); ResultSet plcalarmlist = dbConnection.exeQuery(sql); boolean totalRecordsAdded = false; JsonArray recordsArray = new JsonArray(); while (plcalarmlist.next()) { JsonObject currentRecord = new JsonObject(); currentRecord.add("TRACE_DATE",new JsonPrimitive(plcalarmlist.getString("TRACE_DATE"))); currentRecord.add("PLC_NAME",new JsonPrimitive(plcalarmlist.getString("PLC_NAME"))); currentRecord.add("CODE",new JsonPrimitive(plcalarmlist.getString("CODE"))); currentRecord.add("MESSAGE",new JsonPrimitive(plcalarmlist.getString("MESSAGE"))); currentRecord.add("RISE",new JsonPrimitive(plcalarmlist.getString("RISE"))); currentRecord.add("FALL",new JsonPrimitive(plcalarmlist.getString("FALL"))); currentRecord.add("DOWNTIME",new JsonPrimitive(plcalarmlist.getString("DOWNTIME"))); if (totalRecordsAdded == false) { currentRecord.add("totalRecords", new JsonPrimitive( totalRecords)); totalRecordsAdded = true; } recordsArray.add(currentRecord); } out.print(recordsArray); out.flush(); dbConnection.closeConection(); %>Sorry. I meant it DOES NOT ALLOW to scroll beyond 17th record.
Hello Vrushali,
This is big code and we do not have practice to check huge data.
On first look there is nothing strange.
You should check what exactly is obj.data in your code.
Also looks like you settotalrecordson 17.
I would like to ask you for any error messages in the console?
Maybe you know Virtual Scrolling demo, but could be helpful.Best Regards,
Hristo HristovjQWidgets team
http://www.jqwidgets.comHi Hristo,
I finally got it working. I needed to change the rendergridrows function like this,
`rendergridrows: function(obj) {
var records = obj.data;;
dataAdapter_Raw_Data.loadjson(null, records, source_Raw_Data);
return obj.data;
}`I am putting up the shortened code here.
var source_Raw_Data = { datatype: "json", datafields: [ { name: 'TRACE_DATE', type: 'date' }, { name: 'PLC_NAME', type: 'string' }, { name: 'CODE', type: 'string' }, { name: 'MESSAGE', type: 'string' }, { name: 'RISE', type: 'date' }, { name: 'FALL', type: 'date' }, { name: 'DOWNTIME', type: 'string' }], id: 'Id_Raw_Data', cache: false, url: 'MaintJsps/populateRawData.jsp', beforeprocessing: function (data) { source_Raw_Data.totalrecords = data[0].totalRecords; console.log("Total:"+source_Raw_Data.totalrecords); } }; var dataAdapter_Raw_Data = new $.jqx.dataAdapter(source_Raw_Data); $("#RawData").jqxGrid({ width: 1000, source: dataAdapter_Raw_Data, virtualmode: true, rendergridrows: function(obj) { var records = obj.data;; dataAdapter_Raw_Data.loadjson(null, records, source_Raw_Data); return obj.data; }, columns: [ { text: 'Trace Date', datafield: 'TRACE_DATE', width: 100, cellsformat: 'dd-MM-yyyy'}, { text: 'Machine', datafield: 'PLC_NAME', width: 140 }, { text: 'Event Code', datafield: 'CODE', width: 90, cellsformat: 'F2', cellsalign: 'center' }, { text: 'Event Massage', datafield: 'MESSAGE', width: 350 }, { text: 'Rise Time', datafield: 'RISE', width: 100, cellsformat: 'T'}, { text: 'Fall Time', datafield: 'FALL', width: 100, cellsformat: 'T'}, { text: 'Duration(Sec.)', datafield: 'DOWNTIME', width: 120, cellsformat: 'F2', cellsalign: 'center'} ], });JSP Page
String recordstartindex = request.getParameter("recordstartindex"); if(recordstartindex == null) recordstartindex = "0" ; String recordendindex = request.getParameter("recordendindex"); if(recordendindex == null) recordendindex= "16" ; int rows = Integer.parseInt(recordendindex) - Integer.parseInt(recordstartindex) ; String limitStr = ""; if (rows > 0) limitStr = " LIMIT " + recordstartindex + "," + String.valueOf(rows); DBConnection dbConnection = new DBConnection(); ResultSet totalPLC_ALARMList; totalPLC_ALARMList = dbConnection.exeQuery("SELECT COUNT(*) AS Count FROM plc_alarm "); String totalRecords = ""; while (totalPLC_ALARMList.next()) { totalRecords = totalPLC_ALARMList.getString("Count"); } totalPLC_ALARMList.close(); String sql = "select TRACE_DATE , PLC_NAME , CODE, MESSAGE , RISE , FALL ,DOWNTIME from PLC_ALARM " + " ORDER BY " + sort + limitStr; System.out.println(sql); ResultSet plcalarmlist = dbConnection.exeQuery(sql); boolean totalRecordsAdded = false; JsonArray recordsArray = new JsonArray(); while (plcalarmlist.next()) { JsonObject currentRecord = new JsonObject(); currentRecord.add("TRACE_DATE",new JsonPrimitive(plcalarmlist.getString("TRACE_DATE"))); currentRecord.add("PLC_NAME",new JsonPrimitive(plcalarmlist.getString("PLC_NAME"))); currentRecord.add("CODE",new JsonPrimitive(plcalarmlist.getString("CODE"))); currentRecord.add("MESSAGE",new JsonPrimitive(plcalarmlist.getString("MESSAGE"))); currentRecord.add("RISE",new JsonPrimitive(plcalarmlist.getString("RISE"))); currentRecord.add("FALL",new JsonPrimitive(plcalarmlist.getString("FALL"))); currentRecord.add("DOWNTIME",new JsonPrimitive(plcalarmlist.getString("DOWNTIME"))); if (totalRecordsAdded == false) { currentRecord.add("totalRecords", new JsonPrimitive( totalRecords)); totalRecordsAdded = true; } recordsArray.add(currentRecord); } -
AuthorPosts
You must be logged in to reply to this topic.