Closed mworsnop closed 9 years ago
Hi @mworsnop!
Check out the output widget.
well you can't really use PHP to do this, you are confusing server side with client side, since js runs client side, you can't then bring it back to server side.
I use a fake form and use a json string with js and then use ajax to call a php side server side with the json string as a _GET var. I can then process and inject the csv.
That being said there is an output widget with php example included.
http://mottie.github.io/tablesorter/docs/example-widget-output.html
I am trying to get the data that is already on the table (yes on the client, wasnt thinking) and then output it to a text box. RIght now I loop through the database results and put the data in the right format for a CSV "like" file. Its actually more indepth than a CSV but same idea. Then the user can click the COPY button and it puts that into the copy buffer on the workstation.
in that case it's pretty easy, use the new chart widget, it'll output all the data for you into a array, then just process it instead of charting it. Technically you could do the same with the output widget would now makes me feel like a fool on the chart widget :\
basically if you want it as a string like csv, use the output widget and just use the string, if you would prefer an array use the chart widget and use the array.
Is there an example of this other than going to a chart like the current example does?
Did you try the output widget? In that demo you can send the output to a textarea in a popup window. The code is only a little different for putting it into a textarea in the same window.
If you get stuck, jump into our #tablesorter
IRC channel on freenode.net.
if I get some time I'll whip one up, just trying to help get 2.19.1 out first.
http://codepen.io/TheSin/pen/OPzLKq?editors=001
both output and chart can do this just depends what you want as an output I used chart just cause I had a demo setup to do it already anyhow ;)
Looks like the link you sent would do it. I tried to duplicate it from your web example and didn¹t get it working. Can you send the source to that page? http://codepen.io/TheSin/pen/OPzLKq?editors=001
Click the "JS" button located in the bottom right corner to toggle the javascript frame; that is all the scripting used in that demo.
To look at all the scripts that were loaded, click on the gear icon next to the "JS" when that frame is visible.
If you want to see the full page source, right click in the demo window and view the frame source.
Thanks for the help! Your web is really cool. Sorry I didn¹t see the buttons before.
I tried this on my web and it works great. BUT I needed to have the array printed out in the same order that the table is. For example I sort the table to be in the order I need, then hit the chart button. The array should be the same order as the table. Is that possible?
okay for this I'd use the output widget instead of chart. I'll update my demo as soon as I have time.
here using the output plugin
http://codepen.io/TheSin/pen/OPzLKq
data will match 100% now, hidden rows, sorts, etc etc
I duplicated the 3 sections from the example but now the output doesn¹t show anything at all. Maybe I have the includes setup wrong? The whole complete web page for your example isn¹t there so guessed on this part:
<link rel="stylesheet" href="custom.css">
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/jquery.tablesorter.js"></script>
<script type="text/javascript" src="js/jquery.tablesorter.widgets.js"></script>
<script type="text/javascript" src="js/jwidget-cssStickyHeaders.js"></script>
<script type="text/javascript" src="js/widget-pager.js"></script>
<script type="text/javascript" src="js/widget-columnSelector.js"></script>
<script type="text/javascript" src="js/widget-chart.js"></script>
that is just the headers, make sure you copy the init right to enable the output widget.
I would suggest using jsfiddle or something so we can see the entire page it's impossible for us to see in error since you are posting nothing, but based on my demo I can assure you it works.
Also why are your widgets in the /js folder? TS comes with widgets in /js/widgets/
Just figured it out, I need the output widget now, and not the chart widget that we started with. OK thanks all of you for the help! Now I have a test working I should be able to mix that into my real code. Thank you!
Using the code you provided how would I pick out only certain columns? And how would I then put this output into a textbox
output_callback : function(c, data) {
$('#output').html('');
if (data) {
var rows = data.split('\n');
$.each(rows, function(k, v) {
$('#output').append(v.split(',').join(', ') + ' <br>');
});
}
The output widget only creates data for selected rows and columns.
The output_ignoreColumns
option can be set with a zero-based column index of the column you want to ignore:
output_ignoreColumns: [0,1,2] // ignore 1st, 2nd and 3rd columns
If a column is hidden, it should also ignore it and not provide the data from that column in the output.
To ignore a row, you can set the output_saveRows
option. It is set to 'filtered'
rows by default, so change it to 'visible'
(only the first letter is needed) to only provide output from visible rows:
output_saveRows : 'v'
to save the output into a textarea, use the output_callback
function to target and save the output. Make sure to add a return false
at the end to prevent the popup window from opening, or file from being saved.
widgetOptions: {
// ignore 1st, 2nd and 3rd columns
output_ignoreColumns : [0,1,2],
// only output visible rows
output_saveRows : 'v',
// add output to a textarea
output_callback : function(c, data) {
$('#output').html('');
if (data) {
var rows = data.split('\n');
$.each(rows, function(k, v) {
// textarea's use VAL()
$('#output').val(v.split(',').join(', ') + ' \n');
});
}
return false;
}
}
I need to be able to take the data and wrap other text around each one. The example below is what I do now, just taking the data from the PHP array and looping through each one. I was trying to do the same with the data from the table so I could take advantage of the sorting from the table.
echo '[_][p]' . $p_array [$x] . '[/p][|][tn]' . $tn_id_array [$x] .'[/tn][|]' . $ts_array [$x] .'[|]' . ' ' . $on_array [$x] . '[|]' . $ptsarray [$x] . '[/] ';
I'm starting to think you are super super over complicating this. If it's only for sorting you want the data but you want different data to appear then do it all php, set the processed data as the contents of the td, but set a data attrib for the db value that you can sort against instead. Since tablesorter can sort based on the data attrib instead of the contents that might be miles easier.
But again without a demo I'm only guessing at what you are trying to accomplish.
you could also use a custom Parser for sorting. I'd recommend checkout the docs, demos and maybe even the irc channel, there are tons of options and Mottie's TS is very very complete and powerful but at this point I think we are creating a bigger bandaid based on your first question but we don't actually see the scope of the project.
The full scope of the part that I am trying to add is exactly what I already said. The table works great and I love it. I would like to be able to loop through the table in the order that it is in. So if I sort by a column or whatever. In other words the exact state the table is in. Anyway then loop through each row that is displayed as it appears on the browser. Take out the fields I need so I can reformat each field into line that is displayed in a text box. Currently I loop through the original data unordered.
I would like to see each row and column as a separate variables so I could plug the into text on a text box. Seems like there should be a way to do this. The code below is how I do it now with the PHP arrays. How can I do the same accessing the data from the table rather than from the arrays?
for ($x=0; $x < $numo; $x++) { echo '[_][p]' . $p_array [$x] . '[/p][|][tn]' . $tn_id_array [$x] .'[/tn][|]' . $ts_array [$x] .'[|]' . ' ' . $on_array [$x] . '[|]' . $ptsarray [$x] . '[/] ';
}
well considering I think I have done everything I can to get the data to you, at this point without more info I'm not sure I can help more. I assume you just want to put the data into an array, so in the callback go a step further and .split on ',', but I feel like Javascript might not be your strong suit, and without more code, it's impossible for me to tell you how to build from there since that is UI stuff and I can't see your UI.
All I can say is that it is possible for TS to do what you need but I can not provide anything else since I have no parameters of the output UI.
Your php example doesn't really help all you are doing is reformatting the row I guess and making it into a string with markup code maybe? either way, since I don't know what is in those arrays at all, here is what I came up with. My example only has 4 cols so it won't work the same since you're php seems to have 5 cols. but I added it how I could
This is exactly what I was looking for! Thank you so so much for being so patient and showing me how to do this! I really do appreciate it!
Can I ask one more stupid question as I don¹t know the answer. The output is the perfect format butŠ suppose I have a textboxŠ how do I dump that info into the text box?
This works properly and displays the data on the screen
$(Œ#output').append('[*][p]' + cells[0] + '[/p][|][tn]' + cells[1] +
'[/tn][|]' + cells[2] + '[|]' + ' ' + cells[3] + '[|]' + 'cells[4]' +
'[/*]
');
I added a textarea and changed the about output to textarea
$(Œ#textarea').append('[][p]' + cells[0] + '[/p][|][tn]' + cells[1] +
'[/tn][|]' + cells[2] + '[|]' + ' ' + cells[3] + '[|]' + 'cells[4]' +
'[/]
');
The literal comes into the textarea properly but the data is missing looks like this:
[][p]""[/p][|][tn]""[/tn][|]""[|] ""[|]cells[4][/] [][p]""[/p][|][tn]""[/tn][|]""[|] ""[|]cells[4][/] [][p]""[/p][|][tn]""[/tn][|]""[|] ""[|]cells[4][/] [][p]""[/p][|][tn]""[/tn][|]""[|] ""[|]cells[4][/]
this is far far out side of the scope of TS, you need to read and learn js/jQuery. Or take js/Jquery course maybe?
Anyhow append can not be used with textarea, please google for query text area contents or something of the likes. Maybe look up and ready about Jquery val() again this isn't TS anymore, this issue is resolved.
Textarea append works with the test demo page. If it works with that data and I use the exact same code on my real table it should work.
you really don't like google? :D change append to text or html, but you need to look things up, this is my last reply to this issue. I'm not trying to be mean at all, this is just general js/Jquery stuff now, nothing to do with TableSorter at all. Google will and can help you from here.
Ok thank you! I really do appreciate all the help.
The tablesorting is great! After its sorted etc, how can I look through each row so I can output the sorted data to CSV