From 0adf521db31264560c1c598e0086ba5b40b6a91f Mon Sep 17 00:00:00 2001 From: eladxxx Date: Fri, 2 May 2014 00:02:54 +0300 Subject: [PATCH 1/5] AMD support from Jowin's Datatables-Bootstrap3 plugin. --- integration/bootstrap/3/dataTables.bootstrap.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/integration/bootstrap/3/dataTables.bootstrap.js b/integration/bootstrap/3/dataTables.bootstrap.js index de5177f..03f9985 100644 --- a/integration/bootstrap/3/dataTables.bootstrap.js +++ b/integration/bootstrap/3/dataTables.bootstrap.js @@ -1,3 +1,10 @@ +(function (factory) { + if (typeof define === 'function' && define.amd) { + define(['jquery','datatables'], factory); + } else { + factory(jQuery); + } +}(function ($) { /* Set the defaults for DataTables initialisation */ $.extend( true, $.fn.dataTable.defaults, { "sDom": @@ -248,4 +255,4 @@ if ( $.fn.DataTable.TableTools ) { } } ); } - +})); From 1a39b5fee3a68a7d025838889a1da7b6e9fabe0e Mon Sep 17 00:00:00 2001 From: eladxxx Date: Fri, 2 May 2014 00:15:37 +0300 Subject: [PATCH 2/5] Don't force a small input box. --- integration/bootstrap/3/dataTables.bootstrap.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/integration/bootstrap/3/dataTables.bootstrap.js b/integration/bootstrap/3/dataTables.bootstrap.js index 03f9985..fcf3d16 100644 --- a/integration/bootstrap/3/dataTables.bootstrap.js +++ b/integration/bootstrap/3/dataTables.bootstrap.js @@ -20,8 +20,8 @@ $.extend( true, $.fn.dataTable.defaults, { /* Default class modification */ $.extend( $.fn.dataTableExt.oStdClasses, { "sWrapper": "dataTables_wrapper form-inline", - "sFilterInput": "form-control input-sm", - "sLengthSelect": "form-control input-sm" + "sFilterInput": "form-control", + "sLengthSelect": "form-control" } ); // In 1.10 we use the pagination renderers to draw the Bootstrap paging, From 1d87cbe6c62102a0c13e8f9a6b25f55ee5fe38f3 Mon Sep 17 00:00:00 2001 From: eladxxx Date: Fri, 2 May 2014 01:18:13 +0300 Subject: [PATCH 3/5] Fix DOM so it works for both LTR and RTL layouts. A more compact verison of the same from Jowin's plugin. --- integration/bootstrap/3/dataTables.bootstrap.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/integration/bootstrap/3/dataTables.bootstrap.js b/integration/bootstrap/3/dataTables.bootstrap.js index fcf3d16..61b066f 100644 --- a/integration/bootstrap/3/dataTables.bootstrap.js +++ b/integration/bootstrap/3/dataTables.bootstrap.js @@ -8,9 +8,9 @@ /* Set the defaults for DataTables initialisation */ $.extend( true, $.fn.dataTable.defaults, { "sDom": - "<'row'<'col-xs-6'l><'col-xs-6'f>r>"+ + "<'row'<'col-xs-6'<'pull-left'l>><'col-xs-6'<'pull-right'f>>r>"+ "t"+ - "<'row'<'col-xs-6'i><'col-xs-6'p>>", + "<'row'<'col-xs-6'<'pull-left'i>><'col-xs-6'<'pull-right'p>>>", "oLanguage": { "sLengthMenu": "_MENU_ records per page" } From b0f8a5e78eabeb9aa5c9fc7985e9b3aee2547ead Mon Sep 17 00:00:00 2001 From: eladxxx Date: Fri, 2 May 2014 01:41:47 +0300 Subject: [PATCH 4/5] Bidirectional CSS (LTR/RTL layout support), Glyphicons/Font Awesome. --- .../bootstrap/3/dataTables.bootstrap.css | 59 ++++++++++++++++--- 1 file changed, 52 insertions(+), 7 deletions(-) diff --git a/integration/bootstrap/3/dataTables.bootstrap.css b/integration/bootstrap/3/dataTables.bootstrap.css index c9701f8..ce71b44 100644 --- a/integration/bootstrap/3/dataTables.bootstrap.css +++ b/integration/bootstrap/3/dataTables.bootstrap.css @@ -3,6 +3,10 @@ div.dataTables_length label { float: left; text-align: left; } +html[dir='rtl'] div.dataTables_length label { + float: right; + text-align: right; +} div.dataTables_length select { width: 75px; @@ -12,6 +16,9 @@ div.dataTables_filter label { font-weight: normal; float: right; } +html[dir='rtl'] div.dataTables_filter label { + float: left; +} div.dataTables_filter input { width: 16em; @@ -25,6 +32,9 @@ div.dataTables_paginate { float: right; margin: 0; } +html[dir='rtl'] div.dataTables_paginate { + float: left; +} div.dataTables_paginate ul.pagination { margin: 2px 0; @@ -55,17 +65,52 @@ table.dataTable thead .sorting_desc_disabled { cursor: pointer; } -table.dataTable thead .sorting { background: url('../images/sort_both.png') no-repeat center right; } -table.dataTable thead .sorting_asc { background: url('../images/sort_asc.png') no-repeat center right; } -table.dataTable thead .sorting_desc { background: url('../images/sort_desc.png') no-repeat center right; } - -table.dataTable thead .sorting_asc_disabled { background: url('../images/sort_asc_disabled.png') no-repeat center right; } -table.dataTable thead .sorting_desc_disabled { background: url('../images/sort_desc_disabled.png') no-repeat center right; } +/* + * Use Glyphicons Halflings from Bootstrap 3 instead of images. + * + * Relevant icons: + * + * Glyphicons Halflings (default) + * glyphicon-sort '\e150' sort + * glyphicon-sort-by-attributes '\e155' asc + * glyphicon-sort-by-attributes-alt '\e156' desc + * + * Font Awesome + * fa-sort '\f0dc' sort + * fa-caret-up '\f0d8' asc + * fa-caret-down '\f0d7' desc + */ +table.table thead .sorting:after, +table.table thead .sorting_asc:after, +table.table thead .sorting_desc:after, +table.table thead .sorting_asc_disabled:after, +table.table thead .sorting_desc_disabled:after { + font-family: 'Glyphicons Halflings'; + text-align: right; + float: right; +} +html[dir='rtl'] table.table thead .sorting:after, +html[dir='rtl'] table.table thead .sorting_asc:after, +html[dir='rtl'] table.table thead .sorting_desc:after, +html[dir='rtl'] table.table thead .sorting_asc_disabled:after, +html[dir='rtl'] table.table thead .sorting_desc_disabled:after { + text-align: left; + float: left; +} +table.table thead .sorting:after { content: '\e150'; opacity: 0.2; } +table.table thead .sorting_asc:after { content: '\e155'; } +table.table thead .sorting_desc:after { content: '\e156'; } +table.table thead .sorting_asc_disabled:after { content: '\e155'; opacity: 0.2; } +table.table thead .sorting_desc_disabled:after { content: '\e156'; opacity: 0.2; } table.dataTable thead > tr > th { - padding-left: 18px; + padding-left: 0; padding-right: 18px; } +html[dir='rtl'] table.dataTable thead > tr > th { + padding-left: 18px; + padding-right: 0; +} table.dataTable th:active { outline: none; From 31357392e3bb57e533f4ca9442e0283ed29d1622 Mon Sep 17 00:00:00 2001 From: eladxxx Date: Fri, 2 May 2014 01:47:37 +0300 Subject: [PATCH 5/5] Let Bootstrap dictate these. --- integration/bootstrap/3/dataTables.bootstrap.css | 9 --------- 1 file changed, 9 deletions(-) diff --git a/integration/bootstrap/3/dataTables.bootstrap.css b/integration/bootstrap/3/dataTables.bootstrap.css index ce71b44..f463264 100644 --- a/integration/bootstrap/3/dataTables.bootstrap.css +++ b/integration/bootstrap/3/dataTables.bootstrap.css @@ -103,15 +103,6 @@ table.table thead .sorting_desc:after { content: '\e156'; } table.table thead .sorting_asc_disabled:after { content: '\e155'; opacity: 0.2; } table.table thead .sorting_desc_disabled:after { content: '\e156'; opacity: 0.2; } -table.dataTable thead > tr > th { - padding-left: 0; - padding-right: 18px; -} -html[dir='rtl'] table.dataTable thead > tr > th { - padding-left: 18px; - padding-right: 0; -} - table.dataTable th:active { outline: none; }