jQuery 可排序的响应式表格

Sorta sortable and super responsiveible tabling

jQuery, BootStrap

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 1935
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

/**
 * jQuery sorTable.js
 *
 * Version: 0.1.0
 * Sources: https://github.com/miriti/jquery.sortable.js
 *
 * License:
 * --------
 * Copyright © 2014 Michael Miriti, Poly Ploy
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to
 * deal in the Software without restriction, including without limitation the
 * rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
 * sell copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in
 * all copies or substantial portions of the Software.
 *
 * The Software is provided "as is", without warranty of any kind, express or
 * implied, including but not limited to the warranties of merchantability,
 * fitness for a particular purpose and noninfringement. In no event shall the
 * authors or copyright holders be liable for any claim, damages or other
 * liability, whether in an action of contract, tort or otherwise, arising
 * from, out of or in connection with the software or the use or other dealings
 * in the Software.
 */
(function($) {
    $.fn.sortable = function() {
        var tbody = this.find('tbody[data-body=true]');
        var thead = $(this).find('thead[data-header=true] th[data-sort-column=true]');

function sort_by_column(col_num, desc) {

function extract_value(tr) {
                var td = $(tr).find('td')[col_num];

var sort_value = $(td).html();

var data_sort_value = $(td).attr('data-sort-value');
                if (typeof data_sort_value !== "undefined") {
                    sort_value = data_sort_value;
                }

return sort_value;
            }

var allTrs = tbody.find('tr');

tbody.find('tr').remove();

allTrs.sort(function(tr_a, tr_b) {
                var aval = extract_value(tr_a);
                var bval = extract_value(tr_b);

if (isNaN(aval) || isNaN(bval)) {
                    return aval.localeCompare(bval);
                } else {
                    aval = parseFloat(aval);
                    bval = parseFloat(bval);
                    return (aval > bval ? 1 : (bval > aval) ? -1 : 0);
                }
            });

if (desc) {
                for (var i = allTrs.length - 1; i >= 0; i--) {
                    $(allTrs[i]).appendTo(tbody);
                };
            } else {
                for (var i = 0; i < allTrs.length; i++) {
                    $(allTrs[i]).appendTo(tbody);
                };
            }
        }

$.each(thead, function(i, th) {
            var linkText = $(th).html();
            $(th).html('');

var reverse = false;

$('<a/>', {
                //'text': linkText + ' ',
                'html': linkText + '<span class=\"icon toggle\"></span>',
                'data-base-text': linkText,
                'href': '#',
                'class': 'sortable-header-link',
                'click': function() {
                    sort_by_column(i, reverse);
                    reverse = !reverse;

$.each($('a.sortable-header-link'), function(i, a) {
                        $(a).html($(a).attr('data-base-text') + ' <span class=\"icon toggle\"></span>');
                    });

var baseText = $(this).attr('data-base-text');
                    $(this).html(baseText + (reverse ? " <span class=\"icon toggle-up\"></span>" : " <span class=\"icon toggle-down\"></span>"));

return false;
                }
            }).appendTo(th);

});
    }
})(jQuery);

$(function() {
    $('.sortable').sortable();
});

编译

CSS

h3 {
    margin-bottom: 30px;
    font-weight: 300;
}
.sortable-header-link {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    color: #444;
}
.icon {
    background-size: 16px;
    width: 16px;
    height: 16px;
    display: block;
}
.icon.toggle {
    background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/5102/arrows-24px-glyph-2_select-83.svg");
    opacity: 0.2;
}
.icon.toggle-down {
    background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/5102/design-24px-outline-2_move-down.svg");
}
.icon.toggle-up {
    background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/5102/design-24px-outline-2_move-up.svg");
}
.table-default {
    width: 100%;
}
.table-default thead > tr > th {
    font-weight: 500;
}
.table-default thead > tr > th > a {
    padding: 10px 10px 10px 20px;
}
.table-default thead > tr > th > a:hover {
    background: #eee;
}
.table-default tbody > tr > td {
    padding: 10px 20px;
    vertical-align: top;
    color: #888;
}
.table-default .name {
    font-weight: 500;
}
.table-default .level {
    text-transform: uppercase;
    font-weight: 500;
    font-size: 13px;
    color: #555;
}
@media (min-width: 768px) {
    .table-default .level {
        margin-left: auto;
    }
}
@media (max-width: 767px) {
    .table-default .session {
        text-align: left;
    }
}
.table-default .remove {
    padding: 10px;
}
.table-default .remove > a > span {
    display: none;
}
@media (max-width: 767px) {
    .table-default .remove {
        text-align: left;
        padding-left: 20px;
    }
    .table-default .remove a {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -webkit-align-items: center;
        -ms-flex-align: center;
        align-items: center;
    }
    .table-default .remove a > span {
        display: block;
        padding-left: 4px;
        color: #444;
        font-weight: 500;
        display: block;
    }
}
.table-default .remove a {
    opacity: 0.3;
}
.table-default .remove a img {
    width: 20px;
    height: 20px;
}
.table-default .remove a:hover {
    opacity: 1;
}
.table-default.table-striped tbody tr:nth-of-type(odd) {
    background: rgba(0, 0, 0, 0.025);
}
@media screen and (max-width: 767px) {
    .table-default {
        border: 0;
    }
    .table-default thead {
        display: none;
    }
    .table-default tr {
        margin-bottom: 10px;
        display: block;
        border: 1px solid #eee;
        background: white;
    }
    .table-default td {
        text-align: right;
        font-size: 13px;
        border-bottom: 1px solid #eee;
        border-top: 0 !important;
    }
    .table-default td:last-child {
        border-bottom: 0;
    }
    .table-default td:before {
        content: attr(data-label);
        float: left;
        text-transform: uppercase;
    }
    .table-default tbody td,
    .table-default tbody th {
        display: block !important;
    }
    .table-default .block-column {
        text-align: left;
    }
    .table-default .block-column:before {
        float: none;
        display: block;
        margin-bottom: 5px;
    }
}
.flex {
    width: 100%;
}
.flex.all {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}
@media (min-width: 768px) {
    .flex.sm {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
    }
}
@media (min-width: 991px) {
    .flex.md {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
    }
}
@media (min-width: 1200px) {
    .flex.lg {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
    }
}
.flex.align-start {
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
}
.flex.align-center {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}
.flex.justify-between {
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

HTML

Sorta sortable and super responsiveible tabling

jQuery, BootStrap

编辑器支持Emmet

快捷键

Sorta sortable and super responsiveible tabling

jQuery, BootStrap

jQuery UI 响应式的温度计风格的滑块控件

BlocksIt.js jQuery 很棒的响应式图片瀑布流插件演示

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：