Column name not showing in Data Export

parismiguel

Hi!
I'm trying to get my column names printed whenever I use any export option; however, it's not showing at all.
Could you please help me?
Thank you!

Here is my HTML(header section only):

<thead>
                                        <tr class="filters">

                                            <th class="no-sort" style="padding:0 22px 5px 8px">
                                                <input type="checkbox" class="flat-orange" name="chkSelectAll" id="IdchkSelectAll" />
                                            </th>
                                            <th id="filter_col1" data-column="1">
                                                <input type="text" class="col_filter" id="col1_filter" placeholder="@Html.DisplayNameFor(model => model.SsNombre)" disabled>
                                            </th>

                                            <th id="filter_col2" data-column="2">
                                                <input type="text" class="col_filter" id="col2_filter" placeholder="@Html.DisplayNameFor(model => model.Estado)" disabled>
                                            </th>
                                            <th id="filter_col3" data-column="3">
                                                <input type="text" class="col_filter" id="col3_filter" placeholder="@Html.DisplayNameFor(model => model.Tipo)" disabled>
                                            </th>

                                            <th id="filter_col4" data-column="4">
                                                <input type="text" class="col_filter" id="col4_filter" placeholder="@Html.DisplayNameFor(model => model.Prioridad)" disabled>
                                            </th>
                                            <th id="filter_col5" data-column="5">
                                                <input type="text" class="col_filter" id="col5_filter" placeholder="@Html.DisplayNameFor(model => model.Criticidad)" disabled>
                                            </th>

                                            <th id="filter_col6" data-column="6">
                                                <input type="text" class="col_filter" id="col6_filter" placeholder="@Html.DisplayNameFor(model => model.Sitio.SitioNombre)" disabled>
                                            </th>

                                            <th class="no-sort"></th>
                                        </tr>
                                    </thead>

And here is my jquery:

  $("#example1").DataTable({
                "dom": 'Brtip',
                "buttons": [
                   {
                       extend: 'copy',
                       text: '<i class="fa fa-files-o" style="color:orange;"></i>',
                       titleAttr: 'Copiar',
                       title: 'Efficax Export'
                   },
                   {
                       extend: 'excel',
                       text: '<i class="fa fa-file-excel-o" style="color:green;"></i>',
                       titleAttr: 'Excel',
                       title: 'Efficax Export'
                   },
                   {
                       extend: 'csv',
                       text: '<i class="fa fa-file-text-o" style="color:blue;"></i>',
                       titleAttr: 'CSV',
                       title: 'Efficax Export'
                   },
                   {
                       extend: 'pdf',
                       text: '<i class="fa fa-file-pdf-o" style="color:brown;"></i>',
                       titleAttr: 'PDF',
                       title: 'Efficax Export'
                   },
                    {
                        extend: 'print',
                        text: '<i class="fa fa-print" style="color:black;"></i>',
                        titleAttr: 'Imprimir',
                        title: 'Efficax Export'
                        
                    }
                ],
                "language": {
                    "url": "//cdn.datatables.net/plug-ins/1.10.11/i18n/Spanish.json",
                    buttons: {
                        copyTitle: 'Copiando a la Memoria',
                        copyKeys: 'Presione <i>ctrl</i> y <i>\u2318</i> + <i>C</i> para copiar la información de la Tabla a la memoria. <br><br>Para anular, haga click en el título de la ventana emergente.',
                        copySuccess: {
                            _: 'Copiado %d filas',
                            1: 'Copiado 1 fila'
                        }
                    }
                },
                "scrollX": 600,
                "order": [],
                "columnDefs": [{
                    "targets": 'no-sort',
                    "orderable": false
                }
                ]
            });

Tom (DataTables)

The export options strip out any html before exporting the data. In your header you are using input tags so they will getting removed prior to any export.

You have three options
* You could use a data formatter. This example shows how to use a body formatter to extract data from a node. You could also use a header formatter. This feature is currently only available in the nightly version of buttons.
* The second option is to use a second header row with the column names.
* Third option is to just put the columns names in the <th> tags before the input.

Thanks

Tom

parismiguel

Hi Tom, thank you for your reply!

It makes totally sense what you say... I suspected something about those inputs from the beggining... what a dilemma, I need them for my filters.

Anyways, I've tried your recommendations as follows but I think I'm not interpreting as I should be:

