Bootstrap table footer hide and show

Question

I would like to show and hide the footer of a bootstrap table based on some conditions.

How can I show and hide footer using a javascript or Jquery event?

<table data-toggle="table" data-url="/gh/get/response.json/wenzhixin/bootstrap-table/tree/master/docs/data/data1/" data-show-footer="true">

How can I set the value of data-show-footer="true" using Javascript ?

Answer 1

Giving id or class to a table is a must. Read Me . Then you can do something like this:

console.log(document.getElementById("table").getAttribute('data-show-footer')); //true

For all table elements you need to use class:

var len = document.getElementsByClassName("table");
for (let i=0; i< len.length;i++){
console.log(document.getElementsByClassName("table")[i].getAttribute('data-show-footer'));
}

Now you are able to access all elements JSfiddle
Since you now know how to get the value it should be easy for you to construct if statement, so if() then document.getElementsByClassName("table")[i].setAttribute('data-show-footer',false);

Answer 2

give id to the table eg id="tbl" and in jquery you can do like

if(condition)
{
   $("#tbl").attr("data-show-footer", "true");
}
else
{
   $("#tbl").attr("data-show-footer", "false");
}

here is the example of implementation http://jsfiddle.net/L6tm1tt3/166/