Tất cả bài viết | Bootstrap
Hướng dẫn cách tạo chức năng lọc cho bảng bằng Bootstrap
Trong bài học thiết kế web này các Bạn sẽ được Hướng dẫn cách tạo chức năng lọc cho bảng bằng Bootstrap
Bước 1: Tạo cấu trúc HTML
Cách tạo chức năng lọc cho bảng bằng Bootstrap
Bước 2: Định dạng CSS
body { font-family: 'Open Sans', sans-serif; color: #353535; } .panel { border: 1px solid #ddd; background-color: #fcfcfc; } .panel .btn-group { margin: 15px 0 30px; } .panel .btn-group .btn { transition: background-color .3s ease; } .table-filter { background-color: #fff; border-bottom: 1px solid #eee; } .table-filter tbody tr:hover { cursor: pointer; background-color: #eee; } .table-filter tbody tr td { padding: 10px; vertical-align: middle; border-top-color: #eee; } .table-filter tbody tr.selected td { background-color: #eee; } .table-filter tr td:first-child { width: 38px; } .table-filter tr td:nth-child(2) { width: 35px; } .table-filter .media-photo { width: 35px; } .table-filter .media-body { display: block; width:auto; } .table-filter .media-meta { font-size: 11px; color: #999; } .table-filter .media .title { color: #2BBCDE; font-size: 14px; font-weight: bold; line-height: normal; margin: 0; } .table-filter .media .title span { font-size: .8em; margin-right: 20px; } .table-filter .media .title span.style1 { color: #5cb85c; } .table-filter .media .title span.style2 { color: #f0ad4e; } .table-filter .media .title span.style3 { color: #d9534f; } .table-filter .media .summary { font-size: 14px; }
Bước 3: Gọi thư viện Bootstrap và Font awesome
Bước 4: Gọi thư viện JQUERY
Bước 5: tạo hiệu ứng bằng JQUERY
$(document).ready(function () { $('.btn-filter').on('click', function () { var $target = $(this).data('target'); if ($target != 'all') { $('.table tr').css('display', 'none'); $('.table tr[data-status="' + $target + '"]').fadeIn('slow'); } else { $('.table tr').css('display', 'none').fadeIn('slow'); } }); });
Bootstrap Xem (4117) Học thiết kế web giá rẻ