Question

现在大部分时间都在使用这些，并努力让任何样本正常工作。

使用Datatables.net。我们想要实现的是嵌套相关表。即只需点击加号，即可显示更多信息。唯一的区别是我们需要使用ajax从数据库中提取此信息。 http://datatables.net/blog/Drill-down_rows

到目前为止我们所拥有的： -

$("#IPLoader").show();
              var url = "/user/" + userid+ "/jqGetUser";
              var sImageUrl = "../../Images/General/";


              $.getJSON(url, null, function (data) {
                  $("#IPLoader").hide();
                   oTable = $('#example').dataTable({
                      "oLanguage": {
                          "sProcessing": "<img src='~/Images/General/AjaxLoader.gif'>"
                      },
                      "bProcessing": true,
                      "bserverSide": true,
                      "bFilter": false,
                      "aaData": data.aaData,
                      "aoColumns": [
                          {
                              "mDataProp": null,
                              "sClass": "control center",
                              "sDefaultContent": '<img src="' + sImageUrl + 'details_open.png' + '">'
                          },
                          { "mDataProp": "UserID" },
                          { "mDataProp": "UserFirstName" },
                          { "mDataProp": "UserSurname" },
                          { "mDataProp": "UserAge" }
                      ]

                  });

              });

这很好用，表格显示为应该。

接下来我们需要做的是检测加号的点击

$(document).on('click','#example td.control',function () {
                      var nTr = this.parentNode;
                      var i = $.inArray(nTr, anOpen);
                      if (i === -1) {
                      $('img', this).attr('src', sImageUrl + "details_close.png");
                      var oData = oTable.fnGetData(nTr);
                      var nDetailsRow = oTable.fnOpen(nTr, fnFormatDetails(oTable, nTr), 'details');

                  getdate(oData.Prvsp_Refno);
                      $('div.innerDetails', nDetailsRow).slideDown();

                      anOpen.push(nTr);

                  }
                  else {

                      $('img', this).attr( 'src', sImageUrl+"details_open.png" );
                      oTable.fnClose( nTr );
                      anOpen.splice( i, 1 );
                  } 
              });



  function fnFormatDetails(oTable, nTr) {
          sOut =
                  '<div class="container pull-right span12" style="margin-right: 145px;">' +
                      '<div class="detailTxn">' +
                          '<table id="DetailTrans">' +
                              '<thead>' +
                                  '<tr class="tableHeader">' +
                                      '<th> Date / Time</th>' + // Hide the columns
                                      '<th>Details</th>' +
                                  '</tr>' +
                              '</thead>' +
                              '<tbody></tbody>' +
                          '</table>' +
                      '</div>' +
                  '</div>';
          return sOut;







          function getdate(userID) {

          $.getJSON("/user/" + $("#id").val() + "/jqgetuseraddress/" + userID, null, function (data) {
              $("#IPLoader").hide();
              oTable = $('#DetailTrans').dataTable({
                  "oLanguage": {
                      "sProcessing": "<img src='~/Images/General/AjaxLoader.gif'>"
                  },
                  "bProcessing": true,
                  "bserverSide": true,
                  "bFilter": false,
                  "bSort": false,
                  "bFilter": false,
                  "bPaginate": false,
                  "aaData": data.aaData,
              });

          });
}

这似乎适用于第一次点击，然后我们被提出 “无法重新初始化数据表”我猜这是因为它使用相同的数据表ID

我们是在正确的道路上，还是有正确的方法来做到这一点？

Answer 1

确定，我们刚加入

“bRetrieve”：是的，

这一切似乎都正常，

如果有人能确认这是否是正确的方法，还是会感激的吗？

数据表嵌套（相关）行

1 个答案: