如何在 JQuery DataTable 中显示嵌套行？

Question

我正在从我的 asp net-core 应用程序调用一个 API，它是 跟随 Json 数据返回我。 在这个 Json companyRegionList 内部是动态的，如果里面没有数据，那么我们将得到它的 Value null 。

"result":[
      {
         "id":1,
         "stateName":"Ow",
         "regionDirector":"Cassy Fusset",
         "status" : Active,
         "phoneNumber":"123456",
         "email":"cassy.f@gmail.com",
         "companyRegionList":{
            "companyList":[
               {
                  "companyId":4,
                  "code":"ATL",
                  "Name":"Atlanta",
                  "Director":"corey Cullen ",
                  "contact":"123456",
                  "Status":"Active"
               },
               {
                  "companyId":4,
                  "code":"ATL",
                  "Name":"Atlanta",
                  "Director":"corey Cullen ",
                  "contact":"123456",
                  "Status":"Active"
               },
               {
                  "companyId":4,
                  "code":"ATL",
                  "Name":"Atlanta",
                  "Director":"corey Cullen ",
                  "contact":"123456",
                  "Status":"Active"
               },
            ]
         }
      },
      {
         "id":1,
         "stateName":"Florida",
         "regionDirector":"Boone Williams",
         "status" : Active,
         "phoneNumber":"123456",
         "email":"Boone.w@gmail.com",
         "companyRegionList":
         "companyList":[{
                  "companyId":4,
                  "code":"ATL",
                  "Name":"Atlanta",
                  "Director":"corey Cullen ",
                  "contact":"123456",
                  "Status":"Active"
               }
      },    ]
      {
         "id":1,
         "stateName":"NW Georgia",
         "regionDirector":"Mikel Stapp",
         "status" : Active,
         "phoneNumber":"123456",
         "email":"mikel.s@gmail@gmail.com",
         "companyRegionList": null
      }
   ]

I want to Show my Json Data to this way using Jquery Datatable. if CompanyRegionList inside json data is null then i want to show No data available .

Answer 1

这样的事情怎么样？

var result = [
      {
         "id": 1,
         "stateName": "Ow",
         "regionDirector": "Cassy Fusset",
         "status": "Active",
         "phoneNumber": "(987)767 67678",
         "email": "cassy.f@gmail.com",
         "companyRegionList": {
            "companyList": [
               {
                  "companyId": 1,
                  "code":"ATL",
                  "Name":"Atlanta",
                  "Director":"corey Cullen ",
                  "contact":"(336) 876 9874",
                  "Status":"Active"
               },
               {
                  "companyId": 2,
                  "code":"ATL2",
                  "Name":"Atlanta  II",
                  "Director":"corey Cullen ",
                  "contact":"(336) 876 9874",
                  "Status":"Active"
               },
               {
                  "companyId": 3,
                  "code":"ATL",
                  "Name":"Atlanta Pinnacle",
                  "Director":"corey Cullen ",
                  "contact":"(336) 876 9874",
                  "Status":"Active"
               },
               {
                  "companyId": 4,
                  "code":"BDC",
                  "Name":"BDC Staff",
                  "Director":"corey Cullen ",
                  "contact":"(336) 876 9874",
                  "Status":"Active"
               }
            ]
         }
      },
      {
         "id": 2,
         "stateName":"Florida",
         "regionDirector":"Boone Williams",
         "status": "Active",
         "phoneNumber":"(987)767 67678",
         "email":"Boone.w@gmail.com",
         "companyRegionList": {
                "companyList": [
                     {
                  "companyId":4,
                  "code":"ATL",
                  "Name":"Atlanta",
                  "Director":"corey Cullen ",
                  "contact":"123456",
                  "Status":"Active"
               }
                ]
         }
      },
      {
         "id": 3,
         "stateName":"NW Georgia",
         "regionDirector":"Mikel Stapp",
         "status": "Active",
         "phoneNumber":"(987)767 67678",
         "email":"mikel.s@gmail@gmail.com",
         "companyRegionList": null
      }
   ];

function format ( d ) {

    // `d` is the original data object for the row
     var html = '<table class="table">'+
        '<thead><tr style="background-color: #f5f8fb;">'+
            '<th>CITY CODE</th>'+
            '<th>CITY NAME</th>'+
            '<th>DIRECTOR</th>'+
            '<th>CONTACT</th>'+
            '<th>STATUS</th>'+
        '</tr></thead><tbody>';
      
        if(d.companyRegionList == null)
             html += '<tr><td colspan="5" style="text-align: center;">No data available</td></tr>';
        else {
            for (let i in d.companyRegionList.companyList) {
        
               html += '<tr><td>' + d.companyRegionList.companyList[i].code + '</td>';
               html += '<td>' + d.companyRegionList.companyList[i].Name + '</td>';
               html += '<td>' + d.companyRegionList.companyList[i].Director + '</td>';
               html += '<td>' + d.companyRegionList.companyList[i].contact + '</td>';
               html += '<td>' + d.companyRegionList.companyList[i].Status + '</td></tr>';
            }
        }
        
    html += '</tbody</table>';
    
    return html;
}

var oTable = $('#tblExample').DataTable({
  ordering: false,
  paging: false,
  searching: true,
  info: false,
  data: result,
  columns: [
      { data: 'id', visible: false },
      { data: 'stateName', className: 'textUC' },
      { data: 'regionDirector', className: 'textUC' },
      { data: 'status', className: 'textUC' },
      { data: 'phoneNumber', className: 'textUC' },
      { data: 'email', className: 'textUC' },
      {
        "className":      'details-control',
        "orderable":      false,
        "data":           null,
        "defaultContent": ''
      }
  ]
});

// Add event listener for opening and closing details
$('#tblExample tbody').on('click', 'td.details-control', function () {

  $('#tblExample tbody > tr').addClass('rowInactive');
  
  var tr = $(this).closest('tr');
  var row = oTable.row( tr );
  $(tr).removeClass('rowInactive');

  if ( row.child.isShown() ) {
    // This row is already open - close it
    row.child.hide();
    tr.removeClass('shown');
    $('#tblExample tbody > tr').removeClass('rowInactive');
  }
  else {
    // Open this row
    row.child( format(row.data()) ).show();
    tr.addClass('shown');
  }
});

td.details-control {
    background: url('https://i.imgur.com/I8lvlcC.jpg') no-repeat center center;
    /*background: url('https://datatables.net/examples/resources/details_open.png') no-repeat center center;*/
    cursor: pointer;
}

tr.shown td.details-control {
    background: url('https://imgur.com/wUcJYSG.jpg') no-repeat center center;
    /*background: url('https://datatables.net/examples/resources/details_close.png') no-repeat center center;*/
}

.textUC {
  text-transform: uppercase;
  font-weight: bold;
}

.rowActive {
  color: black;
}

.rowInactive {
  color: #97aaba;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap.min.js"></script>

<table id="tblExample" class="table" style="width: 100%">
    <!--<thead>
    <tr>
        <th>id</th>
        <th>stateName</th>
        <th>regionDirector</th>
        <th>status</th>
        <th>phoneNumber</th>
        <th>email</th>
    </tr>
    </thead>-->
  </table>