jqWidgets의 jqxGrid : server side sorting
data_03.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
$query = "SELECT OrderDate, ShippedDate, ShipName, ShipAddress, ShipCity, ShipCountry FROM orders";
if (isset($_POST['sortdatafield']))
{
$sortfields = array(
"OrderDate",
"ShippedDate",
"ShipName",
"ShipAddress",
"ShipCity",
"ShipCountry"
);
$sortfield = $_POST['sortdatafield'];
$sortorder = $_POST['sortorder'];
if (($sortfield != NULL) && (in_array($sortfield, $sortfields)))
{
if ($sortorder == "desc")
{
$query = $query . " ORDER BY " . $sortfield . " DESC";
}
else if ($sortorder == "asc")
{
$query = $query . " ORDER BY " . $sortfield . " ASC";
}
}
}
// 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);
$orders[] = array(
'OrderDate' => $line["orderdate"],
'ShippedDate' => $line["shippeddate"],
'ShipName' => $line["shipname"],
'ShipAddress' => $line["shipaddress"],
'ShipCity' => $line["shipcity"],
'ShipCountry' => $line["shipcountry"]
);
}
echo json_encode($orders);
// Free resultset
pg_free_result($result);
// Closing connection
pg_close($dbconn);
?>
jqxgrid_03.html
<!DOCTYPE html>
<html lang = "ko">
<head>
<title>jqWidgets jqxGrid 02</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: 'OrderDate'},
{ name: 'ShippedDate' },
{ name: 'ShipName' },
{ name: 'ShipAddress' },
{ name: 'ShipCity' },
{ name: 'ShipCountry' }
],
cache: false,
url: 'data_03.php',
type: "POST",
sort: function () {
// update the grid and send a request to the server.
$("#jqxgrid").jqxGrid('updatebounddata', 'sort');
}
};
var dataadapter = new $.jqx.dataAdapter(source);
// initialize jqxGrid
$("#jqxgrid").jqxGrid(
{
width: 900,
source: dataadapter,
theme: theme,
sortable: true,
sorttogglestates: 1,
columns: [
{ text: '주문일', datafield: 'OrderDate', cellsformat: 'd', width: 200 },
{ text: '선적일', datafield: 'ShippedDate', cellsformat: 'd', width: 200 },
{ text: '이름', datafield: 'ShipName', width: 200 },
{ text: '주소', datafield: 'ShipAddress', width: 180 },
{ text: '도시', datafield: 'ShipCity', width: 100 },
{ text: '국가', datafield: 'ShipCountry', width: 140 }
]
});
});
</script>
</head>
<body class='default'>
<div id="jqxgrid"></div>
</body>
</html>
결과 화면
data_03.php
jqxgrid_03.html'ETC' 카테고리의 다른 글
| jqWidgets의 jqxGrid : server side filtering (0) | 2017.11.03 |
|---|---|
| jqWidgets의 jqxGrid : server side sorting (0) | 2017.10.30 |
| jqWidgets의 jqxGrid : server side sorting and paging (0) | 2017.10.28 |
| jQWidgets의 jqxGrid basic (0) | 2017.10.22 |
| 윈도우에 Apache, PHP, PostgreSQL의 설치 3 (0) | 2015.11.27 |