TableTools multirow select print only selected rows

nickb

Dear users,

I'm new to tabletools and datatables. But so far as i can see now its working good! I only have 1 problem. I want to use the multiselect function and combine it with the print and save functions. But when i select a row and i save it, the complete table is saved and not only the selected row.

Can someone help me?

Kind regards,

Nick

The code i have now in the :
[code]





$(document).ready( function () {
$('#overview').dataTable( {
"sDom": 'T<"clear">lfrtip',
"oTableTools": {
"sSwfPath": "/includes/swf/copy_cvs_xls_pdf.swf",
"sRowSelect": "multi",
"aButtons": [
"copy",
"print",
{
"sExtends": "collection",
"sButtonText": "Save",
"aButtons": [ "csv", "xls", "pdf" ]
}
]
}
} );
} );

[/code]

The code in
[code]

allan

Hi Nick,

Interesting one! I've just committed a change to TableTools (you can grab the nightly from here: http://datatables.net/download/ ) which adds a bSelectedOnly only option for the data export buttons. When true it will mean that only selected rows will be output - when false all rows will be included. It might be nice to customise the fnClick method to see if any rows are selected, if there are, limit the data to that, if there aren't then use all rows (by modifying this new parameter).

The printing is a bit more difficult - that would require a filtering plug-in for DataTables. It's certainly possible, but not the 20 odd minutes job that this one was. I will try to add it soon though as it is a nice option to have.

Regards,
Allan

nickb

Hi Allen!

Thanks for the quick reply. Unfortunately it isn't working. I have updated the file, i've set bSelectedOnly on true.

When i select 1 row, press the copy button it says that it has selected 2 rows. But when i paste it in a text file all data is pasted. When i select 3 rows, it still says i've selected 2 rows and copy all the data to my clipboard.

I have a live example for you, it is in dutch (the content), but i think you will understand it.

Example:http://glutenvrij.nickbogerd.nl/

Kind regards,

Nick

allan

Hi Nick,

Try this instead:

[code]
$('#overview').dataTable( {
"sDom": 'T<"clear">lfrtip',
"oTableTools": {
"sSwfPath": "/includes/swf/copy_cvs_xls_pdf.swf",
"sRowSelect": "multi",
"aButtons": [
{
"sExtends": "copy",
"bSelectedOnly": "true",
}
"print",
{
"sExtends": "collection",
"sButtonText": "Save",
"aButtons": [ "csv", "xls", "pdf" ]
}
]
}
} );
[/code]
bSelectedOnly is a property of the button, not of TableTools as a whole :-).

Allan

nickb

wow you're the best! thanks its working! thank you :D

allan

I'll try and get the same option working for printing in time for the 2.0.1 release of TableTools. Not sure when it will be exactly - I'll let the dust settle from it's release :-)

Allan

nickb

Hi!

Because you've helped me last time that good, i have one more question. The changes you've made are working great. I mean, really good! So many thanks for that. But i'm trying to create a new button (or use the ajax button) to send data to php (i normally program in PHP, JavaScript isn't my thing). Is it possible to use a button to send the selected rows to a php script, for example table.php?

Thank you in advanced!

allan

Certainly should be :-). Does something like this work for you:

[code]
$('#overview').dataTable( {
"sDom": 'T<"clear">lfrtip',
"oTableTools": {
"sSwfPath": "/includes/swf/copy_cvs_xls_pdf.swf",
"sRowSelect": "multi",
"aButtons": [
{
"sExtends": "ajax",
"bSelectedOnly": "true",
// ajax address? etc...
}
]
}
} );
[/code]
Allan

nickb

Hi,

Thanks for the quick reply. I've already managed to get the ajax button visible. The only problem is that i can't let it sent to my php file.

Here is the idea, maybe you understand what i want to do.

I want that the selected rows will be inserted into a database. So if someone select a row, press the button (save for example) that the selected rows will be posted to a PHP file where i can process the ID's from the table.

For example 2 rows are selected: Row 1 and Row3.

The 2 rows numbers will be sent to a php file (insert.php for example) i've use a for loop (for example) to process the 2 rows and insert them into the database.

