2

I have a working jQuery DataTable (https://www.datatables.net/) using the TableTools plug-in with <span> elements in every row of one of the columns.

On clicking the export button, I would like to hide/remove the <span> elements from the exported file. Not remove the whole columns, but just the <span> elements within that column.

How can I achieve this? I understand how to remove an entire column from the export, but I have not found a way to remove particular elements from the export.

Thanks

UPDATED

    "oTableTools": {
        "sSwfPath": "/public/swf/copy_csv_xls_pdf.swf",
        "aButtons": [
            {
                "sExtends": "print",
            },
            {
                "sExtends": "copy",
            },
            {
                "sExtends": "csv",                   
                "fnCellRender": function ( sValue, iColumn, nTr, iDataIndex ) {
                    return sValue;
                 }               
            }
        ]
      }

I have the fnCellRender in place, I'm just not sure what the best way is to strip out <span> elements.

conbask
  • 9,741
  • 16
  • 57
  • 94

2 Answers2

1

You need to use the fnCellRender option of a button, from the docs:

Used to modify the data that has been read from the table through the fnGetTableData API method (used for exporting data). This allows pre-processing of the data before exporting it - for example stripping certain parts of the HTML or postfixing other data.

Read all the options here. Also read the aButtons option at initialisation here. The idea is define the buttons that TableTools will use and in the button definition use the sExtends option to extend a TableTools button behaivor.

Here is an example:

$(document).ready( function () {
    $('#example').dataTable( {
        "dom": 'T<"clear">lfrtip',
        "tableTools": {
            "sSwfPath": "TableTools_files/copy_csv_xls_pdf.swf",
            "aButtons": [
                {
                    "sExtends":    "csv", //extend the default csv
                    "fnCellRender": function ( sValue, iColumn, nTr, iDataIndex ) {
                        if ( iColumn === 5 ) {
                            //feel free to modify the value here
                            return sValue +" TableTools";
                        }
                        return sValue;
                    }
                }
            ]
        }
    } );
} );

Read the comments in the example, adjust it to your needs, feel free to comment.

EDIT: Read all this post and use the option that adjust more to your needs
How to strip HTML tags with jQuery?
Jquery: Strip all specifc HTML tags from string
Remove all HTMLtags in a string (with the jquery text() function)
JavaScript: How to strip HTML tags from string?

Community
  • 1
  • 1
Castro Roy
  • 7,623
  • 13
  • 63
  • 97
  • Thanks for your answer. I've updated my question to include my "oTableTools" code. I do not know how to strip the `` elements from the string – conbask Jun 05 '15 at 22:31
1

In my tests, latest TableTools already strips HTML tags in CSV file. See this example.

In order for this to work you need to remove fnCellRender. Apparently, if fnCellRender is present, TableTools doesn't do HTML stripping by default.

Also, although DataTables tries to determine column data type automatically, you may want to consider setting that column type to html for searching and filtering.

From the manual:

When operating in client-side processing mode, DataTables can process the data used for the display in each cell in a manual suitable for the action being performed. For example, HTML tags will be removed from the strings used for filter matching, while sort formatting may remove currency symbols to allow currency values to be sorted numerically.

DataTables has a number of built in types which are automatically detected:

...

html - Basic string processing for HTML tags

  • Sorting - sorted with HTML tags removed
  • Filtering - HTML tags removed from filtering string
Gyrocode.com
  • 57,606
  • 14
  • 150
  • 185
  • you are damn right, if i remove `fnCellRender` it works. @585connor should upgrade your `TableTools` version or use my answer. – Castro Roy Jun 08 '15 at 15:12
  • @Kstro21, your answer is also correct because per documentation `fnCellRender` can be used to **strip certain parts of the HTML**, it gives user more control. – Gyrocode.com Jun 08 '15 at 15:15
  • I updated to the newest stable release of TableTools and removed fnCellRender. It strips the tags, but leaves their contents. I would like to remove the `` elements entirely. – conbask Jun 08 '15 at 17:52
  • @585connor, then you definitely need to use `fnCellRender` as @Kstro21 suggested. Can you update your question, post a sample cell content and explain what part you want to be removed, please? – Gyrocode.com Jun 08 '15 at 17:56