Bootstrap一款简单的表格筛选设计页面

今天给大家介绍一款表格选择功能页面设计,通过鼠标勾选后,上面的标签页可以进行筛选,页面设计简洁美观实用,推荐给大家,希望能够对大家的设计有所帮助。

HTML代码:(全屏预览效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
<div class="container">
    <div class="row">

        <section class="content">
            <h1>Table Filter</h1>
            <div class="col-md-8 col-md-offset-2">
                <div class="panel panel-default">
                    <div class="panel-body">
                        <div class="pull-right">
                            <div class="btn-group">
                                <button type="button" class="btn btn-success btn-filter" data-target="pagado">Pagado</button>
                                <button type="button" class="btn btn-warning btn-filter" data-target="pendiente">Pendiente</button>
                                <button type="button" class="btn btn-danger btn-filter" data-target="cancelado">Cancelado</button>
                                <button type="button" class="btn btn-default btn-filter" data-target="all">Todos</button>
                            </div>
                        </div>
                        <div class="table-container">
                            <table class="table table-filter">
                                <tbody>
                                    <tr data-status="pagado">
                                        <td>
                                            <div class="ckbox">
                                                <input type="checkbox" id="checkbox1">
                                                <label for="checkbox1"></label>
                                            </div>
                                        </td>
                                        <td>
                                            <a href="javascript:;" class="star">
                                                <i class="glyphicon glyphicon-star"></i>
                                            </a>
                                        </td>
                                        <td>
                                            <div class="media">
                                                <a href="#" class="pull-left">
                                                    <img src="https://s3.amazonaws.com/uifaces/faces/twitter/fffabs/128.jpg" class="media-photo">
                                                </a>
                                                <div class="media-body">
                                                    <span class="media-meta pull-right">Febrero 13, 2016</span>
                                                    <h4 class="title">
                                                        Lorem Impsum
                                                        <span class="pull-right pagado">(Pagado)</span>
                                                    </h4>
                                                    <p class="summary">Ut enim ad minim veniam, quis nostrud exercitation...</p>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr data-status="pendiente">
                                        <td>
                                            <div class="ckbox">
                                                <input type="checkbox" id="checkbox3">
                                                <label for="checkbox3"></label>
                                            </div>
                                        </td>
                                        <td>
                                            <a href="javascript:;" class="star">
                                                <i class="glyphicon glyphicon-star"></i>
                                            </a>
                                        </td>
                                        <td>
                                            <div class="media">
                                                <a href="#" class="pull-left">
                                                    <img src="https://s3.amazonaws.com/uifaces/faces/twitter/fffabs/128.jpg" class="media-photo">
                                                </a>
                                                <div class="media-body">
                                                    <span class="media-meta pull-right">Febrero 13, 2016</span>
                                                    <h4 class="title">
                                                        Lorem Impsum
                                                        <span class="pull-right pendiente">(Pendiente)</span>
                                                    </h4>
                                                    <p class="summary">Ut enim ad minim veniam, quis nostrud exercitation...</p>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr data-status="cancelado">
                                        <td>
                                            <div class="ckbox">
                                                <input type="checkbox" id="checkbox2">
                                                <label for="checkbox2"></label>
                                            </div>
                                        </td>
                                        <td>
                                            <a href="javascript:;" class="star">
                                                <i class="glyphicon glyphicon-star"></i>
                                            </a>
                                        </td>
                                        <td>
                                            <div class="media">
                                                <a href="#" class="pull-left">
                                                    <img src="https://s3.amazonaws.com/uifaces/faces/twitter/fffabs/128.jpg" class="media-photo">
                                                </a>
                                                <div class="media-body">
                                                    <span class="media-meta pull-right">Febrero 13, 2016</span>
                                                    <h4 class="title">
                                                        Lorem Impsum
                                                        <span class="pull-right cancelado">(Cancelado)</span>
                                                    </h4>
                                                    <p class="summary">Ut enim ad minim veniam, quis nostrud exercitation...</p>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr data-status="pagado" class="selected">
                                        <td>
                                            <div class="ckbox">
                                                <input type="checkbox" id="checkbox4" checked>
                                                <label for="checkbox4"></label>
                                            </div>
                                        </td>
                                        <td>
                                            <a href="javascript:;" class="star star-checked">
                                                <i class="glyphicon glyphicon-star"></i>
                                            </a>
                                        </td>
                                        <td>
                                            <div class="media">
                                                <a href="#" class="pull-left">
                                                    <img src="https://s3.amazonaws.com/uifaces/faces/twitter/fffabs/128.jpg" class="media-photo">
                                                </a>
                                                <div class="media-body">
                                                    <span class="media-meta pull-right">Febrero 13, 2016</span>
                                                    <h4 class="title">
                                                        Lorem Impsum
                                                        <span class="pull-right pagado">(Pagado)</span>
                                                    </h4>
                                                    <p class="summary">Ut enim ad minim veniam, quis nostrud exercitation...</p>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr data-status="pendiente">
                                        <td>
                                            <div class="ckbox">
                                                <input type="checkbox" id="checkbox5">
                                                <label for="checkbox5"></label>
                                            </div>
                                        </td>
                                        <td>
                                            <a href="javascript:;" class="star">
                                                <i class="glyphicon glyphicon-star"></i>
                                            </a>
                                        </td>
                                        <td>
                                            <div class="media">
                                                <a href="#" class="pull-left">
                                                    <img src="https://s3.amazonaws.com/uifaces/faces/twitter/fffabs/128.jpg" class="media-photo">
                                                </a>
                                                <div class="media-body">
                                                    <span class="media-meta pull-right">Febrero 13, 2016</span>
                                                    <h4 class="title">
                                                        Lorem Impsum
                                                        <span class="pull-right pendiente">(Pendiente)</span>
                                                    </h4>
                                                    <p class="summary">Ut enim ad minim veniam, quis nostrud exercitation...</p>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="content-footer">
                    <p>
                        Page © - 2016 <br>
                        Powered By <a href="https://www.facebook.com/tavo.qiqe.lucero" target="_blank">TavoQiqe</a>
                    </p>
                </div>
            </div>
        </section>
       
    </div>
</div>

CSS代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
/*    --------------------------------------------------
    :: General
    -------------------------------------------------- */

body {
    font-family: 'Open Sans', sans-serif;
    color: #353535;
}
.content h1 {
    text-align: center;
}
.content .content-footer p {
    color: #6d6d6d;
    font-size: 12px;
    text-align: center;
}
.content .content-footer p a {
    color: inherit;
    font-weight: bold;
}

/*  --------------------------------------------------
    :: Table Filter
    -------------------------------------------------- */

.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;
}
.ckbox {
    position: relative;
}
.ckbox input[type="checkbox"] {
    opacity: 0;
}
.ckbox label {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.ckbox label:before {
    content: '';
    top: 1px;
    left: 0;
    width: 18px;
    height: 18px;
    display: block;
    position: absolute;
    border-radius: 2px;
    border: 1px solid #bbb;
    background-color: #fff;
}
.ckbox input[type="checkbox"]:checked + label:before {
    border-color: #2BBCDE;
    background-color: #2BBCDE;
}
.ckbox input[type="checkbox"]:checked + label:after {
    top: 3px;
    left: 3.5px;
    content: '\e013';
    color: #fff;
    font-size: 11px;
    font-family: 'Glyphicons Halflings';
    position: absolute;
}
.table-filter .star {
    color: #ccc;
    text-align: center;
    display: block;
}
.table-filter .star.star-checked {
    color: #F0AD4E;
}
.table-filter .star:hover {
    color: #ccc;
}
.table-filter .star.star-checked:hover {
    color: #F0AD4E;
}
.table-filter .media-photo {
    width: 35px;
}
.table-filter .media-body {
    display: block;
    /* Had to use this style to force the div to expand (wasn't necessary with my bootstrap version 3.3.6) */
}
.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.pagado {
    color: #5cb85c;
}
.table-filter .media .title span.pendiente {
    color: #f0ad4e;
}
.table-filter .media .title span.cancelado {
    color: #d9534f;
}
.table-filter .media .summary {
    font-size: 14px;
}

JS代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$(document).ready(function () {

    $('.star').on('click', function () {
      $(this).toggleClass('star-checked');
    });

    $('.ckbox label').on('click', function () {
      $(this).parents('tr').toggleClass('selected');
    });

    $('.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学习网 » Bootstrap一款简单的表格筛选设计页面
分享到:
赞(0)

评论抢沙发

评论前必须登录!