Change jQuery Datatables dynamically

Question

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.

Is there any way to hide these?
Also on the page I have a checkbox to either show or hide the table. How do I do that dynamically? I tried the info route but that either didn't work, or I got a can't reinitialize table error.

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

You really need to show your code, what you are actually doing. We are not telepaths, sad but true - take for example the statement "I tried the "info" route but that didn't work" - what would you guess yourself could make out of this, if you read something similar in another question, without further explanation? :) — davidkonrad
– davidkonrad, Commented Feb 3, 2016 at 13:53
@davidkonrad - added some code. The problem is that when the checkbox is unset, the table hides just fine, but the "Showing" and "Page" line is still there. How do you hide that? — Dean.DePue
– Dean.DePue, Commented Feb 3, 2016 at 14:22
@Dean.DePue - use $("#tblSelectedUserRoles_wrapper").hide() instead - the table is along with the other injected controls placed in a wrapper, thats why the table is hidden but some of the controls still is visible. If you want to hide a dataTabled' table, hide the wrapper - not the table. — davidkonrad
– davidkonrad, Commented Feb 3, 2016 at 14:30
@davidkonrad - excellent! That worked. GIve me an answer so I can give your credit. I did not know about the wrapper. — Dean.DePue
– Dean.DePue, Commented Feb 3, 2016 at 14:35

davidkonrad · Accepted Answer · 2016-02-03 15:02:59Z

1

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();

answered Feb 3, 2016 at 15:02

davidkonrad

85.7k17 gold badges211 silver badges273 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Change jQuery Datatables dynamically

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related