That is what i would like to do. Now i have the following code:
[code]
$(document).ready( function () {
$('#overview').dataTable( {
"sDom": 'T<"clear">lfrtip',
"oTableTools": {
"sSwfPath": "/includes/swf/copy_cvs_xls_pdf.swf",
"sRowSelect": "multi",
"aButtons": [
{
"sExtends": "copy",
"bSelectedOnly": "true"
},
{
"sExtends": "pdf",
"bSelectedOnly": "true"
},
{
"sExtends": "ajax",
"bSelectedOnly": "true",
"sAjaxUrl" : "/insert.php",
},
"print"
// {
// "sExtends": "collection",
// "sButtonText": "Save",
// "aButtons": [ "csv", "xls", "pdf" ]
// }
]
}
} );
} );
[/code]

With that code i get the following error:
[code]error detected when sending table data to server[/code]


Insert.php only has the following code for testing
[code]
alert("wow!");
[/code]

What is going wrong?

Thanks in advance!

allan

The reason for the error is that the Ajax handler that the pre-defined button is using is expecting a JSON reply. This is what the button looks like with the fnClick method:

[code]

$(document).ready( function () {
$('#overview').dataTable( {
"sDom": 'T<"clear">lfrtip',
"oTableTools": {
"sSwfPath": "/includes/swf/copy_cvs_xls_pdf.swf",
"sRowSelect": "multi",
"aButtons": [
{
"sExtends": "copy",
"bSelectedOnly": "true"
},
{
"sExtends": "pdf",
"bSelectedOnly": "true"
},
{
"sExtends": "ajax",
"bSelectedOnly": "true",
"sAjaxUrl" : "/insert.php",
"fnClick": function( nButton, oConfig ) {
var sData = this.fnGetTableData(oConfig);
$.ajax( {
"url": oConfig.sAjaxUrl,
"data": [
{ "name": "tableData", "value": sData }
],
"success": oConfig.fnAjaxComplete,
"dataType": "json",
"type": "POST",
"cache": false,
"error": function () {
alert( "Error detected when sending table data to server" );
}
} );
}
},
"print"
// {
// "sExtends": "collection",
// "sButtonText": "Save",
// "aButtons": [ "csv", "xls", "pdf" ]
// }
]
}
} );
} );
[/code]
So you just need to modify the $.ajax to do specifically what you want :-)

Allan

nickb

Wow you're good! Its almost working now. The php file is executed. For test i save a .txt file and that is working. But! As far as i can see i need to call the json event in php like this:
[code]
// decode JSON string to PHP object
$decoded = json_decode($_POST['tableData']);

// do something with data here
$myFile = "testFile.txt";
$fh = fopen($myFile, 'w') or die("can't open file");

fwrite($fh, $decoded);
fclose($fh);[/code]

But $decoded stays empty. I'm i that stupid?

BTW its incredible how much you can do with your software. It looks really great :)

allan

$_POST['tableData'] is just a string of data - not a JSON object. Try just saving $_POST['tableData'] out to the file and see what happens. Failing that, just echo it and see what it contains - it should be a comma separated list of values.

Allan

4giedrius

Hi Allan,
First of all, thank you for such wonderful jQuery plugin. It saved a lot of time for me. And now, "bSelectedOnly" option. It is perfect. I am using almost the same code as nickb, except I delete selected rows instead of inserting them. Everything works very well, except in $_POST[''tableData] string I get all mColumns values + word "undefined" in every row, maybe bug in nightly (I used str_replace so it is no big deal). What is more important, I want user to confirm before deleting(clicking on "sExtends": "ajax" button, should open prompt with Yes and No buttons, If pressed Yes delete, else do nothing) and have no clue how to do that. Maybe, someone could help me with that?

allan

Can you post an example of the bSelectedOnly problem?

With the confirm, can you just do something like this:

[code]
if ( confirm( "Are you sure?" ) )
{
// Do ajax stuff
}
else
{
// exit out
}
[/code]
Allan

4giedrius

Sorry I am not good with js. Can I add this confirm code to "aButtons" or it can not be implemented there?

bSelectedOnly problem:

Creating button:
[code]
"aButtons": [
{
"sExtends": "ajax",
"bSelectedOnly": "true",
"bHeader" : false,
"mColumns": [1,2],
"sFieldSeperator": ",",
"sAjaxUrl" : "ajax.php"
}
]
[/code]

