Question

我刚开始使用dataTables所以我希望这将是一个学习机会。

我在学校系统工作，并试图开发一个表格，每年都会显示学生的成绩。我希望管理员能够点击任何一年，并且该表将展开以显示每个学期学生GPA的子表（每学年6学期）。最后，我希望管理员能够点击任何一个术语，并显示学生参加该学期和成绩的实际课程的子表。

我能够成功地获得术语表显示，但我没有运气获得课程表显示。我希望这不是“你不能在桌子里的桌子里筑巢”的情况，但我无法弄清楚如何使它坚持下去，虽然我很确定它与“细节控制”课......

这是一个链接到一个小提琴我放在一起显示我有...任何帮助完成它将非常感谢!!

var iTermGPACounter = 1;

$(document).ready(function() {
  loadDetailsByCourse();
});

function loadDetailsByCourse() {
  var table = $('#msGrades').DataTable({
    data: [{
      "__type": "DMC.WebServices.detailGPA",
      "schoolYearLabel": "14-15",
      "schoolLevel": "02",
      "location": "Highland",
      "grade": "7",
      "gpaValue": "3.119",
      "termGPA": [{
        "term": "1",
        "gpaValue": "3.857",
        "termCourseGrades": [{
          "courseNo": "38929712",
          "sectionNo": "200",
          "courseName": "HEALTH 2",
          "letterGrade": "A+",
          "department": "EL"
        }, {
          "courseNo": "32320711",
          "sectionNo": "10",
          "courseName": "LANG ARTS 2",
          "letterGrade": "A+",
          "department": "EL"
        }, {
          "courseNo": "32720711",
          "sectionNo": "10",
          "courseName": "MATH 2",
          "letterGrade": "B",
          "department": "MA"
        }]
      }, {
        "term": "2",
        "gpaValue": "3.714",
        "termCourseGrades": [{
          "courseNo": "38929712",
          "sectionNo": "200",
          "courseName": "HEALTH 2",
          "letterGrade": "A",
          "department": "EL"
        }, {
          "courseNo": "32320711",
          "sectionNo": "10",
          "courseName": "LANG ARTS 2",
          "letterGrade": "A",
          "department": "EL"
        }, {
          "courseNo": "32720711",
          "sectionNo": "10",
          "courseName": "MATH 2",
          "letterGrade": "A-",
          "department": "MA"
        }]
      }]
    }, {
      "__type": "DMC.WebServices.detailGPA",
      "schoolYearLabel": "15-16",
      "schoolLevel": "02",
      "location": "Highland",
      "grade": "8",
      "gpaValue": "3.123",
      "termGPA": [{
        "term": "1",
        "gpaValue": "3.143",
        "termCourseGrades": [{
          "courseNo": "32320711",
          "sectionNo": "12",
          "courseName": "LANG ARTS 2",
          "letterGrade": "A",
          "department": "EL"
        }, {
          "courseNo": "32720711",
          "sectionNo": "12",
          "courseName": "MATH 2",
          "letterGrade": "D",
          "department": "MA"
        }]
      }]
    }],
    paging: false,
    columns: [{
      className: 'details-control',
      orderable: false,
      data: null,
      defaultContent: '<img src="http://i.imgur.com/SD7Dz.png">'
    }, {
      data: "schoolYearLabel"
    }, {
      data: "grade"
    }, {
      data: "location"
    }, {
      data: "gpaValue"
    }],
    order: [
      [1, 'asc']
    ]
  });

  // Add event listener for opening and closing details
  $('#msGrades 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.hide();
      tr.removeClass('shown');
    } else {
      // Open this row
      row.child(formatTermGPA(iTermGPACounter)).show();
      tr.addClass('shown');

      var oInnerTable = $('#termGPA_' + iTermGPACounter).dataTable({
        data: row.data().termGPA,
        paging: false,
        searching: false,
        columns: [{
          className: 'details-control',
          orderable: false,
          data: null,
          defaultContent: '<img src="http://i.imgur.com/SD7Dz.png">'
        }, {
          data: "term"
        }, {
          data: "gpaValue"
        }],
        order: [
          [1, 'asc']
        ]
      });

      // Add event listener for opening and closing details
      $('#termGPA_' + iTermGPACounter + ' 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.hide();
          tr.removeClass('shown');
        } else {
          // Open this row
          row.child(formatTermCourseGrades()).show();
          tr.addClass('shown');
        }
      });

      iTermGPACounter += 1;
    }
  });
}

