Form Input Missing in Datatable Exported Data

Question

I have this Html:

<div class="table-responsive">
    <div id="product_purchase_report_table_wrapper" class="dataTables_wrapper form-inline dt-bootstrap">
        <div class="dt-buttons btn-group">
            <a class="btn btn-default buttons-csv buttons-html5 btn-sm" tabindex="0" aria-controls="product_purchase_report_table" href="#">
                <span><i class="fa fa-file-csv" aria-hidden="true"></i> Export to CSV</span>
            </a>
            <a class="btn btn-default buttons-excel buttons-html5 btn-sm" tabindex="0" aria-controls="product_purchase_report_table" href="#">
                <span><i class="fa fa-file-excel" aria-hidden="true"></i> Export to Excel</span>
            </a>
            <a class="btn btn-default buttons-print btn-sm" tabindex="0" aria-controls="product_purchase_report_table" href="#">
                <span><i class="fa fa-print" aria-hidden="true"></i> Print</span>
            </a>
            <a class="btn btn-default buttons-collection buttons-colvis btn-sm" tabindex="0" aria-controls="product_purchase_report_table" href="#">
                <span><i class="fa fa-columns" aria-hidden="true"></i> Column visibility</span>
            </a>
            <a class="btn btn-default buttons-pdf buttons-html5 btn-sm" tabindex="0" aria-controls="product_purchase_report_table" href="#">
                <span><i class="fa fa-file-pdf" aria-hidden="true"></i> Export to PDF</span>
            </a>
        </div>
        <div id="product_purchase_report_table_filter" class="dataTables_filter">
            <label><input type="search" class="form-control input-sm" placeholder="Search ..." aria-controls="product_purchase_report_table" /></label>
        </div>
        <table class="table table-bordered table-striped dataTable" id="product_purchase_report_table" role="grid" aria-describedby="product_purchase_report_table_info">
            <thead>
                <tr role="row">
                    <th class="sorting_asc" tabindex="0" aria-controls="product_purchase_report_table" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Date: activate to sort column descending" style="width: 56.7656px;">Date</th>
                    <th class="sorting" tabindex="0" aria-controls="product_purchase_report_table" rowspan="1" colspan="1" aria-label="Supplier: activate to sort column ascending" style="width: 386.305px;">Supplier</th>
                    <th class="sorting" tabindex="0" aria-controls="product_purchase_report_table" rowspan="1" colspan="1" aria-label="Product: activate to sort column ascending" style="width: 104.383px;">Product</th>
                    <th class="sorting" tabindex="0" aria-controls="product_purchase_report_table" rowspan="1" colspan="1" aria-label="Reference No.: activate to sort column ascending" style="width: 103.508px;">Reference No.</th>
                    <th class="sorting" tabindex="0" aria-controls="product_purchase_report_table" rowspan="1" colspan="1" aria-label="Quantity: activate to sort column ascending" style="width: 62.1953px;">Quantity</th>
                    <th class="sorting_disabled" rowspan="1" colspan="1" aria-label="PCs" style="width: 86.0312px;">PCs</th>
                    <th class="sorting" tabindex="0" aria-controls="product_purchase_report_table" rowspan="1" colspan="1" aria-label="Unit Purchase Price: activate to sort column ascending" style="width: 142.883px;">
                        Unit Purchase Price
                    </th>
                    <th class="sorting" tabindex="0" aria-controls="product_purchase_report_table" rowspan="1" colspan="1" aria-label="Subtotal: activate to sort column ascending" style="width: 69.4141px;">Subtotal</th>
                    <th class="sorting" tabindex="0" aria-controls="product_purchase_report_table" rowspan="1" colspan="1" aria-label="Average (Kgs) / Pc: activate to sort column ascending" style="width: 133.516px;">Average (Kgs) / Pc</th>
                </tr>
            </thead>

            <tbody>
                <tr role="row" class="odd">
                    <td class="sorting_1">02-10-2023</td>
                    <td>
                        mr Omar Salim Mwakuzinya - AUTO REPAIRS
                    </td>
                    <td>01. Whole Chicken</td>
                    <td>5412</td>
                    <td>1200</td>
                    <td style="max-width: 70px !important;" class="mobile">
                        <div class="form-group">
                            <input class="form-control" value="0.00" name="pcs" type="number" id="pcs" data-code="55" data-value="0.00" style="width: 70px !important;" />
                        </div>
                    </td>
                    <td>300.00</td>
                    <td>360,000.00</td>
                    <td>0</td>
                </tr>
                <tr role="row" class="even">
                    <td class="sorting_1">02-10-2023</td>
                    <td>
                        mr Omar Salim Mwakuzinya - AUTO REPAIRS
                    </td>
                    <td>11. Gizzard</td>
                    <td>5412</td>
                    <td>3.5</td>
                    <td style="max-width: 70px !important;" class="mobile">
                        <div class="form-group">
                            <input class="form-control" value="0.00" name="pcs" type="number" id="pcs" data-code="56" data-value="0.00" style="width: 70px !important;" />
                        </div>
                    </td>
                    <td>200.00</td>
                    <td>700.00</td>
                    <td>0</td>
                </tr>
                
            </tbody>
            <tfoot>
                <tr class="bg-gray font-17 footer-total text-center">
                    <td colspan="4" rowspan="1">Total:</td>
                    <td rowspan="1" colspan="1">1449.06</td>
                    <td rowspan="1" colspan="1">204</td>
                    <td rowspan="1" colspan="1">297.00</td>
                    <td rowspan="1" colspan="1">430,366.68</td>
                    <td rowspan="1" colspan="1">&nbsp;</td>
                </tr>
            </tfoot>
        </table>
        <div class="dataTables_info" id="product_purchase_report_table_info" role="status" aria-live="polite">Showing 1 to 11 of 11 entries</div>
        <div class="dataTables_paginate paging_simple_numbers" id="product_purchase_report_table_paginate">
            <ul class="pagination">
                <li class="paginate_button previous disabled" id="product_purchase_report_table_previous"><a href="#" aria-controls="product_purchase_report_table" data-dt-idx="0" tabindex="0">Previous</a></li>
                <li class="paginate_button active"><a href="#" aria-controls="product_purchase_report_table" data-dt-idx="1" tabindex="0">1</a></li>
                <li class="paginate_button next disabled" id="product_purchase_report_table_next"><a href="#" aria-controls="product_purchase_report_table" data-dt-idx="2" tabindex="0">Next</a></li>
            </ul>
        </div>
    </div>
</div>

Which yields this Datatable:

My issue is, when I export the data in either way (pdf, excel etc), the form input data (PCs Column) are blank. I do I export the input as text just as the other columns? I need to have all the columns exported inclusing the form input ones. I am using the Datatables CDN library

Answer 1

Yes it's possible.

You can just use this snippet taken from an existing Datatables forum thread:

body: function ( data, row, column, node ) 
{
return $(data).is("div") ?
$(data).find('input').val():
data;
}