ajax.php file:
[code] $File = "test.txt";
$fh = fopen($File, 'w');
fwrite($fh, $_POST['tableData']);
fclose($fh);
[/code]
mColumn[1] is id and mColumn[2] is date.
Result i get:
[code]2,2011-01-07 14:22:16undefined3,2011-01-07 14:22:16undefined4,2011-01-07 14:22:16undefined6,2011-01-07 14:22:17undefined7,2011-01-07 14:22:17undefined9,2011-01-07 14:22:17undefined10,2011-01-07 14:22:17undefined11,2011-01-07 14:22:18undefined12,2011-01-07 14:22:18undefined13,2011-01-07 14:22:18undefined14,2011-01-07 14:22:18undefine[/code]

allan

You would want to do it in the click callback - like where I've got my alert() in this example: http://datatables.net/extras/tabletools/button_options#fnClick .

For the 'undefined' issue, I've just committed a fix for that - you can grab the latest (nightly) from here: http://datatables.net/download/ (or add an sNewline option to your button list - I forgot it in the defaults, sorry).

Allan

4giedrius

Glad to hear, that you fixed it. And thanks for example for implementing user confirmation. There is my example in case someone will need it:
[code]
{
"sExtends": "ajax",
"bSelectedOnly": "true",
"bHeader" : false,
"mColumns": [1,3],
"sFieldSeperator": ",",
"sAjaxUrl" : "ajax.php",
"fnClick": function( nButton, oConfig ) {
var sData = this.fnGetTableData(oConfig);
if (confirm ('Do you really want to delete?')){
$.ajax( {
"url": oConfig.sAjaxUrl,
"data": [
{
"name": "tableData",
"value": sData
}
],
"success": oConfig.fnAjaxComplete,
"dataType": "json",
"type": "POST",
"cache": false,
"error": function () {
alert( "Error detected when sending table data to server" );
}
} );
}
else {alert('Not deleted');}
}
}[/code]

Everything works like a charm, except one thing. Error function is triggered. What server should return, that error wouldn't be triggered?

xojins

4giedrius, did you figure out why the error function is triggered? I'm seeing the same thing with a very simple ajax button that calls a php page(which is one line print_r($_POST);)., The called page returns the correct output but the error popup still happens.

Thanks!

xojins

Figured it out.

The ajax object is looking for a JSON object as the response.

maliwik

Sorry for resurrecting an old thread, but I felt it was better than creating a brand new one.

Would you happen to have completed the "Print Selected Rows" ability for TableTools yet, Allan?

gbisheimer

Hi Allan,

Looking for a solution to the initial post (printing only selected rows), I came out with this solution that worked for me, just removing the non-selected rows from the displayed table in the DOM, and letting function fnPrintEnd redraws the table when user goes back to normal display. I'm sure there are things that I've not taken into account in my implementation, but hope somebody will collaborate with this. Here is the added code to _fnPrintStart:

[code]
/**
* Show print display
* @method _fnPrintStart
* @param {Event} e Event object
* @param {Object} oConfig Button configuration object
* @returns void
* @private
*/
"_fnPrintStart": function ( oConfig )
{
var that = this;
var oSetDT = this.s.dt;
var bSelectedOnly = (typeof oConfig.bSelectedOnly != 'undefined') ? oConfig.bSelectedOnly : false;

/* Parse through the DOM hiding everything that isn't needed for the table */
this._fnPrintHideNodes( oSetDT.nTable );

/* Show the whole table */
this.s.print.saveStart = oSetDT._iDisplayStart;
this.s.print.saveLength = oSetDT._iDisplayLength;

/* Print only Selected Rows */
if( bSelectedOnly )
{
var aSelected = this.fnGetSelected();
if ( this.s.select.type !== "none" && bSelectedOnly && aSelected.length !== 0 )
{
var data=oSetDT.aoData;
var i, iLen;
var oSettings = oSetDT.oInstance.fnSettings();
var sEven = oSettings.oClasses.sStripeEven;
var sOdd = oSettings.oClasses.sStripeOdd;

/* Remove unseleted rows */
for ( i=0, iLen=data.length ; i

allan

Fantastic! Thank you for sharing this with us. I will look at putting this into TableTools soon :-)

Allan

rayudu

Hi Allan

your super..................................... thanking you for sharing this TableTools. I like this jquery datatable.