function formatTermGPA(table_id) {
  return '<table class="table table-striped" id="termGPA_' + table_id + '">' +
    '<thead><tr><th></th><th>Term #</th><th>Term GPA</th></tr></thead></table>';
}

function formatTermCourseGrades() {
  return '<table class="table table-striped" id="termCourseGrades">' +
    '<thead><tr><th>Course Name</th><th>Letter Grade</th></tr></thead><tr><td>Math</td><td>B+</td></tr></table>';
}

Answer 1

我也在DataTables论坛中发布了这个问题并得到了答案......简而言之，作为一个起点，我从DataTables示例中复制了一个包含单个子表的表。当我添加第二个子表时，我没有考虑重命名变量，因此它不断回调父表:(。下面是最终结果的工作小提琴：

working fiddle

function loadDetailsByCourse() {
$.ajax({
    type: "POST",
    contentType: "application/json; charset=UTF-8",
    url: "WebServices/myStudentProfile.asmx/getDetailsByCourse",
    data: JSON.stringify({ pageID: pageID }),
    dataType: "json",
    cache: false,
    success: function (response) {
        gpa = response.d;

        var yearTable = $('#msGrades').DataTable({
            paging: false,
            data: gpa,
            columns: [
                {
                    className: 'term-details-control openClose',
                    orderable: false,
                    data: null,
                    defaultContent: ''
                },
                { data: "schoolYearLabel" },
                { data: "grade" },
                { data: "location" },
                { data: "gpaValue" }
            ],
            order: [[1, 'asc']]
        });

        // Add event listener for opening and closing details
        $('#msGrades tbody').on('click', 'td.term-details-control', function () {
            var tr = $(this).closest('tr');
            var row = yearTable.row(tr);

            if (row.child.isShown()) {
                // This row is already open - close it
                row.child.hide();
                tr.removeClass('shown');
            }
            else {
                // Open this row
                row.child(formatTermGPA(iTermGPACounter)).show();
                tr.addClass('shown');

                var termTable = $('#termGPA_' + iTermGPACounter).DataTable({
                    data: row.data().termGPA,
                    paging: false,
                    searching: false,
                    columns: [
                        {
                            className: 'course-details-control openClose',
                            orderable: false,
                            data: null,
                            defaultContent: ''
                        },
                        { data: "term" },
                        { data: "gpaValue" }
                    ],
                    order: [[1, 'asc']]
                });

                // Add event listener for opening and closing details
                $('#termGPA_' + iTermGPACounter + ' tbody').on('click', 'td.course-details-control', function () {
                    var tr = $(this).closest('tr');
                    var closestTable = tr.closest("table");
                    var row = closestTable.DataTable().row(tr);

                    if (row.child.isShown()) {
                        // This row is already open - close it
                        row.child.hide();
                        tr.removeClass('shown');
                    }
                    else {
                        // Open this row
                        row.child(formatTermCourseGrades(iCourseCounter)).show();
                        tr.addClass('shown');

                        var courseTable = $('#courseGrades_' + iCourseCounter).DataTable({
                            data: row.data().termCourseGrades,
                            paging: false,
                            searching: false,
                            columns: [
                                { data: "courseName" },
                                { data: "letterGrade" }
                            ],
                            order: [[1, 'asc']]
                        });

                    }

                    iCourseCounter += 1;
                });

                iTermGPACounter += 1;
            }
        });
    }
})
}

function formatTermGPA(table_id) {
    return '<table class="table table-striped" id="termGPA_' + table_id + '">' +
    '<thead><tr><th></th><th>Term #</th><th>Term GPA</th></tr></thead></table>';
}

function formatTermCourseGrades(table_id) {
    return '<table class="table table-striped" id="courseGrades_' + table_id + '">' +
    '<thead><tr><th>Course Name</th><th>Letter Grade</th></tr></thead></table>';
}

想要使用DataTables在表格中嵌套表格......在表格中......可以这样做吗？

1 个答案: