Copying only column data

pisisler

It is possible to select rows and copy them with copyHtml5? Copy button by default copies the row data even if only one cell or a column (or a group of columns) is selected. I couldn't extend the copy button to export column data by buttons.exportData()

kthorngren

This example shows how to export specified columns. Use the class .selected as the column selector. Is this what you are looking for?
https://live.datatables.net/tofasane/1/edit

Kevin

pisisler

Ok good, but can't one copy button handle both? I mean we can change the selection mode with selectRows and selectColumns; but the copy doesn't respect this selection. If I set it to copy columns with this method, then copy will copy the columns but it will produce an error if the selection mode is rows.

kthorngren

One option might be to create two buttons; one to export selected columns and the other to export selected rows. Then use the selectItems event to show/hide the appropriate buttons.

Either use button().add() and button().remove() to toggle the displayed button. Or use button().node() along with jQuery or DOM methods to show/hide the buttons.

but it will produce an error if the selection mode is rows.

I don't see errors generated in this test case:
https://live.datatables.net/tofasane/2/edit

If there are no columns selected then nothing is copied regardless of the selection mode. You can select both columns and rows and the interesection of them will be copied.

What error messages do you see? Maybe update the test case to show the issues you are having.

Kevin

pisisler

I tried adding a button after table initialization like in the examples of the reference in button().add(), it doesn't have any effect at all. I tried disabling all buttons just for testing like: table.buttons().disable(); but it didn't disable any of them. What could be the reason? (I checked that API returns a DataTable object as expected, but with no effect on the buttons.)

I was thinking I could add the export collection later to allow detecting the select type like:

button = {
    extend: 'copyHtml5',
    title: null
};

button['exportOptions'][table.select.items() == 'column' ? 'columns' : 'rows'] = '.selected';

table.button().add(null, button);

But I can't do since as I said buttons() seems to be completely ineffective.

allan

Calling table.buttons().disable() disabled all the buttons in Kevin's example: https://live.datatables.net/tofasane/9/edit .

Perhaps you can provide a test case demonstrating the issue please?

Allan

kthorngren

Its hard to say why your code isn't working without a test case. Look at the browser's console for errors or update my test case to show the issues you are having.

I might do something like this using CSS to hide the button and toggling the class defined in the CSS based on select mode:
https://live.datatables.net/tofasane/7/edit

Kevin

pisisler

Thank you both for your time.

I found out that I needed to defer calling buttons(), maybe it's because my table is loading slow? I noticed that calling button().disable() from the console worked. Then I deferred this inline code in the JS file, now it's working too. (This raises another problem for me as to why my table is slower than expected. I think it is the impact of stateSave and stateDuration, do you concur? Because I tweaked field types and classes for especially search to be very fast and it was; but after I started saving states, even typing something into the search box or deleting or resetting freezes for a moment.)

As @kthorngren suggested, I added two buttons and used the selectItems to toggle hiding of the buttons. Just the difference I made is that I used jQuery hide() and show() instead of adding/removing classes and altering CSS (again as he reminded).

By the way, I wanted to use button name as the button-selector, but got a syntax error complaining about something like "unknown pseudo <<buttonname>>". buttons.buttons.name says that naming buttons should still be available to use in DataTables 1.x although it doesn't have layout, but as a selector it didn't work and I had to use indexes.

kthorngren

I found out that I needed to defer calling buttons(),

Use the new ready() API and place you code within the function. The function won't execute until the Datatables is initialized and has placed all the buttons, etc.

I think it is the impact of stateSave and stateDuration, do you concur?

Are you using stateSaveCallback to save the state via ajax? Its hard to say what the problem is without seeing it. Can you provide a link to a test case showing the issue?

ut got a syntax error complaining about something like "unknown pseudo <<buttonname>>".

Did you use the format {string}:name? Possibly you reversed the selector and used name:{string}. Without seeing what you tried its hard to say. My last test case uses this notation.

Kevin

pisisler

Use the new ready() API and place you code within the function. The function won't execute until the Datatables is initialized and has placed all the buttons, etc.

Unfortunately I can't upgrade to DataTables 2.0 because the license for Editor I have (2.0.8) is not compatible with it. (Right now I am using 1.13.10). Nonetheless, it's ok, I have implemented a very small deferring mechanism which is sufficient. (But it doesn't of course take DT loading into consideration; it just defers until DOMContentLoaded.)

Are you using stateSaveCallback to save the state via ajax?

No, just the plain two options like:

stateSave: true,
stateDuration: 0,

I don't think it's possible to link an example case because my production system uses many customizations that couldn't possibly be represented by a test case.

Did you use the format {string}:name?

Ok I got it to work. The documentation in button-selector mislead me into thinking I should use buttontype:customname syntax. The reference gives this example:

var table = new DataTable('#myTable', {
    buttons: [{ extend: 'csv', name: 'csv' }]
});
 
table.buttons('csv:name').disable();

I didn't notice that "csv" in the syntax is actually the custom name but not the button itself. It mislead me because the example uses the same string for a custom name;
which I mis-thought was a variable in the second part. Following this syntax, I used something like: table.button('copyHtml5:customname') which is simply wrong as I can see now. It should rather be: customname:name (button type is not used and "name" is not a variable but it's an indicator only).

kthorngren

Just to clarify, if you comment out stateSave: true, then searching speed is ok but when enabled its slow?

@allan will need to comment on this issue.

Kevin

pisisler

Yes. When I disable state saving, searching is blazing fast; but when it is enabled, searching lags noticeably between each key-press on the search box.

For the record; the table has 773 records, loaded by ajax, with deferRender enabled, no server-side processing. But when I switch data source to have about 8900 records (with the same table config), it lags a little between key-presses, even when state saving is disabled. (Which I take normally; because it has lots of data loaded client-side.)

So in short: When state saving is enabled, I have the same lag in a small-data table when you normally would have with a large-data set.

allan

If you link to a test case showing the issue I'll take a look into it.

Allan

pisisler

I sent you a PM for private access.