এখানে আরও কিছু সম্পূর্ণরূপে বৈশিষ্ট্যযুক্ত উত্তর যা প্রতি কলাম ভিত্তিতে কিছু ব্যবহারকারীর ইন্টারঅ্যাকশন সরবরাহ করে। যদি এটি একটি গতিশীল অভিজ্ঞতা হতে চলেছে তবে প্রতিটি কলামে ক্লিকযোগ্য টগল থাকা দরকার যা কলামটি আড়াল করার দক্ষতা এবং তারপরে পূর্বে লুকানো কলামগুলি পুনরুদ্ধার করার উপায় বলে indicates
এটি জাভাস্ক্রিপ্টে এর মতো দেখতে লাগবে:
$('.hide-column').click(function(e){
var $btn = $(this);
var $cell = $btn.closest('th,td')
var $table = $btn.closest('table')
// get cell location - https://stackoverflow.com/a/4999018/1366033
var cellIndex = $cell[0].cellIndex + 1;
$table.find(".show-column-footer").show()
$table.find("tbody tr, thead tr")
.children(":nth-child("+cellIndex+")")
.hide()
})
$(".show-column-footer").click(function(e) {
var $table = $(this).closest('table')
$table.find(".show-column-footer").hide()
$table.find("th, td").show()
})
এটি সমর্থন করার জন্য, আমরা টেবিলটিতে কিছু মার্কআপ যুক্ত করব। প্রতিটি কলামের শিরোনামে, আমরা ক্লিকযোগ্য কোনও জিনিসের ভিজ্যুয়াল ইন্ডিকেটর সরবরাহ করতে এর মতো কিছু যুক্ত করতে পারি
<button class="pull-right btn btn-default btn-condensed hide-column"
data-toggle="tooltip" data-placement="bottom" title="Hide Column">
<i class="fa fa-eye-slash"></i>
</button>
আমরা ব্যবহারকারীর টেবিল ফুটারের একটি লিঙ্কের মাধ্যমে কলামগুলি পুনরুদ্ধার করার অনুমতি দেব। যদি এটি ডিফল্টরূপে অবিচল থাকে না, তবে এটিতে শিরোনামে গতিশীলভাবে টগল করা টেবিলের চারপাশে ঝাঁকুনি দিতে পারে, তবে আপনি এটি যে কোনও জায়গায় চান তা সত্যিই রাখতে পারেন:
<tfoot class="show-column-footer">
<tr>
<th colspan="4"><a class="show-column" href="#">Some columns hidden - click to show all</a></th>
</tr>
</tfoot>
এটিই মূল কার্যকারিতা। আরও কয়েকটি জিনিস ভেসে উঠার সাথে নীচে একটি ডেমো এখানে দেওয়া হয়েছে। আপনি এর উদ্দেশ্যটি স্পষ্ট করতে বাটনটিতে একটি টুলটিপ যোগ করতে পারেন, টেবিল শিরোনামটিতে কিছুটা আরও জৈবিকভাবে বোতামটি স্টাইল করুন এবং কিছুটা (কিছুটা উইঙ্কি) সিএসএস অ্যানিমেশন যুক্ত করার জন্য কলামটির প্রস্থটি ভেঙে কিছুটা কমিয়ে আনতে পারেন লাফানে।
$(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;
}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.7/paper/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<table class="table table-condensed table-hover table-bordered table-striped table-hideable">
<thead>
<tr>
<th>
Controller
<button class="pull-right btn btn-default btn-condensed hide-column" data-toggle="tooltip" data-placement="bottom" title="Hide Column">
<i class="fa fa-eye-slash"></i>
</button>
</th>
<th class="hide-col">
Action
<button class="pull-right btn btn-default btn-condensed hide-column" data-toggle="tooltip" data-placement="bottom" title="Hide Column">
<i class="fa fa-eye-slash"></i>
</button>
</th>
<th>
Type
<button class="pull-right btn btn-default btn-condensed hide-column" data-toggle="tooltip" data-placement="bottom" title="Hide Column">
<i class="fa fa-eye-slash"></i>
</button>
</th>
<th>
Attributes
<button class="pull-right btn btn-default btn-condensed hide-column" data-toggle="tooltip" data-placement="bottom" title="Hide Column">
<i class="fa fa-eye-slash"></i>
</button>
</th>
</thead>
<tbody>
<tr>
<td>Home</td>
<td>Index</td>
<td>ActionResult</td>
<td>Authorize</td>
</tr>
<tr>
<td>Client</td>
<td>Index</td>
<td>ActionResult</td>
<td>Authorize</td>
</tr>
<tr>
<td>Client</td>
<td>Edit</td>
<td>ActionResult</td>
<td>Authorize</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>