[eluser]Kevin Kietel[/eluser]
[quote author="millercj" date="1207161249"]This is my html. I've downloaded the files from the Flexigrid site but i dont understand how to get data into the grid...any help?
Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Phone Directory</title>
<link rel="stylesheet" type="text/css" href="css/flexigrid/flexigrid.css">
</head>
<body>
$('.flexme').flexigrid();
</body>
</html>
apparently my script tags wont show...look here http://stjohns.digiconmediagroup.com/test/[/quote]
@millerjc
you have to add a table element with the classname "flexme:
Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Phone Directory</title>
<link rel="stylesheet" type="text/css" href="css/flexigrid/flexigrid.css">
<script type="text/javascript" src="jquery-1.2.3.js"></script>
<script type="text/javascript" src="flexigrid.js"></script>
<script type="text/javascript">
$('.flexme').flexigrid();
</script>
</head>
<body>
<table class="flexme">
<thead>
<tr>
<th width="100">Col 1</th>
<th width="100">Col 2</th>
<th width="100">Col 3 is a long header name</th>
<th width="300">Col 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>This is data 1 with overflowing content</td>
<td>This is data 2</td>
<td>This is data 3</td>
<td>This is data 4</td>
</tr>
<tr>
<td>This is data 1</td>
<td>This is data 2</td>
<td>This is data 3</td>
<td>This is data 4</td>
</tr>
</tbody>
</table>
</body>
</html>
This is the most simple way to convert a normal table to a 'flexigrid' table (like example 1 on http://webplicity.net/flexigrid/).
If you want more features, example 3 offers more flexibility, but you will need experience with ajax/dynamic data/jquery/php/asp
Hope this will help you a bit
[eluser]lucap[/eluser]
I have an Html table with many hundreds of rows and I'd like to page it :
Can I use the paging feature (and the sorting) without an external php script to pull more data in as it is in the 3rd example?
Since all data-rows are already found in the document I removed the "url: 'post2.php', dataType: 'json'," part from the flexigrid call, the table still displays correctly but nothing happens when I click on the buttons in the paging bar below the data.
[eluser]Kevin Kietel[/eluser]
[quote author="lucap" date="1207191501"]I have an Html table with many hundreds of rows and I'd like to page it :
Can I use the paging feature (and the sorting) without an external php script to pull more data in as it is in the 3rd example?
Since all data-rows are already found in the document I removed the "url: 'post2.php', dataType: 'json'," part from the flexigrid call, the table still displays correctly but nothing happens when I click on the buttons in the paging bar below the data.[/quote]
@lucap:
basically, what you mean is clientside sorting instead of serverside sorting.
You'd have to ask Paulo if this is possible. There are some other jQuery plugins that can do this. Like Tablesorter ( http://tablesorter.com/docs/) but in my opinion, Tablesorter is much more complicated to set up when you want to use all the features it offers.
[eluser]paulopmx[/eluser]
[quote author="lucap" date="1207191501"]I have an Html table with many hundreds of rows and I'd like to page it :
Can I use the paging feature (and the sorting) without an external php script to pull more data in as it is in the 3rd example?
Since all data-rows are already found in the document I removed the "url: 'post2.php', dataType: 'json'," part from the flexigrid call, the table still displays correctly but nothing happens when I click on the buttons in the paging bar below the data.[/quote]
Okay technically it doesn't have that functionality. But there are a couple of API you can use that maybe can simulate that.
you can assign a function to the onChangePage API, the function will tell you what new page the user is clicking to or entering. onChangeSort will tell you the sort name and sort order that the user wants.
I added those functions in case the developer wants to use a classic URL paging like http://project/page/1 or http://project/controller.php?page=1
For paging items just within one page and one table, then right now, nope.
[eluser]millercj[/eluser]
[quote author="Kevin Kietel" date="1207175059"]
you have to add a table element with the classname "flexme:
Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Phone Directory</title>
<link rel="stylesheet" type="text/css" href="css/flexigrid/flexigrid.css">
<script type="text/javascript" src="jquery-1.2.3.js"></script>
<script type="text/javascript" src="flexigrid.js"></script>
<script type="text/javascript">
$('.flexme').flexigrid();
</script>
</head>
<body>
<table class="flexme">
<thead>
<tr>
<th width="100">Col 1</th>
<th width="100">Col 2</th>
<th width="100">Col 3 is a long header name</th>
<th width="300">Col 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>This is data 1 with overflowing content</td>
<td>This is data 2</td>
<td>This is data 3</td>
<td>This is data 4</td>
</tr>
<tr>
<td>This is data 1</td>
<td>This is data 2</td>
<td>This is data 3</td>
<td>This is data 4</td>
</tr>
</tbody>
</table>
</body>
</html>
[/quote]
It's still not applying any of the style elements
I have it online at http://stjohns.digiconmediagroup.com/test/flex.php
Anyone have any Ideas?
[eluser]paulopmx[/eluser]
[quote author="millercj" date="1207194135"][quote author="Kevin Kietel" date="1207175059"]
you have to add a table element with the classname "flexme:
Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Phone Directory</title>
<link rel="stylesheet" type="text/css" href="css/flexigrid/flexigrid.css">
<script type="text/javascript" src="jquery-1.2.3.js"></script>
<script type="text/javascript" src="flexigrid.js"></script>
<script type="text/javascript">
$('.flexme').flexigrid();
</script>
</head>
<body>
<table class="flexme">
<thead>
<tr>
<th width="100">Col 1</th>
<th width="100">Col 2</th>
<th width="100">Col 3 is a long header name</th>
<th width="300">Col 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>This is data 1 with overflowing content</td>
<td>This is data 2</td>
<td>This is data 3</td>
<td>This is data 4</td>
</tr>
<tr>
<td>This is data 1</td>
<td>This is data 2</td>
<td>This is data 3</td>
<td>This is data 4</td>
</tr>
</tbody>
</table>
</body>
</html>
[/quote]
It's still not applying any of the style elements
I have it online at http://stjohns.digiconmediagroup.com/test/flex.php
Anyone have any Ideas?[/quote]
just put this
Code: <script type="text/javascript">
$('.flexme').flexigrid();
</script>
after the table
[eluser]millercj[/eluser]
Ok so now that i understand this a little better I've been working on trying to create something similar to the Example 3. I'm getting my data from a SQL database and processing through a file, post.php (like shown on the site) I'm getting my data as expected from by DB echoing from the php as XML.
The example shows how to use JSON but now do I use XML/SQL, this is what i've adapted from the JSON example but it just gives me a blank white screen
Code: $(".flexme").flexigrid
(
{
url: 'post.php',
dataType: 'xml',
colModel : [
{display: 'id', name : 'id', width : 100, sortable : true, align: 'left'},
{display: 'fname', name : 'fname', width : 100, sortable : true, align: 'left'},
{display: 'lname', name : 'lname', width : 100, sortable : true, align: 'left'},
],
buttons : [
{name: 'Add', bclass: 'add', onpress : test},
{name: 'Delete', bclass: 'delete', onpress : test},
{separator: true}
],
searchitems : [
{display: 'ISO', name : 'iso'},
{display: 'Name', name : 'name', isdefault: true}
],
sortname: "lname",
sortorder: "asc",
usepager: true,
title: 'Directory',
useRp: true,
rp: 15,
showTableToggleBtn: true,
width: 700,
height: 200
}
);
[eluser]paulopmx[/eluser]
[quote author="millercj" date="1207203552"]Ok so now that i understand this a little better I've been working on trying to create something similar to the Example 3. I'm getting my data from a SQL database and processing through a file, post.php (like shown on the site) I'm getting my data as expected from by DB echoing from the php as XML.
The example shows how to use JSON but now do I use XML/SQL, this is what i've adapted from the JSON example but it just gives me a blank white screen
Code: $(".flexme").flexigrid
(
{
url: 'post.php',
dataType: 'xml',
colModel : [
{display: 'id', name : 'id', width : 100, sortable : true, align: 'left'},
{display: 'fname', name : 'fname', width : 100, sortable : true, align: 'left'},
{display: 'lname', name : 'lname', width : 100, sortable : true, align: 'left'},
],
buttons : [
{name: 'Add', bclass: 'add', onpress : test},
{name: 'Delete', bclass: 'delete', onpress : test},
{separator: true}
],
searchitems : [
{display: 'ISO', name : 'iso'},
{display: 'Name', name : 'name', isdefault: true}
],
sortname: "lname",
sortorder: "asc",
usepager: true,
title: 'Directory',
useRp: true,
rp: 15,
showTableToggleBtn: true,
width: 700,
height: 200
}
);
[/quote]
Go back to the site http://webplicity.net/flexigrid, click How to use, then there is a link there called Show Sample PHP code for XML.
[eluser]millercj[/eluser]
[quote author="paulopmx" date="1207205284"]
Go back to the site http://webplicity.net/flexigrid, click How to use, then there is a link there called Show Sample PHP code for XML.[/quote]
I already did that, that is my post.php file, which works fine, and below is its code but it still displays a blank screen
Code: <?PHP
function runSQL($rsql)
{
$hostname = 'xx';
$username = 'xx';
$password = 'xx';
$dbname = 'xx';
$connect = mysql_connect($hostname,$username,$password) or die ("Error: could not connect to database");
$db = mysql_select_db($dbname);
$result = mysql_query($rsql) or die ('test');
return $result;
mysql_close($connect);
}
function countRec($fname,$tname)
{
$sql = "SELECT COUNT($fname) FROM $tname ";
$result = runSQL($sql);
while ($row = mysql_fetch_array($result)){
return $row[0];
}
}
$page = $_POST['page'];
$rp = 15;
$sortname = 'lname';
$sortorder = 'asc';
$sort = "ORDER BY $sortname $sortorder";
if (!$page) $page = 1;
if (!$rp) $rp = 10;
$start = (($page-1) * $rp);
$limit = "LIMIT $start, $rp";
$sql = "SELECT id,fname,lname FROM Directory $sort $limit";
$result = runSQL($sql);
$total = countRec('fname','Directory');
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT" );
header("Last-Modified: " . gmdate( "D, d M Y H:i:s" ) . "GMT" );
header("Cache-Control: no-cache, must-revalidate" );
header("Pragma: no-cache" );
header("Content-type: text/xml");
$xml = "<?xml version=\"1.0\" encoding=\"utf-8\"?>\n";
$xml .= "<rows>";
$xml .= "<page>$page</page>";
$xml .= "<total>$total</total>";
while ($row = mysql_fetch_array($result)) {
$xml .= "<row id='".$row['id']."'>";
$xml .= "<cell><![CDATA[".$row['id']."]]></cell>";
$xml .= "<cell><![CDATA[".utf8_encode($row['fname'])."]]></cell>";
$xml .= "<cell><![CDATA[".utf8_encode($row['lname'])."]]></cell>";
$xml .= "</row>";
}
$xml .= "</rows>";
echo $xml;
?>
[eluser]paulopmx[/eluser]
[quote author="millercj" date="1207205581"][quote author="paulopmx" date="1207205284"]
Go back to the site http://webplicity.net/flexigrid, click How to use, then there is a link there called Show Sample PHP code for XML.[/quote]
I already did that, that is my post.php file, which works fine, and below is its code but it still displays a blank screen
Code: <?PHP
function runSQL($rsql)
{
$hostname = 'xx';
$username = 'xx';
$password = 'xx';
$dbname = 'xx';
$connect = mysql_connect($hostname,$username,$password) or die ("Error: could not connect to database");
$db = mysql_select_db($dbname);
$result = mysql_query($rsql) or die ('test');
return $result;
mysql_close($connect);
}
function countRec($fname,$tname)
{
$sql = "SELECT COUNT($fname) FROM $tname ";
$result = runSQL($sql);
while ($row = mysql_fetch_array($result)){
return $row[0];
}
}
$page = $_POST['page'];
$rp = 15;
$sortname = 'lname';
$sortorder = 'asc';
$sort = "ORDER BY $sortname $sortorder";
if (!$page) $page = 1;
if (!$rp) $rp = 10;
$start = (($page-1) * $rp);
$limit = "LIMIT $start, $rp";
$sql = "SELECT id,fname,lname FROM Directory $sort $limit";
$result = runSQL($sql);
$total = countRec('fname','Directory');
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT" );
header("Last-Modified: " . gmdate( "D, d M Y H:i:s" ) . "GMT" );
header("Cache-Control: no-cache, must-revalidate" );
header("Pragma: no-cache" );
header("Content-type: text/xml");
$xml = "<?xml version=\"1.0\" encoding=\"utf-8\"?>\n";
$xml .= "<rows>";
$xml .= "<page>$page</page>";
$xml .= "<total>$total</total>";
while ($row = mysql_fetch_array($result)) {
$xml .= "<row id='".$row['id']."'>";
$xml .= "<cell><![CDATA[".$row['id']."]]></cell>";
$xml .= "<cell><![CDATA[".utf8_encode($row['fname'])."]]></cell>";
$xml .= "<cell><![CDATA[".utf8_encode($row['lname'])."]]></cell>";
$xml .= "</row>";
}
$xml .= "</rows>";
echo $xml;
?>
[/quote]
did you try accessing post.php directly at the browser to see if its displaying correct XML and has no errors? maybe you can give me a link or something.
|
