Shulou(Shulou.com)06/01 Report--

This article mainly introduces how to use DataGear to make server-side paged data visualization charts, with a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to know about it.

First, create two new SQL datasets.

The first dataset queries server-side paging data, which is a parameterized dataset:

Name: server paging-data SQL:select * from t_analysisorder by NAME asclimit ${index}, ${size} Parameter: name type required description index value is page index size value is page size

The total number of records queried for the second dataset:

Name: server page-total number of records SQL:select count (*) as total from t_analysis parameter: none

Then, create a new chart and associate the above two datasets:

Name: server paging table type: basic table dataset: 1. Server paging-data 2. Server paging-total number of records (check the [attachment] checkbox)

Finally, create a new Kanban, introduce the above chart, and add the paging extension code:

. dg-dashboard {position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px;} .dg-chart {display: inline-block; width: 100%; height: 400px;} .chart-wrapper {display: inline-block; width: 80%; margin-left: 10%; padding: 2em 0em; border: 1px solid # ccc;} # pagination {text-align: center;}. Pagination-button {border: 1px solid # 333; border-radius: 5px Margin: 00.5em. padding: 0.5em 1.5em. pagination-current {background: blue; color: white;}. Pagination-info {padding-left: 1em;} var pageSize = 5 var pageSize chartListener= {update: function (chart, results) {/ / get the total number of records in the first attachment dataset (server paging-total records) var chartDataSet = chart.chartDataSetFirst (true); var totalResult = chart.resultOf (results, chartDataSet) Var total = chart.resultCell (totalResult, "total", 0); / / calculate the total number of pages var pages = (total%pageSize = = 0? ParseInt (total/pageSize): parseInt (total/pageSize) + 1); / / get the current page index var currentIndex = chart.dataSetParamValue (0,0); / / draw the paging button var $pg = $("# pagination"); $pg.empty (); for (var item1; I)

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.