将动态html表转换为jQuery datatable

时间:2018-08-17 05:44:55

标签: jquery

我是Jquery的新手。我的要求是创建一个jquery数据表,并在扩展所述数据表的每一行时,应动态创建一个表。我通过以下方式为每个父数据表的行动态创建嵌套表:

//if fold type is 'OTHER', then it requires few additional columns
var additionalHeaders = (XmlUtil.selectSingleNodeText(soapGetResultslist.responseXml,"//FOLDTYPE") === "OTHER" ? '
<th>Contact Name</th>
<th>Contact Phone</th>
<th>Organization</th>
' : '' ); 
var cases = $(soapGetResultslist.responseXml).find("formattedCKEY:contains(" + formattedCKEY + ")").prevAll("issue");
var issuetable = '
<table id="IssuesTable" class="stripe nowrap"  style="position:relative; top:0px; width:95%;">
   ' +
   '
   <thead>
      ' +
      '
      <tr>
         ' +
         '
         <th nowrap>Select</th>
         '+
         '
         <th nowrap>Priority</th>
         ' +
         '
         <th nowrap>Attachments</th>
         ' +
         '
         <th nowrap>Issue ID</th>
         ' +
         '
         <th nowrap>Subject</th>
         ' +
         '
         <th nowrap>Issue Category</th>
         ' +
         '
         <th nowrap>Issue Sub Category</th>
         ' +
         '
         <th nowrap>Member</th>
         ' +
         '
         <th nowrap>Group</th>
         ' +
         '
         <th nowrap>Provider</th>
         ' +
         '
         <th nowrap>Broker</th>
         ' +
         '
         <th nowrap>Start Date/Time</th>
         ' +
         '
         <th nowrap>Stop Date/Time</th>
         ' +
         '
         <th nowrap>Outbound Call Time</th>
         ' +
         '
         <th nowrap>Business Area</th>
         ' +
         '
         <th nowrap>Work Type</th>
         ' +
         '
         <th nowrap>Status</th>
         ' +
         '
         <th nowrap>Queue</th>
         ' +
         '
         <th nowrap>Create Date/Time</th>
         ' +
         '
         <th nowrap>Originating User</th>
         ' +
         '
         <th nowrap>Assigned To</th>
         ' +additionalHeaders+
         '
   <thead>' +
      '</tr>' + '
   <tbody>
      ' + '
      <tr>
         ';
         $.each(cases, function () {
         var sourceRow = ($(this).find("OBJECTID").text() === "") ? '
         <td></td>
         ' : '
         <td><img src="contactImages/attachmentImage.png"> </img></td>
         ' ; 
         //if fold type is 'OTHER', then it requires few additional fields
         var additionalHeaderValues = (XmlUtil.selectSingleNodeText(soapGetResultslist.responseXml,"//FOLDTYPE") === "OTHER" ? '
         <td nowrap>' + $(this).find("CLSTNAME").text() +','+$(this).find("CFSTNAME").text()+ '</td>
         '+'
         <td nowrap>' + $(this).find("CPHONE").text() + '</td>
         '+'
         <td nowrap>' + $(this).find("CORGNAM").text() + '</td>
         ' : '') ; 
         issuetable = issuetable + '
      <tr onclick="displayResultslistPopup(this)">
         ' + 
         '
         <td nowrap><input type="checkbox" />&nbsp;</td>
         ' +
         '
         <td nowrap>' + $(this).find("PRTY").text() + '</td>
         ' +
         sourceRow+
         '
         <td nowrap>' + $(this).find("ISSUEID").text() + '</td>
         ' +
         '
         <td nowrap>' + $(this).find("SUBJECT").text() + '</td>
         ' +
         '
         <td nowrap>' + $(this).find("ISSTYP").text() + '</td>
         ' +
         '
         <td nowrap>' + $(this).find("ISSCAT1").text() + '</td>
         ' +
         '
         <td nowrap>' + $(this).find("RELMEM").text() + '</td>
         ' +
         '
         <td nowrap>' + $(this).find("RELGRP").text() + '</td>
         ' +
         '
         <td nowrap>' + $(this).find("RELPRV").text() + '</td>
         ' +
         '
         <td nowrap>' + $(this).find("RELBRK").text() + '</td>
         ' +
         '
         <td nowrap>' + $(this).find("STRTIM").text() + '</td>
         ' +
         '
         <td nowrap>' + $(this).find("STPTIM").text() + '</td>
         ' +
         '
         <td nowrap>' + $(this).find("OBCALLTIME").text() + '</td>
         ' +
         '
         <td nowrap>' + $(this).find("UNITCD").text() + '</td>
         ' +
         '
         <td nowrap>' + $(this).find("WRKTYPE").text() + '</td>
         ' +
         '
         <td nowrap>' + $(this).find("STATCD").text() + '</td>
         ' +
         '
         <td nowrap>' + $(this).find("QUEUECD").text() + '</td>
         ' +
         '
         <td nowrap>' + $(this).find("CRDATTIM").text() + '</td>
         ' +
         '
         <td nowrap>' + $(this).find("ORIGUSERID").text() + '</td>
         ' +
         '
         <td nowrap>' + $(this).find("ASSIGNID").text() + '</td>
         ' +additionalHeaderValues+
         '
      </tr>
      '
      });
      issuetable = issuetable + '
   </tbody>
   ' + '</tr>' + '
</table>
';

这里我的问题是如何将上面创建的动态嵌套html表转换为Jquery表?

0 个答案:

没有答案