Responsive table 15 Tháng mười một, 2018 Frontend, Javascript !function(t){t.fn.basictable=function(a){var e=function(a,e,n){a.children().each(function(){var a=t(this);if(""!==a.html()&&" "!==a.html()||n.showEmptyCells){for(var r=a.index(),i="",s=0;s<e.length;s++){0!=s&&(i+=": ");var o=e[s][r];null!=o&&(i+=o.text())}a.attr("data-th",i),n.contentWrap&&!a.children().hasClass("bt-content")&&a.wrapInner('<span class="bt-content" />')}else a.addClass("bt-hide")})},n=function(a,e){e.forceResponsive?null!==e.breakpoint&&t(window).width()<=e.breakpoint||null!==e.containerBreakpoint&&a.parent().width()<=e.containerBreakpoint?r(a,e):i(a,e):a.removeClass("bt").outerWidth()>a.parent().width()?r(a,e):i(a,e)},r=function(t,a){t.addClass("lctablebt"),a.header||t.addClass("bt--no-header"),a.tableWrap&&t.parent(".bt-wrapper").addClass("active")},i=function(t,a){t.removeClass("bt bt--no-header"),a.tableWrap&&t.parent(".bt-wrapper").removeClass("active")},s=function(a,e){var n;a.removeClass("bt bt--no-header"),a.find("td").removeAttr("data-th"),e.tableWrap&&a.unwrap(),e.contentWrap&&(n=a,t.each(n.find("td"),function(){var a=t(this),e=a.children(".bt-content").html();a.html(e)})),a.removeData("basictable")};this.each(function(){var o=t(this);if(0===o.length||o.data("basictable"))return o.data("basictable")&&("destroy"==a?s(o,o.data("basictable")):"start"===a?r(o,o.data("basictable")):"stop"===a?i(o,o.data("basictable")):n(o,o.data("basictable"))),!1;var l=t.extend({},t.fn.basictable.defaults,a),b={breakpoint:l.breakpoint,containerBreakpoint:l.containerBreakpoint,contentWrap:l.contentWrap,forceResponsive:l.forceResponsive,noResize:l.noResize,tableWrap:l.tableWrap,showEmptyCells:l.showEmptyCells,header:l.header};null===b.breakpoint&&null===b.containerBreakpoint&&(b.breakpoint=568),o.data("basictable",b),function(a,n){var r=[];if(n.tableWrap&&a.wrap('<div class="bt-wrapper"></div>'),n.header){var i="";i=a.find("thead tr th").length?"thead th":a.find("tbody tr th").length?"tbody tr th":a.find("th").length?"tr:first th":"tr:first td",t.each(a.find(i),function(){var a=t(this),e=parseInt(a.attr("colspan"),10)||1,n=a.closest("tr").index();r[n]||(r[n]=[]);for(var i=0;i<e;i++)r[n].push(a)})}t.each(a.find("tbody tr"),function(){e(t(this),r,n)}),t.each(a.find("tfoot tr"),function(){e(t(this),r,n)})}(o,o.data("basictable")),b.noResize||(n(o,o.data("basictable")),t(window).bind("resize.basictable",function(){var t;(t=o).data("basictable")&&n(t,t.data("basictable"))}))})},t.fn.basictable.defaults={breakpoint:null,containerBreakpoint:null,contentWrap:!0,forceResponsive:!0,noResize:!1,tableWrap:!1,showEmptyCells:!1,header:!0}}(jQuery); // sử dụng trong content jQuery(document).ready(function(){ jQuery('body .text-contents .content-template table').basictable({ breakpoint:992 }); }); File css @media (max-width:992px){.text-contents table.wp-block-table.lctablebt .tbody tr:first-child,table.lctablebt tbody th,table.lctablebt thead{display:none}.text-contents table{width:100%;border-top:1px solid #dee2e6}table.lctablebt tbody td,table.lctablebt tfoot td,table.lctablebt tfoot th{display:block;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;vertical-align:top;position:relative;float:left;width:100%!important}table.lctablebt tbody td::before,table.lctablebt tfoot td::before,table.lctablebt tfoot th::before{content:attr(data-th) ": ";display:inline-block;-webkit-flex-shrink:0;-ms-flex-shrink:0;flex-shrink:0;font-weight:700;width:6.5em}table.lctablebt tbody td.bt-hide,table.lctablebt tfoot td.bt-hide,table.lctablebt tfoot th.bt-hide,table.lctablebt.bt--no-header tbody td::before,table.lctablebt.bt--no-header tfoot td::before{display:none}table.lctablebt tbody td .bt-content,table.lctablebt tfoot td .bt-content,table.lctablebt tfoot th .bt-content{vertical-align:top}} 0 0 đánh giá Đánh giá bài viết Please wait...
15 Tháng mười một, 2018 Frontend, Javascript !function(t){t.fn.basictable=function(a){var e=function(a,e,n){a.children().each(function(){var a=t(this);if(""!==a.html()&&" "!==a.html()||n.showEmptyCells){for(var r=a.index(),i="",s=0;s<e.length;s++){0!=s&&(i+=": ");var o=e[s][r];null!=o&&(i+=o.text())}a.attr("data-th",i),n.contentWrap&&!a.children().hasClass("bt-content")&&a.wrapInner('<span class="bt-content" />')}else a.addClass("bt-hide")})},n=function(a,e){e.forceResponsive?null!==e.breakpoint&&t(window).width()<=e.breakpoint||null!==e.containerBreakpoint&&a.parent().width()<=e.containerBreakpoint?r(a,e):i(a,e):a.removeClass("bt").outerWidth()>a.parent().width()?r(a,e):i(a,e)},r=function(t,a){t.addClass("lctablebt"),a.header||t.addClass("bt--no-header"),a.tableWrap&&t.parent(".bt-wrapper").addClass("active")},i=function(t,a){t.removeClass("bt bt--no-header"),a.tableWrap&&t.parent(".bt-wrapper").removeClass("active")},s=function(a,e){var n;a.removeClass("bt bt--no-header"),a.find("td").removeAttr("data-th"),e.tableWrap&&a.unwrap(),e.contentWrap&&(n=a,t.each(n.find("td"),function(){var a=t(this),e=a.children(".bt-content").html();a.html(e)})),a.removeData("basictable")};this.each(function(){var o=t(this);if(0===o.length||o.data("basictable"))return o.data("basictable")&&("destroy"==a?s(o,o.data("basictable")):"start"===a?r(o,o.data("basictable")):"stop"===a?i(o,o.data("basictable")):n(o,o.data("basictable"))),!1;var l=t.extend({},t.fn.basictable.defaults,a),b={breakpoint:l.breakpoint,containerBreakpoint:l.containerBreakpoint,contentWrap:l.contentWrap,forceResponsive:l.forceResponsive,noResize:l.noResize,tableWrap:l.tableWrap,showEmptyCells:l.showEmptyCells,header:l.header};null===b.breakpoint&&null===b.containerBreakpoint&&(b.breakpoint=568),o.data("basictable",b),function(a,n){var r=[];if(n.tableWrap&&a.wrap('<div class="bt-wrapper"></div>'),n.header){var i="";i=a.find("thead tr th").length?"thead th":a.find("tbody tr th").length?"tbody tr th":a.find("th").length?"tr:first th":"tr:first td",t.each(a.find(i),function(){var a=t(this),e=parseInt(a.attr("colspan"),10)||1,n=a.closest("tr").index();r[n]||(r[n]=[]);for(var i=0;i<e;i++)r[n].push(a)})}t.each(a.find("tbody tr"),function(){e(t(this),r,n)}),t.each(a.find("tfoot tr"),function(){e(t(this),r,n)})}(o,o.data("basictable")),b.noResize||(n(o,o.data("basictable")),t(window).bind("resize.basictable",function(){var t;(t=o).data("basictable")&&n(t,t.data("basictable"))}))})},t.fn.basictable.defaults={breakpoint:null,containerBreakpoint:null,contentWrap:!0,forceResponsive:!0,noResize:!1,tableWrap:!1,showEmptyCells:!1,header:!0}}(jQuery); // sử dụng trong content jQuery(document).ready(function(){ jQuery('body .text-contents .content-template table').basictable({ breakpoint:992 }); }); File css @media (max-width:992px){.text-contents table.wp-block-table.lctablebt .tbody tr:first-child,table.lctablebt tbody th,table.lctablebt thead{display:none}.text-contents table{width:100%;border-top:1px solid #dee2e6}table.lctablebt tbody td,table.lctablebt tfoot td,table.lctablebt tfoot th{display:block;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;vertical-align:top;position:relative;float:left;width:100%!important}table.lctablebt tbody td::before,table.lctablebt tfoot td::before,table.lctablebt tfoot th::before{content:attr(data-th) ": ";display:inline-block;-webkit-flex-shrink:0;-ms-flex-shrink:0;flex-shrink:0;font-weight:700;width:6.5em}table.lctablebt tbody td.bt-hide,table.lctablebt tfoot td.bt-hide,table.lctablebt tfoot th.bt-hide,table.lctablebt.bt--no-header tbody td::before,table.lctablebt.bt--no-header tfoot td::before{display:none}table.lctablebt tbody td .bt-content,table.lctablebt tfoot td .bt-content,table.lctablebt tfoot th .bt-content{vertical-align:top}} 0 0 đánh giá Đánh giá bài viết Please wait...