CODEWITHSUNDEEP
jquerydatatables
Dean.DePue
Dean.DePue

Reputation: 1013

Change jQuery Datatables dynamically

I have a need to change a DataTable on the fly.

When the page is loaded the DataTable is loaded, then I check a value of the model and based of this I will either hide or show the <table>. However, the Showing X of XX and the page still show up.

My table is:

$("#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
    }]

  }
});

There is a checkbox where the onchange event calls this:

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) {}
  });
}

Upvotes: 1

Views: 351

Answers (1)

davidkonrad
davidkonrad

Reputation: 85528

When a <table> is dataTabled' it is in fact completely regenerated and placed inside a wrapper element, along with the other dataTables elements (such as pagination).

If you have a <table id="example"></table> then the resulting DOM layout will (by default) look like this :

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

So if you want to hide / show a dataTabled' <table>, then target the wrapper instead of the <table> itself :

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

Upvotes: 1

Related Questions