jqWidgets의 jqxGrid : server side sorting
data_04.php
<?php
#Include the connect.php file
include ('../connect.php');
// Connect to the database
$dbconn = pg_connect($conn_string) or die('Could not connect: ' . pg_last_error());
// get data and store in a json array
$pagenum = $_GET['pagenum'];
$pagesize = $_GET['pagesize'];
//$pagenum = 1;
//$pagesize = 10;
$start = $pagenum * $pagesize;
$query = "SELECT CompanyName, ContactName, ContactTitle, Address, City, Country
FROM Customers OFFSET " . $start . " LIMIT " . $pagesize;
// Performing SQL query
$result = pg_query($query) or die('Query failed: ' . pg_last_error());
while ($line = pg_fetch_array($result, null, PGSQL_ASSOC)) {
//echo var_dump($line);
$customers[] = array(
'CompanyName' => $line["companyname"],
'ContactName' => $line["contactname"],
'ContactTitle' => $line["contacttitle"],
'Address' => $line["address"],
'City' => $line["city"],
'Country' => $line["country"]
);
}
// get the total rows.
$query = "SELECT count(*) AS total_rows FROM customers";
$result = pg_query($query) or die('Query failed: ' . pg_last_error());
$line = pg_fetch_array($result, null, PGSQL_ASSOC);
// create array
$data[] = array(
'TotalRows' => $line["total_rows"],
'Rows' => $customers
);
echo json_encode($data);
// Free resultset
pg_free_result($result);
// Closing connection
pg_close($dbconn);
?>
jqxgrid_04.html
<!DOCTYPE html>
<html lang = "ko">
<head>
<title>jqWidgets jqxGrid 04</title>
<meta charset="UTF-8">
<!-- add one of the jQWidgets styles -->
<link rel="stylesheet" href="../jqwidgets-ver5.3.2/jqwidgets/styles/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="../jqwidgets-ver5.3.2/jqwidgets/styles/jqx.darkblue.css" type="text/css" />
<link rel="stylesheet" href="../jqwidgets-ver5.3.2/jqwidgets/styles/jqx.classic.css" type="text/css" />
<!-- add the jQuery script -->
<script type="text/javascript" src="../jqwidgets-ver5.3.2/scripts/jquery-1.11.1.min.js"></script>
<!-- add the jQWidgets framework -->
<script type="text/javascript" src="/jqwidgets-ver5.3.2/jqwidgets/jqxcore.js"></script>
<!-- add one or more widgets -->
<script type="text/javascript" src="../jqwidgets-ver5.3.2/jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../jqwidgets-ver5.3.2/jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="../jqwidgets-ver5.3.2/jqwidgets/jqxmenu.js"></script>
<script type="text/javascript" src="../jqwidgets-ver5.3.2/jqwidgets/jqxcheckbox.js"></script>
<script type="text/javascript" src="../jqwidgets-ver5.3.2/jqwidgets/jqxlistbox.js"></script>
<script type="text/javascript" src="../jqwidgets-ver5.3.2/jqwidgets/jqxdropdownlist.js"></script>
<script type="text/javascript" src="../jqwidgets-ver5.3.2/jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../jqwidgets-ver5.3.2/jqwidgets/jqxgrid.js"></script>
<script type="text/javascript" src="../jqwidgets-ver5.3.2/jqwidgets/jqxgrid.selection.js"></script>
<script type="text/javascript" src="../jqwidgets-ver5.3.2/jqwidgets/jqxgrid.pager.js"></script>
<script type="text/javascript" src="../jqwidgets-ver5.3.2/jqwidgets/jqxgrid.sort.js"></script>
<script type="text/javascript">
$(document).ready(function () {
// prepare the data
var theme = 'classic';
var source =
{
datatype: "json",
datafields: [
{ name: 'CompanyName' },
{ name: 'ContactName' },
{ name: 'ContactTitle' },
{ name: 'Address' },
{ name: 'City' },
{ name: 'Country' }
],
cache: false,
url: 'data_04.php',
root: 'Rows',
beforeprocessing: function (data) {
source.totalrecords = data[0].TotalRows;
}
};
var dataadapter = new $.jqx.dataAdapter(source);
// initialize jqxGrid
$("#jqxgrid").jqxGrid(
{
width: 900,
source: dataadapter,
theme: theme,
autoheight: true,
pageable: true,
virtualmode: true,
rendergridrows: function (params) {
return params.data;
},
columns:
[
{ text: '회사이름', datafield: 'CompanyName', width: 250 },
{ text: '담당자', datafield: 'ContactName', width: 200 },
{ text: '직위', datafield: 'ContactTitle', width: 200 },
{ text: '주소', datafield: 'Address', width: 180 },
{ text: '도시', datafield: 'City', width: 100 },
{ text: '국가', datafield: 'Country', width: 140 }
]
});
});
</script>
</head>
<body class='default'>
<div id="jqxgrid"></div>
</body>
</html>
결과 화면
data_04.php
jqxgrid_04.html'ETC' 카테고리의 다른 글
| 주소를 이용하여 다중 마커와 다중 인포윈도우 표시하기(Kakao 지도 API) (3) | 2019.12.29 |
|---|---|
| jqWidgets의 jqxGrid : server side filtering (0) | 2017.11.03 |
| jqWidgets의 jqxGrid : server side sorting (0) | 2017.10.29 |
| jqWidgets의 jqxGrid : server side sorting and paging (0) | 2017.10.28 |
| jQWidgets의 jqxGrid basic (0) | 2017.10.22 |