Flexigrid - Lightweight but rich data grid | Libraries & Helpers

#31 / Apr 02, 2008 2:24pm

Kevin Kietel

22 posts

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?
<!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/

@millerjc

you have to add a table element with the classname “flexme:

<!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

#32 / Apr 02, 2008 6:58pm

lucap
2 posts

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.
#33 / Apr 02, 2008 7:06pm

Kevin Kietel
22 posts

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.

@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.
#34 / Apr 02, 2008 7:27pm

paulopmx
164 posts

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.

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.

#35 / Apr 02, 2008 7:42pm

millercj

11 posts

you have to add a table element with the classname “flexme:

<!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>

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?

#36 / Apr 02, 2008 8:10pm

paulopmx

164 posts

you have to add a table element with the classname “flexme:

<!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>

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?

just put this

<script type="text/javascript">
$('.flexme').flexigrid();
</script>

after the table

#37 / Apr 02, 2008 10:19pm

millercj

11 posts

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

$(".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
            }
            );

#38 / Apr 02, 2008 10:48pm

paulopmx

164 posts

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

$(".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
            }
            );

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.

#39 / Apr 02, 2008 10:53pm

millercj

11 posts

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.

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

<?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>";
$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;
?>

#40 / Apr 02, 2008 11:01pm

paulopmx

164 posts

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.

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

<?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>";
$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;
?>

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.

#41 / Apr 02, 2008 11:05pm

millercj
11 posts

It seems to be correct but it is currently at http://stjohnsuccjonestown.org/beta/test/post.php
#42 / Apr 02, 2008 11:23pm

paulopmx
164 posts

It seems to be correct but it is currently at http://stjohnsuccjonestown.org/beta/test/post.php

how about the link for your html file?
#43 / Apr 02, 2008 11:26pm

millercj
11 posts

sure that’s at http://stjohnsuccjonestown.org/beta/test/test.php

#44 / Apr 02, 2008 11:30pm

paulopmx

164 posts

sure that’s at http://stjohnsuccjonestown.org/beta/test/test.php

ok found problem “test” is not defined.

either remove it from

buttons : [
                {name: 'Add', bclass: 'add', onpress : test},
                {name: 'Delete', bclass: 'delete', onpress : test}
                ],

into

buttons : [
                {name: 'Add', bclass: 'add'},
                {name: 'Delete', bclass: 'delete'}
                ],

or make a function

function test(com,grid)
            {
                alert(com);                
            }

#45 / Apr 02, 2008 11:36pm

millercj
11 posts

removed it, still nothing.

Thread