TableTools multirow select print only selected rows
TableTools multirow select print only selected rows
nickb
Posts: 8Questions: 0Answers: 0
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]
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]
This discussion has been closed.
Replies
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
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
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
Allan
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!
[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
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!
[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
[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
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?
With the confirm, can you just do something like this:
[code]
if ( confirm( "Are you sure?" ) )
{
// Do ajax stuff
}
else
{
// exit out
}
[/code]
Allan
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]
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
[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?
Thanks!
The ajax object is looking for a JSON object as the response.
Would you happen to have completed the "Print Selected Rows" ability for TableTools yet, 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
your super..................................... thanking you for sharing this TableTools. I like this jquery datatable.