Answers

• colin Posts: 15,240Questions: 1Answers: 2,599

  September 2020

  Duplicate of this thread. Please only post once,

  Colin
• anurag9179 Posts: 6Questions: 2Answers: 0

  September 2020

  Hi Colin,

  Sorry and also know that but that solution is out dated and I cant add my comment over existing one.

  anurag
• colin Posts: 15,240Questions: 1Answers: 2,599

  September 2020

  Odd, as you had added a comment. Either way, we'll need a test case as I mentioned in that other thread,

  Colin
• anurag9179 Posts: 6Questions: 2Answers: 0

  September 2020 edited September 2020

  By using below code I am trying to show only one child at a time on details-control button click, but in below code format method is not working.

  $('#example tbody').on('click', 'td.details-control', function () {
          var tr = $(this).closest('tr');
          var row = table.row( tr );
    
          if ( row.child.isShown() ) {
              // This row is already open - close it
              row.child.remove();
              tr.removeClass('shown');
          }
          else {
   
              table.rows().eq(0).each( function ( idx ) {
              var row = table.row( idx );
    
              if ( row.child.isShown() ) {
                   row.child.close();
              }
              } );
   
              row.child( format(row.data()) ).show();
              tr.addClass('shown');
         }
  } );
  
  
• kthorngren Posts: 21,529Questions: 26Answers: 4,987

  September 2020

  but in below code format method is not working.

  How is it not working?

  Please post a link to your page or a running test case so we can help debug.
  https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

  Kevin
• anurag9179 Posts: 6Questions: 2Answers: 0

  September 2020

  Hello All,

  Thanks for the reply. I solved this issue by my self and below is the code with jquery data table.

  
  table = $("#logisticList").DataTable({
  
              "pageLength": 10,
              "bAutoWidth": false,
              responsive: true,
              searching: false,
              "processing": true,
              "lengthChange": true,
              "lengthMenu": [10, 15, 30, 50, 100],
              "bSortable": true,
              "order": [],
              "orderCellsTop": true,
              "bDestroy": true,
              "bScrollCollapse": true,
              "dom": 'lifrtp',
              "language": {
                  "emptyTable": "No documents found"
              },
              ajax: {
                  url: '@Url.Action("GetResult")' + '?searchText=' + textSearch + '&datefile=' + dateFile + "&applicationId=" + appId + "&isSubCategory=" + flag,
                  dataSrc: 'data',
                  dataType: 'json',
                  type: 'POST'
              },
              "columnDefs": [
                  {
                      "targets": [0],
                      "visible": false,
                      "bSortable": false
                  },
                  {
                      "targets": [1],
                      "visible": false,
                      "bSortable": false,
                      //"className": 'dtr-control',
                  },
                  {
                      "targets": [2],
                      "className": 'actiondropdown dtr-control',
                      "bSortable": false,
                      responsivePriority: 1,
  
  
                  },
                  {
  
                      
                      "targets": [3],
                      "className": 'dt-body-left',
                      "bSortable": true,
                      responsivePriority: 2
                      //,"visible": false
                  }
                  ,
                  {
                      "targets": [4],
                      "className": 'dt-body-left',
                      "bSortable": true,
                      "visible": true
                  }
                  ,
                  {
                      "targets": [5],
                      "bSortable": true,
                      "className": 'dt-body-left',
                      "sType": "date-uk"
                  }
                  ,
                  {
                      "targets": [6],
                      "bSortable": true,
                      "className": 'dt-body-left'
                  }
              ],
              "columns": [
                  {
                      "data": "applicationId"
                  },
                  {
                      "data": "documentId"
                  },
                  {
                      "data": null,
                      "render": function (d, t, r) {
                          var url = '@Url.Action("downloadFile", "DocumentSearch")' + "?fileId=" + r.documentId + "&fileName=" + r.fileName;
                          if (screen.width <= 414) {
                              return '<div class="btn-group" tabindex="0"><button tabindex="0" class="btn mobile-btn-drp dropdown-toggle" style = "white-space: nowrap;" data-toggle="dropdown" href = "javascript:return false;"> <span class="caret"></span></button>'
                                  + '<ul class="dropdown-menu" tabindex="0">'
                                  + '<li>'
                                  + '<a tabindex="0" onclick="previewFile(' + "'" + r.documentId + "'" + ',' + "'" + r.fileName + "'" + ',' + "'" + r.fileextension + "'" + ');" href="javascript:;">Preview</a>'
                                  + '</li>'
                                  + '<li>'
                                  + '<a tabindex="0" onclick="fileDownload(' + "'" + r.documentId + "'" + ',' + "'" + r.fileName + "'" + ',' + "'" + r.fileextension + "'" + ');" href="javascript:;">Download</a>'
                                  + '</li>'
                                  + '<li>'
                                  + '<a tabindex="0"  href="javascript:location.reload()">Related Records</a>'
                                  + '</li>'
                                  + '</ul></div>';
                          }
                          else {
                          return '<div class="btn-group" tabindex="0"><button tabindex="0" class="btn btn-drp dropdown-toggle" style = "white-space: nowrap;" data-toggle="dropdown" href = "javascript:return false;"> Action <span class="caret"></span></button>'
                              + '<ul class="dropdown-menu" tabindex="0">'
                              + '<li>'
                              + '<a tabindex="0" onclick="previewFile(' + "'" + r.documentId + "'" + ',' + "'" + r.fileName + "'" + ',' + "'" + r.fileextension + "'" + ');" href="javascript:;">Preview</a>'
                              + '</li>'
                              + '<li>'
                              + '<a tabindex="0" onclick="fileDownload(' + "'" + r.documentId + "'" + ',' + "'" + r.fileName + "'" + ',' + "'" + r.fileextension + "'" + ');" href="javascript:;">Download</a>'
                              + '</li>'
                              + '<li>'
                              + '<a tabindex="0"  href="javascript:location.reload()">Related Records</a>'
                              + '</li>'
                              + '</ul></div>';
                          }
                      }
                  },
                  {
                      "data": "fileName"
                      ,"render": function (d, t, r) {
                          if (screen.width <= 414) {
                              if (findLongestWord(d) > 25) {
                                  return d.substr(0, 25) + '…';
                              }
                              else {
                                  return d;
                              };
                          }
                          else {
                              return d;
                          }
                      },
                  },
                  {
                      "data": "category"
                  },
                  {
                      "data": "fileDate"
                  },
                  {
                      "data": "fileSize"
                  },
              ]
              //,"initComplete": function (settings, json) {
              //    if (screen.width <= 414) {
              //        debugger;
              //        //alert('Hello world');
              //        //$('#logisticList').css("width","412px important!");
              //        //$('#divResult').css("width", "409px;");
              //        //var api = new $.fn.dataTable.Api(settings);
              //        //api.columns([1]).visible(true);
              //        var ht = $('.container').innerHeight();
              //        $('.bg').css("height", (ht+100)+'px');
              //    }
              //},
  
          });
  
  $('#logisticList tbody').on('click', 'td.dtr-control', function () {
         
          $("tr.child").each(function () {
              $(this).remove();
          });
  
          $("tr.parent").each(function () {
              $(this).removeClass('parent');
          });
      });