Print Flexigrid, Export to csv Flexigrid, PHP,MySQL, CodeIgniter, jquery

1,153 views
Skip to first unread message

flex...@googlemail.com

unread,
Sep 8, 2008, 6:10:45 PM9/8/08
to Flexigrid for jQuery
Hi guys,

Thank you Paolo for this great widget.

I'm using CodeIgniter PHP/MySQL implementation with Ajax and json.
I also added a top form with id=sform to the grid , sort of advanced
search.

All work's ok and now I want to implement a "print all results" button
that opens a new window formatted for printing, or force download a
csv file.
The main ideea is to print/export all results from flexigrid, not
paginated.

I think in jquery I have to catch all the form fields and submit
(POST) to a file, get data from db then show a new window.

Can you help me, just give me a few hints then I figure out the rest.

Sorry for my bad english.

Thank's

William Chang

unread,
Sep 8, 2008, 8:29:50 PM9/8/08
to Flexigrid for jQuery
About printing data from the flexigrid, I think you should let the
"server side" do that, not JavaScript (jQuery and Flexigrid). Create a
"print" button on the flexigrid and then call a function to do a
"postback" to another page or do a popup window. And, then let the
"server side" get the data from the database and create a simple XHTML
table by "programming a loop" to populate on the "print friendly"
page.

Sincerely,
Will

On Sep 8, 6:10 pm, "flexi...@googlemail.com" <flexi...@googlemail.com>
wrote:

flex...@googlemail.com

unread,
Sep 10, 2008, 9:55:49 PM9/10/08
to Flexigrid for jQuery
Thanks for help.

I created Print button and function print() that sends ajax POST
request with sform fields (this was my problem , how to get field
values from sform) to print.php.
Then open a new window and write response.

That's ok for printing option.

function print(com,grid)
{
if (com=='Print')
{
var sform_data = $('#sform').serializeArray();
$.ajax({
type: "POST",
dataType: "json",
url: "print.php",
data: sform_data,
success: function(data){
var pwin = window.open("",
"printwin","width=400,height=600");
pwin.document.open()
pwin.document.write(data)
pwin.document.close()
pwin.print()
}
}
}


print.php
-----------------
<?php
var_dump($_POST);
//process post fields.. generate sql query .. return results
?>

For export option after processing data from db I want to force
download xls file generated from php.
I used this headers

export.php
-------------------
<?php
//get records from db
header("Pragma: public");
header("Expires: 0");
header("Cache-Control: must-revalidate, post-check=0, pre-check=0");
header("Content-Type: application/force-download");
header("Content-Type: application/octet-stream");
header("Content-Type: application/download");;
header("Content-Disposition: attachment; filename=exportfile.xls");
//print xls file
?>

But using ajax requests only in Firebug I can see response
Also accessing export.php directly in browser work well (using GET for
parameters).

Is there a way to POST sform fields to export.php on a new window, or
an iframe to force download ?
Or maybe I should write result_xls_file on server and put a link to
it ?

Or add other form on page and onClick flexigrid Export button submit
it with sform values ?

What is the right method to do it ?
> > Thank's- Hide quoted text -
>
> - Show quoted text -

flex...@googlemail.com

unread,
Sep 10, 2008, 10:14:16 PM9/10/08
to Flexigrid for jQuery
I think adding a new parameter export:true and submiting form works,
but don't now how to do that.
Having this parameter passed to main flexigrid_ajax.php that outputs
table is easy to redirect to a different page.

So, I think, my question is how to add a new parameter to flexigrid ?

Thanks for your reply.

On Sep 11, 4:55 am, "flexi...@googlemail.com"
> > - Show quoted text -- Hide quoted text -

William Chang

unread,
Sep 11, 2008, 12:39:41 AM9/11/08
to Flexigrid for jQuery
What you're asking for is already in the example in the Flexigrid zip
file: sample1.html
var dt = $('#sform').serializeArray();
$("#flex1").flexOptions({params: dt});

Here is my version of how to pass single parameters (without
serializeArray()) alongside Flexigird's POST:
// Before data table submit, allow to add parameters before post.
function _onDataTableSubmit() {
var p = [
{name:_eleDataTableSql.id, value:$(_eleDataTableSql).val()},
{name:_eleDataTableMode.id, value:$(_eleDataTableMode).val()}
]
$(_eleDataTable).flexOptions({params:p});
return true;
}

Sincerely,
William Chang
http://www.babybluebox.com/blog/

On Sep 10, 10:14 pm, "flexi...@googlemail.com"
Reply all
Reply to author
Forward
0 new messages