Utilize widgets, improve style integration

pull/116/head
null-d3v 10 years ago
parent 0c47f9e736
commit 3f60ba4093

@ -1,5 +1,5 @@
/*! DataTables jQuery UI integration /*! DataTables jQuery UI integration
* ©2011-2014 SpryMedia Ltd - datatables.net/license * ©2011-2014 SpryMedia Ltd - datatables.net/license
*/ */
/** /**
@ -7,150 +7,255 @@
* DataTables 1.10 or newer. * DataTables 1.10 or newer.
* *
* This file sets the defaults and adds options to DataTables to style its * This file sets the defaults and adds options to DataTables to style its
* controls using Bootstrap. See http://datatables.net/manual/styling/jqueryui * controls using jQuery UI. See http://datatables.net/manual/styling/jqueryui
* for further information. * for further information.
*/ */
(function(window, document, undefined){ (function()
{
var factory = function( $, DataTable ) { var factory = function($, DataTable)
"use strict"; {
"use strict";
var sort_prefix = 'css_right ui-icon ui-icon-'; var originalDataTable = $.fn.DataTable;
var toolbar_prefix = 'fg-toolbar ui-toolbar ui-widget-header ui-helper-clearfix ui-corner-'; $.fn.DataTable = function(options)
{
/* Set the defaults for DataTables initialisation */ var dataTable = originalDataTable.apply(this, [ options ]);
$.extend( true, DataTable.defaults, {
dom: $(dataTable.table().container()).addClass("ui-widget");
'<"'+toolbar_prefix+'tl ui-corner-tr"lfr>'+
't'+ return dataTable;
'<"'+toolbar_prefix+'bl ui-corner-br"ip>', };
renderer: 'jqueryui'
} ); $.extend(true, DataTable.defaults,
{
dom: "<'fg-toolbar ui-toolbar ui-widget-header ui-helper-clearfix ui-corner-tl ui-corner-tr'lfr>" +
$.extend( DataTable.ext.classes, { "t" +
"sWrapper": "dataTables_wrapper dt-jqueryui", "<'fg-toolbar ui-toolbar ui-widget-header ui-helper-clearfix ui-corner-bl ui-corner-br'ip>",
renderer: "jqueryui",
/* Full numbers paging buttons */ });
"sPageButton": "fg-button ui-button ui-state-default", DataTable.defaults.oLanguage.oPaginate.sEllipsis = "..."; // TODO Base DT file needs to be updated with this.
"sPageButtonActive": "ui-state-disabled",
"sPageButtonDisabled": "ui-state-disabled", // Unsure if this is necessary with header and pageButton render functions.
$.extend(DataTable.ext.classes,
/* Features */ {
"sPaging": "dataTables_paginate fg-buttonset ui-buttonset fg-buttonset-multi "+ sFilterInput: "ui-corner-all",
"ui-buttonset-multi paging_", /* Note that the type is postfixed */ sFooterTH: "ui-state-default",
sHeaderTH: "ui-state-default",
/* Sorting */ sPageButton: "fg-button ui-button ui-state-default",
"sSortAsc": "ui-state-default sorting_asc", sPageButtonActive: "ui-state-highlight",
"sSortDesc": "ui-state-default sorting_desc", sPageButtonDisabled: "ui-state-disabled",
"sSortable": "ui-state-default sorting", sPaging: "dataTables_paginate paging_",
"sSortableAsc": "ui-state-default sorting_asc_disabled", sScrollFoot: "dataTables_scrollFoot ui-state-default",
"sSortableDesc": "ui-state-default sorting_desc_disabled", sScrollHead: "dataTables_scrollHead ui-state-default",
"sSortableNone": "ui-state-default sorting_disabled", sSortAsc: "sorting_asc ui-state-default",
"sSortIcon": "DataTables_sort_icon", sSortDesc: "sorting_desc ui-state-default",
sSortable: "sorting ui-state-default",
/* Scrolling */ sSortableAsc: "sorting_asc_disabled ui-state-default",
"sScrollHead": "dataTables_scrollHead "+"ui-state-default", sSortableDesc: "sorting_desc_disabled ui-state-default",
"sScrollFoot": "dataTables_scrollFoot "+"ui-state-default", sSortableNone: "sorting_disabled ui-state-default",
sSortIcon: "DataTables_sort_icon",
/* Misc */ sWrapper: "dataTables_wrapper dt-jqueryui",
"sHeaderTH": "ui-state-default", });
"sFooterTH": "ui-state-default"
} ); DataTable.ext.renderer.header.jqueryui = function(settings, $tableHead, column, classes)
{
var sortClass = "";
DataTable.ext.renderer.header.jqueryui = function ( settings, cell, column, classes ) { if (column.bSortable)
// Calculate what the unsorted class should be {
var noSortAppliedClass = sort_prefix+'carat-2-n-s'; if ($.inArray("asc", column.asSorting) !== -1)
var asc = $.inArray('asc', column.asSorting) !== -1; {
var desc = $.inArray('desc', column.asSorting) !== -1; if ($.inArray("desc", column.asSorting) !== -1)
{
if ( !column.bSortable || (!asc && !desc) ) { sortClass = "css_right ui-icon ui-icon-carat-2-n-s";
noSortAppliedClass = ''; }
} else
else if ( asc && !desc ) { {
noSortAppliedClass = sort_prefix+'carat-1-n'; sortClass = "css_right ui-icon ui-icon-carat-1-n";
} }
else if ( !asc && desc ) { }
noSortAppliedClass = sort_prefix+'carat-1-s'; else if ($.inArray("desc", column.asSorting) !== -1)
} {
sortClass = "css_right ui-icon ui-icon-carat-1-s";
// Setup the DOM structure }
$('<div/>') }
.addClass( 'DataTables_sort_wrapper' )
.append( cell.contents() ) $("<div>",
.append( $('<span/>') {
.addClass( classes.sSortIcon+' '+noSortAppliedClass ) class: "DataTables_sort_wrapper",
) })
.appendTo( cell ); .append($tableHead.contents())
.append($("<span>",
// Attach a sort listener to update on sort {
$(settings.nTable).on( 'order.dt', function ( e, ctx, sorting, columns ) { class: classes.sSortIcon + " " + sortClass,
if ( settings !== ctx ) { }))
return; .appendTo($tableHead);
}
$(settings.nTable).on("order.dt", function(event, context, sorting, columns)
var colIdx = column.idx; {
if (context === settings)
cell {
.removeClass( classes.sSortAsc +" "+classes.sSortDesc ) var $sortIconSpan = $tableHead.find("span." + classes.sSortIcon);
.addClass( columns[ colIdx ] == 'asc' ?
classes.sSortAsc : columns[ colIdx ] == 'desc' ? $tableHead.removeClass(classes.sSortAsc + " " + classes.sSortDesc);
classes.sSortDesc : $sortIconSpan.removeClass("css_right ui-icon ui-icon-carat-1-n ui-icon-carat-1-s ui-icon-carat-2-n-s ui-icon-triangle-1-n ui-icon-triangle-1-s");
column.sSortingClass
); if (columns[column.idx] === "asc")
{
cell $tableHead.addClass(classes.sSortAsc);
.find( 'span.'+classes.sSortIcon ) $sortIconSpan.addClass("css_right ui-icon ui-icon-triangle-1-n");
.removeClass( }
sort_prefix+'triangle-1-n' +" "+ else if (columns[column.idx] === "desc")
sort_prefix+'triangle-1-s' +" "+ {
sort_prefix+'carat-2-n-s' +" "+ $tableHead.addClass(classes.sSortDesc);
sort_prefix+'carat-1-n' +" "+ $sortIconSpan.addClass("css_right ui-icon ui-icon-triangle-1-s");
sort_prefix+'carat-1-s' }
) else
.addClass( columns[ colIdx ] == 'asc' ? {
sort_prefix+'triangle-1-n' : columns[ colIdx ] == 'desc' ? $tableHead.addClass(column.sSortingClass);
sort_prefix+'triangle-1-s' : $sortIconSpan.addClass(sortClass);
noSortAppliedClass }
); }
} ); });
}; };
$.fn.dataTable.ext.renderer.pageButton.jqueryui = function(settings, host, index, buttons, page, pages)
/* {
* TableTools jQuery UI compatibility // IE9 throws an "unknown error" if document.activeElement is used inside an iframe or frame.
* Required TableTools 2.1+ try
*/ {
if ( DataTable.TableTools ) { var activeElement = $(document.activeElement).data("dt-idx");
$.extend( true, DataTable.TableTools.classes, {
"container": "DTTT_container ui-buttonset ui-buttonset-multi", var buttonClickHandler = function(event)
"buttons": { {
"normal": "DTTT_button ui-button ui-state-default" settings.oApi._fnPageChange(settings, event.data.action, true);
}, };
"collection": { var $host = $(host).empty();
"container": "DTTT_collection ui-buttonset ui-buttonset-multi" var buttonIndex = 0;
} var addButton = function($container, button)
} ); {
} if ($.isArray(button))
{
}; // /factory var $buttonDiv = $("<" + (button.DT_el || "div") + ">").appendTo($container);
button.forEach(function(subButton)
{
// Define as an AMD module if possible addButton($buttonDiv, subButton);
if ( typeof define === 'function' && define.amd ) { });
define( ['jquery', 'datatables'], factory ); }
} else
else if ( typeof exports === 'object' ) { {
// Node/CommonJS var buttonText = "";
factory( require('jquery'), require('datatables') ); var disabled = false;
} var active = false;
else if ( jQuery ) { switch (button)
// Otherwise simply initialise as normal, stopping multiple evaluation {
factory( jQuery, jQuery.fn.dataTable ); case "ellipsis":
} {
buttonText = settings.oLanguage.oPaginate.sEllipsis;
disabled = true;
})(window, document); break;
}
case "first":
{
buttonText = settings.oLanguage.oPaginate.sFirst;
disabled = page === 0;
break;
}
case "next":
{
buttonText = settings.oLanguage.oPaginate.sNext;
disabled = page === pages - 1;
break;
}
case "previous":
{
buttonText = settings.oLanguage.oPaginate.sPrevious;
disabled = page === 0;
break;
}
case "last":
{
buttonText = settings.oLanguage.oPaginate.sLast;
disabled = page === pages - 1;
break;
}
default:
{
buttonText = button + 1;
active = page === button;
disabled = false;
break;
}
}
var $buttonAnchor = $("<a>",
{
"aria-controls": settings.sTableId,
class: settings.oClasses.sPageButton + (active ? " " + settings.oClasses.sPageButtonActive : ""),
"data-dt-idx": buttonIndex,
id: index === 0 && typeof(button) === "string" ? settings.sTableId + "_" + button : null,
"tabindex": settings.iTabIndex,
})
.html(buttonText)
.appendTo($container)
.button(
{
disabled: disabled,
})
.removeClass("ui-corner-all");
settings.oApi._fnBindAction($buttonAnchor, { action: button, }, buttonClickHandler);
buttonIndex++;
}
};
buttons.forEach(function(button)
{
addButton($host, button);
});
$host.find("a:first").addClass("ui-corner-tl ui-corner-bl");
$host.find("a:last").addClass("ui-corner-tr ui-corner-br");
if (activeElement !== null)
{
$(host).find("[data-dt-idx=" + activeElement + "]").focus();
}
}
catch (exception) { }
};
/*
* TableTools jQuery UI compatibility
* Required TableTools 2.1+
*/
if (DataTable.TableTools)
{
$.extend(true, DataTable.TableTools.classes,
{
buttons:
{
normal: "DTTT_button ui-button ui-state-default",
},
collection:
{
container: "DTTT_collection ui-buttonset ui-buttonset-multi",
},
container: "DTTT_container ui-buttonset ui-buttonset-multi",
});
}
};
if (typeof(define) === "function" && define.amd)
{
define([ "jquery", "datatables" ], factory);
}
else if (typeof(exports) === "object")
{
// Node/CommonJS
factory(require("jquery"), require("datatables"));
}
else if (typeof(jQuery) !== "undefined")
{
factory($, $.fn.dataTable);
}
})();

Loading…
Cancel
Save