Skip to content

Bidirectional CSS, Glyphicons, and some notes. #20

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Jowin merged 2 commits into from
May 19, 2014
Merged

Bidirectional CSS, Glyphicons, and some notes. #20

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
347eead
Bidirectional CSS, Glyphicons, and some notes.
elad Apr 22, 2014
51520ce
Default to lower opacity for inactive sorting too.
elad Apr 26, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
67 changes: 58 additions & 9 deletions BS3/assets/css/datatables.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,36 @@
div.dataTables_length label {
html[direction='ltr'] div.dataTables_length label {
float: left;
text-align: left;
}
html[direction='rtl'] div.dataTables_length label {
float: right;
text-align: right;
}

div.dataTables_length select {
width: 75px;
}

div.dataTables_filter label {
html[direction='ltr'] div.dataTables_filter label {
float: right;
}
html[direction='rtl'] div.dataTables_filter label {
float: left;
}

div.dataTables_info {
padding-top: 26px;
}

div.dataTables_paginate {
float: right;
margin: 0;
}
html[direction='ltr'] div.dataTables_paginate {
float: right;
}
html[direction='rtl'] div.dataTables_paginate {
float: left;
}

table.table {
clear: both;
Expand All @@ -35,12 +47,49 @@ table.table thead .sorting_desc_disabled {
*cursor: hand;
}

table.table thead .sorting { background: url('../images/sort_both.png') no-repeat center right; }
table.table thead .sorting_asc { background: url('../images/sort_asc.png') no-repeat center right; }
table.table thead .sorting_desc { background: url('../images/sort_desc.png') no-repeat center right; }

table.table thead .sorting_asc_disabled { background: url('../images/sort_asc_disabled.png') no-repeat center right; }
table.table 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';
}
html[direction='ltr'] table.table thead .sorting:after,
html[direction='ltr'] table.table thead .sorting_asc:after,
html[direction='ltr'] table.table thead .sorting_desc:after,
html[direction='ltr'] table.table thead .sorting_asc_disabled:after,
html[direction='ltr'] table.table thead .sorting_desc_disabled:after {
text-align: right;
float: right;
}
html[direction='rtl'] table.table thead .sorting:after,
html[direction='rtl'] table.table thead .sorting_asc:after,
html[direction='rtl'] table.table thead .sorting_desc:after,
html[direction='rtl'] table.table thead .sorting_asc_disabled:after,
html[direction='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 th:active {
outline: none;
Expand Down
29 changes: 16 additions & 13 deletions BS3/assets/js/datatables.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,14 @@
/* Set the defaults for DataTables initialisation */
$.extend( true, $.fn.dataTable.defaults, {
"sDom": "<'row'<'col-sm-12'<'pull-right'f><'pull-left'l>r<'clearfix'>>>t<'row'<'col-sm-12'<'pull-left'i><'pull-right'p><'clearfix'>>>",
"sPaginationType": "bs_normal",
"oLanguage": {
"sLengthMenu": "Show _MENU_ Rows",
"sSearch": ""
}
"sPaginationType": "bs_normal",
/* At the moment, this is the easiest way I could find to sneak these into oSettings without them getting wiped by _fnMap. */
"oLanguage": {
"sIconClassFirst": "glyphicon glyphicon-backward",
"sIconClassLast": "glyphicon glyphicon-forward",
"sIconClassPrevious": "glyphicon glyphicon-chevron-left",
"sIconClassNext": "glyphicon glyphicon-chevron-right"
}
} );

/* Default class modification */
Expand Down Expand Up @@ -50,8 +53,8 @@
};
$(nPaging).append(
'<ul class="pagination">'+
'<li class="prev disabled"><a href="#"><span class="glyphicon glyphicon-chevron-left"></span>&nbsp;'+oLang.sPrevious+'</a></li>'+
'<li class="next disabled"><a href="#">'+oLang.sNext+'&nbsp;<span class="glyphicon glyphicon-chevron-right"></span></a></li>'+
'<li class="prev disabled"><a href="#"><span class="'+oSettings.oLanguage.sIconClassPrevious+'"></span>&nbsp;'+oLang.sPrevious+'</a></li>'+
'<li class="next disabled"><a href="#">'+oLang.sNext+'&nbsp;<span class="'+oSettings.oLanguage.sIconClassNext+'"></span></a></li>'+
'</ul>'
);
var els = $('a', nPaging);
Expand Down Expand Up @@ -116,8 +119,8 @@
}
};
var sAppend = '<ul class="pagination">'+
'<li class="prev"><a class="'+oSettings.oClasses.sPagePrevDisabled+'" tabindex="'+oSettings.iTabIndex+'" role="button"><span class="glyphicon glyphicon-chevron-left"></span>&nbsp;'+oLang.sPrevious+'</a></li>'+
'<li class="next"><a class="'+oSettings.oClasses.sPageNextDisabled+'" tabindex="'+oSettings.iTabIndex+'" role="button">'+oLang.sNext+'&nbsp;<span class="glyphicon glyphicon-chevron-right"></span></a></li>'+
'<li class="prev"><a class="'+oSettings.oClasses.sPagePrevDisabled+'" tabindex="'+oSettings.iTabIndex+'" role="button"><span class="'+oSettings.oLanguage.sIconClassPrevious+'"></span>&nbsp;'+oLang.sPrevious+'</a></li>'+
'<li class="next"><a class="'+oSettings.oClasses.sPageNextDisabled+'" tabindex="'+oSettings.iTabIndex+'" role="button">'+oLang.sNext+'&nbsp;<span class="'+oSettings.oLanguage.sIconClassNext+'"></span></a></li>'+
'</ul>';
$(nPaging).append( sAppend );
var els = $('a', nPaging);
Expand Down Expand Up @@ -174,10 +177,10 @@
};
$(nPaging).append(
'<ul class="pagination">'+
'<li class="disabled"><a tabindex="'+oSettings.iTabIndex+'" class="'+oClasses.sPageButton+" "+oClasses.sPageFirst+'"><span class="glyphicon glyphicon-backward"></span>&nbsp;'+oLang.sFirst+'</a></li>'+
'<li class="disabled"><a tabindex="'+oSettings.iTabIndex+'" class="'+oClasses.sPageButton+" "+oClasses.sPagePrevious+'"><span class="glyphicon glyphicon-chevron-left"></span>&nbsp;'+oLang.sPrevious+'</a></li>'+
'<li><a tabindex="'+oSettings.iTabIndex+'" class="'+oClasses.sPageButton+" "+oClasses.sPageNext+'">'+oLang.sNext+'&nbsp;<span class="glyphicon glyphicon-chevron-right"></span></a></li>'+
'<li><a tabindex="'+oSettings.iTabIndex+'" class="'+oClasses.sPageButton+" "+oClasses.sPageLast+'">'+oLang.sLast+'&nbsp;<span class="glyphicon glyphicon-forward"></span></a></li>'+
'<li class="disabled"><a tabindex="'+oSettings.iTabIndex+'" class="'+oClasses.sPageButton+" "+oClasses.sPageFirst+'"><span class="'+oSettings.oLanguage.sIconClassFirst+'"></span>&nbsp;'+oLang.sFirst+'</a></li>'+
'<li class="disabled"><a tabindex="'+oSettings.iTabIndex+'" class="'+oClasses.sPageButton+" "+oClasses.sPagePrevious+'"><span class="'+oSettings.oLanguage.sIconClassPrevious+'"></span>&nbsp;'+oLang.sPrevious+'</a></li>'+
'<li><a tabindex="'+oSettings.iTabIndex+'" class="'+oClasses.sPageButton+" "+oClasses.sPageNext+'">'+oLang.sNext+'&nbsp;<span class="'+oSettings.oLanguage.sIconClassNext+'"></span></a></li>'+
'<li><a tabindex="'+oSettings.iTabIndex+'" class="'+oClasses.sPageButton+" "+oClasses.sPageLast+'">'+oLang.sLast+'&nbsp;<span class="'+oSettings.oLanguage.sIconClassLast+'"></span></a></li>'+
'</ul>'
);
var els = $('a', nPaging);
Expand Down
14 changes: 14 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,17 @@
# Fork info

This fork has the following changes:

* Bidirectional CSS file to support both left-to-right and right-to-left layouts
* Control over pagination icon classes (for RTL support) via the following `oLanguage` parameters:
* `sIconClassFirst` (default: `glyphicon glyphicon-chevron-backward`)
* `sIconClassLast` (default: `glyphicon glyphicon-chevron-forward`)
* `sIconClassPrevious` (default: `glyphicon glyphicon-chevron-left`)
* `sIconClassNext` (default: `glyphicon glyphicon-chevron-right`)
* Notes in the CSS on how to use Font Awesome for the sorting icons (hopefully better support is coming to upstream in 1.10 - see [this](https://github.com/DataTables/DataTables/issues/165))

Note to self: Revisit all of this once 1.10 is released and see what can be thrown away.

Datatables-Bootstrap3
=====================

Expand Down