1. Data formatter: I've placed columns attributes as it is shown in the example... even with the same "data" names but nothing change rather than losing my pagination control (I guess its because I'm not pulling data from ajax...) My data is previously populated by a model from my controller.

I'm not sure how to use body formatter for my purposes... here is my best guessing but it's not working at all:

 var buttonCommon = {
                exportOptions: {
                    format: {
                        body: function (data, column, row, node) {
                            column[1].replace = 'Test';
                            column[2].replace = 'Try';
                            column[3].replace = 'Foo';
                            column[4].replace = 'Luck';
                            column[5].replace = 'Blind';
                            column[6].replace = 'Shot';

                            return data;
                        }
                    }
                }
            };

About header formatter, I rather prefer not to use a nightly version because I'm not very experimented and I want to avoid further unknown risks.

1. If I use a second hidden row header, it works but I loose my column order controllers. It has to be hidden otherwise two column names doesn't look good.

 <tr class="hidden">
                                            <th></th>
                                            <th>Test</th>
                                            <th>Try</th>
                                            <th>Foo</th>
                                            <th>Luck</th>
                                            <th>Blind</th>
                                            <th>Shot</th>
                                            <th></th>
                                        </tr>

1. If I put the names of the columns in the th tags, in addition to the inputs for filtering purposes, it works too and I don't loose my column order controllers BUT... there is two column names that doesn't look good (I'm not able to hide the additional column name added in "th" tag)

<thead>
                                        <tr class="filters">

                                            <th class="no-sort" style="padding:0 22px 5px 8px">
                                                <input type="checkbox" class="flat-orange" name="chkSelectAll" id="IdchkSelectAll" />
                                            </th>
                                            <th id="filter_col1" data-column="1">
                                                @Html.DisplayNameFor(model => model.SsNombre)
                                                <input type="text" class="col_filter" id="col1_filter" placeholder="@Html.DisplayNameFor(model => model.SsNombre)" disabled>
                                            </th>

                                            <th id="filter_col2" data-column="2">
                                                @Html.DisplayNameFor(model => model.Estado)
                                                <input type="text" class="col_filter" id="col2_filter" placeholder="@Html.DisplayNameFor(model => model.Estado)" disabled>
                                            </th>

                                            <th id="filter_col3" data-column="3">
                                                @Html.DisplayNameFor(model => model.Tipo)
                                                <input type="text" class="col_filter" id="col3_filter" placeholder="@Html.DisplayNameFor(model => model.Tipo)" disabled>
                                            </th>

                                            <th id="filter_col4" data-column="4">
                                                @Html.DisplayNameFor(model => model.Prioridad)
                                                <input type="text" class="col_filter" id="col4_filter" placeholder="@Html.DisplayNameFor(model => model.Prioridad)" disabled>
                                            </th>
                                            <th id="filter_col5" data-column="5">
                                                @Html.DisplayNameFor(model => model.Criticidad)
                                                <input type="text" class="col_filter" id="col5_filter" placeholder="@Html.DisplayNameFor(model => model.Criticidad)" disabled>
                                            </th>

                                            <th id="filter_col6" data-column="6">
                                                @Html.DisplayNameFor(model => model.Sitio.SitioNombre)
                                                <input type="text" class="col_filter" id="col6_filter" placeholder="@Html.DisplayNameFor(model => model.Sitio.SitioNombre)" disabled>
                                            </th>

                                            <th class="no-sort"></th>
                                        </tr>
                                    </thead> 

Well, that's the most detailed info that I can provide hoping this can aid to other buddies as well. Please help me to sort out this las challenge!

Warm regards,

Paris

parismiguel

Ok... this works as I expected! I've just encapsulated my additional th name within a hidden "span" tag. I.e.:

<span class="hidden">@Html.DisplayNameFor(model => model.Estado)</span>

Maybe it's neither the most efficient nor the most elegant way but it works... .thank you Tom for pointing me into the right direction!

P.D. It could be very instructive anyways if you are able to solve this using your first two alternatives.

Have a great day!

PAris

allan

Clever - nice solution

I'm not sure how to use body formatter for my purposes...

You wouldn't use a body formatter for the header, but rather use a header formatter. You might do something like:

header: function ( html, idx, node ) {
  return $('input', node).attr('placeholder');
}

Allan

parismiguel

Thank you Allan... It's fantastic to learn from buddies that know more than me like yourself!