Replies

• allan Posts: 63,542Questions: 1Answers: 10,476 Site admin

  August 2016

  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 Posts: 30Questions: 5Answers: 1

  August 2016

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

  It's return no matching records found.

  Watchara
• allan Posts: 63,542Questions: 1Answers: 10,476 Site admin

  August 2016

  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 Posts: 30Questions: 5Answers: 1

  August 2016

  This example can search in child row content.

  How to apply to my DataTables?

  Watchara.
• allan Posts: 63,542Questions: 1Answers: 10,476 Site admin

  August 2016

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

  Allan
• Watchara Posts: 30Questions: 5Answers: 1

  August 2016

  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 Posts: 63,542Questions: 1Answers: 10,476 Site admin

  August 2016

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

  Allan
• Watchara Posts: 30Questions: 5Answers: 1

  September 2016 edited September 2016

  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 Posts: 63,542Questions: 1Answers: 10,476 Site admin

  September 2016

  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 Posts: 30Questions: 5Answers: 1

  October 2016

  OK. alright. I've solved.

  Watchara