How to use Custom child row renderer and File export in the same Datatables?

Watchara

Here is my javascripts code.

* <script>
*     $(document).ready(function () {
*         $('#myTable').DataTable({
*             "ajax": {
*                 "url": '@Url.Action("getListIPScanner")',
*                 "type": "GET",
*                 "datatype": "json"
*             },
*             dom: 'Bfrtip',
*             buttons: [
*                 'copy', 'excel', 'pdf'
*             ],
*             "columns": [
*                     { "data": "LocationStockName", "autoWidth": true },
*                     { "data": "IPAddress", "autoWidth": true },
*                     { "data": "SerialNumber", "autoWidth": true },
*                     { "data": "Type", "autoWidth": true },
*                     { "data": "ModelName", "autoWidth": true },
*                     { "data": "BrandName", "autoWidth": true },
*                     { "data": "StatusName", "autoWidth": true },
*                     { "data": "PlantName", "autoWidth": true },
*                     { "data": "DepartmentName", "autoWidth": true },
*                     { "data": "LocationName", "autoWidth": true },
*                     { "data": "PhaseName", "autoWidth": true },
*                     { "data": "MachineName", "autoWidth": true },
*             ]
*         });
*     });
*     </script>

allan

Looks like you've probably got the buttons aspect working, so you just need to use the code shown in this example as a basis for the child rows.

btw there is no columns.autoWidth parameter.

Allan

Watchara

This example just fine but I can't search any words in child rows.

It's return no matching records found.

Watchara

allan

The child row content is not controlled by DataTables, so it wouldn't be possible for it to be searchable by the table. Instead you need to have the content you want in a column (even if it is a hidden column).

Allan

Watchara

This example can search in child row content.

How to apply to my DataTables?

Watchara.

allan

That example does exactly what I noted above - the content of the child rows is contained in the columns of the DataTable.

Allan

Watchara

It's works! but it's doesn't show a green button.

What's wrong with me? and I've already include all js and css library files.

Watchara

allan

I would need a link to the page to be able to understand why it isn't working as expected.

Allan

Watchara

Here is my code.

There's are no green buttons.

What some thing wrong with my code?

I don't know how to sent you a link. I just run it on localhost on my PC.

* <table class="table table-bordered" id="myTable">
*     <thead>
*         <tr class="active">
*             <th>MachineName</th>
*             <th>IPAddress</th>
*             <th>PLCAddress</th>
*             <th>MACAddress</th>
*             <th>Plant</th>
*             <th>Department</th>
*             <th>Location</th>
*             <th>Phase</th>
*             <th>CreateBy</th>
*             <th>UpdateBy</th>
*             <th>DateCreate</th>
*             <th>DateUpdate</th>
*             <th>Action</th>
*         </tr>
*     </thead>
* </table>
* 
* @section Scripts{
*     <script>
*     $(document).ready(function () {
*         $('#myTable').DataTable({
*             responsive: {
*                 details: {
*                     renderer: function (api, rowIdx, columns) {
*                         var data = $.map(columns, function (col, i) {
*                             return col.hidden ?
*                                 '<tr data-dt-row="' + col.rowIndex + '" data-dt-column="' + col.columnIndex + '">' +
*                                     '<td>' + col.title + ':' + '</td> ' +
*                                     '<td>' + col.data + '</td>' +
*                                 '</tr>' :
*                                 '';
*                         }).join('');
* 
*                         return data ?
*                             $('<table/>').append(data) :
*                             false;
*                     }
*                 }
*             },
*             "ajax": {
*                 "url": '@Url.Action("getAllMachine")',
*                 "type": "GET",
*                 "datatype": "json"
*             },
*             dom: 'Bfrtip',
*             buttons: [
*                 'copy', 'excel', 'pdf'
*             ],
*             "columns": [
*                     { "data": "MachineName", "autoWidth": true },
*                     { "data": "IPAddress", "autoWidth": true },
*                     { "data": "PLCAddress", "autoWidth": true },
*                     { "data": "MACAddress", "autoWidth": true },
*                     { "data": "PlantName", "autoWidth": true },
*                     { "data": "DepartmentName", "autoWidth": true },
*                     { "data": "LocationName", "autoWidth": true },
*                     { "data": "PhaseName", "autoWidth": true },
*                     { "data": "CreateBy", "autoWidth": true },
*                     { "data": "UpdateBy", "autoWidth": true },
*                     { "data": "DateCreate", "autoWidth": true },
*                     { "data": "DateUpdate", "autoWidth": true },
*                     {
*                         "data": "MachineID",
*                       "render": function (data, type, full, meta) {
*                        return '<a href="@Url.Action("Edit/")' + data + '">Edit</a>' + '&nbsp;' + '|' + '&nbsp;' + '<a href="@Url.Action("Delete/")' + data + '">Delete</a>';
*                        },
*                        "autoWidth": true
*                        },
*             ]
*         });
*     });
*     </script>
* }

allan

I'm afraid I can't say from the above why it isn't working. I would need a link to the page showing the issue, as I requested above.

Allan

Watchara

OK. alright. I've solved.

Watchara