具有主从关系的数据表 ajax xml 显示

Question

通过那个 jQ bootstrap 4 数据表网格（datatable.net），我希望以表格形式显示以下 xml 文件：<?xml version="1.0" encoding="UTF-8"?> <persns>   <prsn>   <fname>Smith</fname>  <!-- first name-->  <lname>Milton</lname> <!-- last name -->   <age>44</age>   <e-mail>[e-mail]</e-mail>   <phnmbr>3568236712</phnmbr>  <addrss>5th summer st, mntb</addrss>  <city>Portland</city> </prsn> <prsn>   <fname>Ken</fname>   <lname>Jackson</lname>   <age>37</age>  <e-mail>[e-mail]</e-mail>   <phnmbr>2638762076</phnmbr>   <addrss>19th Penfield ave, brtcl</addrss>  <city>Kelowna</city> </prsn> <prsn>   <fname>Susan</fname>  <lname>Arkland</lname>   <age>48</age>  <e-mail>[e-mail]</e-mail>  <phnmbr>50834219704</phnmbr>  <addrss>34th Mansfield st, sgtp</addrss>  <city>Raleigh</city> </prsn> <prsn>  <fname>Patsy</fname>   <lname>Brighton</lname>  <age>38</age>  <e-mail>[e-mail]</e-mail>   <phnmbr>814522096358</phnmbr>   <addrss>12th Peel st, pnslv</addrss>  <city>Philadelphia</city> </prsn> <prsn>  <fname>John</fname>  <lname>Torg</lname>  <age>54</age>  <e-mail>[e-mail]</e-mail>   <phnmbr>042197327784</phnmbr>  <addrss>27th north st, cnda</addrss>  <city>Penticton</city></prsn>但具有主详细信息功能，如以下小提琴链接所示：https://jsfiddle.net/nnb97rh9/3/只有到那个小提琴才有.json数据！（我需要 .xml 显示）相应的（几乎是功能性的）.js （通过主表我只想显示以下表标题：fname、lname、age、city 而其余部分将被隐藏

Answer 1

代码存在多个问题，无法描述。以下是更正后的代码。

请注意我使用 jsFiddle 机制来检索 XML 文件，替换为您自己的。

(function () {

   function format(d) {

      return '<table cellpadding="3" cellspacing="0" border="0" style="padding-left: 40 px ">' +

         '<tr>' + '<td>e-mail addrss</td>' +

         '<td>' + d['e-mail'] + '</td>' + '</tr>' +

         '<tr>' + '<td>phn nmber</td>' +

         '<td>' + d['phnmbr'] + '</td>' + '</tr>' +

         '<tr>' + '<td>address</td>' +

         '<td>' + d['addrss'] + '</td>' + '</tr>' +

         '</table>';

   }

   var prstbl = $("#prsns").DataTable({

      columns: [

         {

            "class": 'details-control',

            "orderable": false,

            "data": null,

            "defaultContent": ''

         },

         {

            data: "fname"

         },

         {

            data: "lname"

         },

         {

            data: "age"

         },

         {

            data: "city"

         },

         {

            data: "e-mail",

            "visible": false

         },

         {

            data: "phnmbr",

            "visible": false

         },

         {

            data: "addrss",

            "visible": false

         }

      ]

   });

   $.ajax({

      type: "POST",

      url: "/echo/xml",

      data: {

            xml: '<?xml version="1.0" encoding="UTF-8" ?><persns>'

            + '<prsn><fname>Smith</fname><lname>Milton</lname><age>44</age><e-mail>[e-mail]</e-mail><phnmbr>3568236712</phnmbr><addrss>5th summer st, mntb</addrss><city>Portland</city></prsn>'

            + '<prsn><fname>Ken</fname><lname>Jackson</lname><age>37</age><e-mail>[e-mail]</e-mail><phnmbr>2638762076</phnmbr><addrss>19th Penfield ave, brtcl</addrss><city>Kelowna</city></prsn>'

            + '<prsn><fname>Susan</fname><lname>Arkland</lname><age>48</age><e-mail>[e-mail]</e-mail><phnmbr>50834219704</phnmbr><addrss>34th Mansfield st, sgtp</addrss><city>Raleigh</city></prsn>'

            + '<prsn><fname>Patsy</fname><lname>Brighton</lname><age>38</age><e-mail>[e-mail]</e-mail><phnmbr>814522096358</phnmbr><addrss>12th Peel st, pnslv</addrss><city>Philadelphia</city></prsn>'

            + '<prsn><fname>John</fname><lname>Torg</lname><age>54</age><e-mail>[e-mail]</e-mail><phnmbr>042197327784</phnmbr><addrss>27th north st, cnda</addrss><city>Penticton</city></prsn>'

        + '</persns>',

      },

      dataType: 'xml',

      success: function (xml) {

         var prsns = $(xml).find("prsn");

         prsns.each(function (idx, prs) {

            var rowData = [];

            $(prs).children().each(function (j, chdnd) {

               rowData[$(chdnd).get(0).tagName] = $(chdnd).text();

            });

                prstbl.row.add(rowData);

        });

        prstbl.draw();       

      }

   });

    $('#prsns tbody').on('click', 'td.details-control', function () {

      var tr = $(this).closest('tr');

      var row = prstbl.row(tr);

      // if the row is already expanded, collapse it

      if (row.child.isShown())  {

            row.child.hide();

            tr.removeClass('shown');

        // if collapsed row, expand it             

      } else {

         row.child(format(row.data())).show();

         tr.addClass('shown');

      }

   });

})();

有关代码和演示，请参阅更新的示例。