Question

我需要动态更改DataTable。

当加载页面时，加载了DataTable，然后我检查模型的值，基于此，我将隐藏或显示<table>。但是，显示XX的X 和页面仍会显示。

有没有办法隐藏这些？
同样在页面上，我有checkbox来显示或隐藏表格。我该如何动态地做到这一点？我尝试了 info 路由，但要么无法正常工作，要么我无法重新初始化表错误。

我的表是：

$("#tblSelectedUserRoles").dataTable({
  sAjaxSource: '@Url.Action("GetAllStepsUser")?' + "userId=" + $("#txtSelectedUserId").val(),
  bJQueryUI: true,
  dom: 'T<"clear">rtip',
  bAutoWidth: false,
  "aoColumns": [{
    "sWidth": "1%",
    sClass: "smallFonts"
  }, {
    "sWidth": "1%",
    sClass: "smallFonts"
  }, {
    "sWidth": "14%",
    sClass: "smallFonts"
  }, {
    "sWidth": "40%",
    sClass: "smallFonts"
  }, {
    "sWidth": "20%",
    sClass: "smallFonts"
  }, {
    "sWidth": "15%",
    sClass: "smallFonts",
    "sName": "UserId",
    "mRender": function(data, type, row) {
      var chk = row[5] == 'True' ? ' checked="true" ' : ' ';
      var chk1;
      if (chk === ' ')
        chk1 = "false";
      else
        chk1 = "true";
      return "<input type='checkbox'" + chk + " id='chkuar" + row[0] + "' onchange=approved('" + row[0] + "','" + row[1] + "'," + chk1 + "); >";
    }
  }],
  tableTools: {
    "sSwfPath": "../../Scripts/swf/copy_csv_xls_pdf.swf", //'<c:url value="../../scripts/swf/copy_csv_xls_pdf.swf"/>', //"//cdn.datatables.net/tabletools/2.2.2/swf/copy_csv_xls_pdf.swf", // 
    "aButtons": [{
      "sExtends": "print",
      "bShowAll": true
    }]

  }
});

onchange事件调用此复选框：

function changeStep() {
  var userId = $("#txtSelectedUserId").val();
  var val;
  if ($("#chkStep").is(':checked')) {
    val = 1;

    $("#tblSelectedUserRoles").show();
  } else {
    val = 0;

    $("#tblSelectedUserRoles").hide();
  }
  $.ajax({
    type: 'POST',
    data: {
      userId: userId,
      chk: val
    },
    url: '@Url.Action("UserStepAuthority")',
    success: function(data) {}
  });
}

Answer 1

当<table>是dataTabled＆＃39;它实际上是完全重新生成的，并与其他dataTables元素（如分页）一起放在包装元素中。

如果您有<table id="example"></table>，那么生成的DOM布局（默认情况下）将如下所示：

#example_wrapper
    #example_length     >   length menu
    #example_filter     >   search box
    #example            >   the table itself
    #example_info       >   table information
    #example_paginate   >   pagination buttons

因此，如果你想隐藏/显示dataTabled＆＃39; <table>，然后定位包装器而不是<table>本身：

$('#example_wrapper').hide();

动态更改jQuery数据表

1 个答案: