CODEWITHSUNDEEP
htmljquerycss
Shane S
Shane S

Reputation: 2303

jQuery add button to table heads

Using jQuery I have a button Hide Columns option. I want to add a button to each column head in the table. Having added by jQuery is preferred. The Button will hide it's respective column. It appears that the button when appended does not utilize the jQuery to hide column. I have copied and pieced different parts together. Please help me I don't really know this.

$(document).ready(function(){
  $("#btn").click(function(){
    $("th").append('<button class="pull-right btn btn-default btn-condensed hide-column" data-toggle="tooltip" data-placement="bottom" title="Hide Column">H</button>' );
  });
});

$(function() {
  // on init
  $(".table-hideable .hide-col").each(HideColumnIndex);

  // on click
  $('.hide-column').click(HideColumnIndex)

  function HideColumnIndex() {
    var $el = $(this);
    var $cell = $el.closest('th,td')
    var $table = $cell.closest('table')

    // get cell location - https://stackoverflow.com/a/4999018/1366033
    var colIndex = $cell[0].cellIndex + 1;

    // find and hide col index
    $table.find("tbody tr, thead tr")
      .children(":nth-child(" + colIndex + ")")
      .addClass('hide-col');
      
    // show restore footer
    $table.find(".footer-restore-columns").show()
  }

  // restore columns footer
  $(".restore-columns").click(function(e) {
    var $table = $(this).closest('table')
    $table.find(".footer-restore-columns").hide()
    $table.find("th, td")
      .removeClass('hide-col');

  })

  $('[data-toggle="tooltip"]').tooltip({
    trigger: 'hover'
  })

})
body {
  padding: 15px;
}

.table-hideable td,
.table-hideable th {
  width: auto;
  transition: width .5s, margin .5s;
}

.btn-condensed.btn-condensed {
  padding: 0 5px;
  box-shadow: none;
}


/* use class to have a little animation */
.hide-col {
  width: 0px !important;
  height: 0px !important;
  display: block !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<style></style>
</head>
<body>

<button id="btn">Hide Columns option</button>

<table class="table table-condensed table-hover table-bordered table-striped table-hideable">

  <thead>
    <tr>
      <th>
        Controller

      </th>
      <th>
        Action
        <button class="pull-right btn btn-default btn-condensed hide-column" data-toggle="tooltip" data-placement="bottom" title="Hide Column">
          x  
        </button>
      </th>
      <th>
        Type
      </th>

  </thead>
  <tbody>

    <tr>
      <td>Home</td>
      <td>Index</td>
      <td>ActionResult</td>
    </tr>

    <tr>
      <td>Client</td>
      <td>Index</td>
      <td>ActionResult</td>
    </tr>

    <tr>
      <td>Client</td>
      <td>Edit</td>
      <td>ActionResult</td>
    </tr>

  </tbody>
  <tfoot class="footer-restore-columns">
    <tr>
      <th colspan="4"><a class="restore-columns" href="#">Some columns hidden - click to show all</a></th>
    </tr>
  </tfoot>
</table>


</body>
</html>

Upvotes: 1

Views: 131

Answers (1)

ramin
ramin

Reputation: 480

I hope this is you want:

UPDATE:

(function ($) {
  $.fn.clickToggle = function (func1, func2) {
    var funcs = [func1, func2];
    this.data("toggleclicked", 0);
    this.click(function () {
      var data = $(this).data();
      var tc = data.toggleclicked;
      $.proxy(funcs[tc], this)();
      data.toggleclicked = (tc + 1) % 2;
    });
    return this;
  };
})(jQuery);

//NEW FUNCTION:

function addColumnsOption(view, className) {
  if (view == 1) {
    $("#myTable thead tr th").append(
      "<button class='pull-right btn btn-sm btn-danger btn-condensed " +
        className +
        "'><i class='bi bi-trash3'></i></button>"
    );
  } else if (view == 0) {
    $("#myTable thead tr th ." + className + "").remove();
  }
}
  
$(document).ready(function () {

  $("#btn").clickToggle(
    function () {
      addColumnsOption(1, "removeButton"); //1 for show

      let theadThLength = $("#myTable thead th").length;
      for (let i = 0; i < theadThLength; i++) {
        
        $(".removeButton").eq(i).click(function () {
            let tbodyTrLength = $("#myTable tbody tr").length;
            
            for (let t = 0; t < tbodyTrLength; t++) {
              $("#myTable tbody tr").eq(t).find("td").eq(i).hide();
              $("#myTable thead th").eq(i).hide();
              $(".footer-restore-columns").removeClass("d-none");
            }
            
          });
          
      }
    },
    function () {
      addColumnsOption(0, "removeButton"); //0 for hide
    }
  );

  $(".restore-columns").click(function () {
    $("#myTable tbody tr td").show();
    $("#myTable thead th").show();
    $(".footer-restore-columns").addClass("d-none");
  });
  
});
body {
  padding: 15px;
}

.table-hideable td,
.table-hideable th {
  width: auto;
  transition: width .5s, margin .5s;
}

.btn-condensed.btn-condensed {
  padding: 0 5px;
  box-shadow: none;
}


/* use class to have a little animation */
.hide-col {
  width: 0px !important;
  height: 0px !important;
  display: block !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<button class="btn btn-sm btn-primary mb-2" id="btn">Show Columns option</button>

<table id="myTable" class="table table-condensed table-hover table-bordered table-striped table-hideable">

  <thead>
    <tr>
      <th>
        Controller
     
      </th>
      <th>
        Action
  
      </th>
      <th>
        Type
  
      </th>

  </thead>
  <tbody>

    <tr>
      <td>Home</td>
      <td>Index</td>
      <td>ActionResult</td>
    </tr>

    <tr>
      <td>Client</td>
      <td>Index</td>
      <td>ActionResult</td>
    </tr>

    <tr>
      <td>Client</td>
      <td>Edit</td>
      <td>ActionResult</td>
    </tr>

  </tbody>
  <tfoot class="footer-restore-columns d-none">
    <tr>
      <th colspan="4"><a class="restore-columns " href="#">Some columns hidden - click to show all</a></th>
    </tr>
  </tfoot>
</table>

Upvotes: 1

Related Questions