ellipses.js
6.46 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
/*
* This plug-in adds another pagination option similar to `full_numbers`, except
* it adds ellipses around the page numbers when applicable. You can set how
* many page numbers should be displayed with the iShowPages option.
*
* This plug- in extends the oStdClasses object with the following properties:
* sPageEllipsis, sPageNumber and sPageNumbers.
*
* It also extends the oSettings object with the following properties:
* _iShowPages, _iShowPagesHalf, _iCurrentPage, _iTotalPages, _iFirstPage and
* _iLastPage.
*
* Note that DataTables 1.10 has this ability built in. As such, this plug-ins
* has been marked as deprecated, but may still be useful for if you are using
* an old version of DataTables.
*
* @name Ellipses
* @summary Show ellipses in the pagination control where there is a gap in numbers
* @deprecated
* @author [Dave Kennedy](http://daveden.wordpress.com/)
* @example
* $(document).ready(function() {
* $('#example').dataTable({
* 'sPaginationType': 'ellipses'
* });
* });
*/
$.extend($.fn.dataTableExt.oStdClasses, {
'sPageEllipsis': 'paginate_ellipsis',
'sPageNumber': 'paginate_number',
'sPageNumbers': 'paginate_numbers'
});
$.fn.dataTableExt.oPagination.ellipses = {
'oDefaults': {
'iShowPages': 5
},
'fnClickHandler': function(e) {
var fnCallbackDraw = e.data.fnCallbackDraw,
oSettings = e.data.oSettings,
sPage = e.data.sPage;
if ($(this).is('[disabled]')) {
return false;
}
oSettings.oApi._fnPageChange(oSettings, sPage);
fnCallbackDraw(oSettings);
return true;
},
// fnInit is called once for each instance of pager
'fnInit': function(oSettings, nPager, fnCallbackDraw) {
var oClasses = oSettings.oClasses,
oLang = oSettings.oLanguage.oPaginate,
that = this;
var iShowPages = oSettings.oInit.iShowPages || this.oDefaults.iShowPages,
iShowPagesHalf = Math.floor(iShowPages / 2);
$.extend(oSettings, {
_iShowPages: iShowPages,
_iShowPagesHalf: iShowPagesHalf,
});
var oFirst = $('<a class="' + oClasses.sPageButton + ' ' + oClasses.sPageFirst + '">' + oLang.sFirst + '</a>'),
oPrevious = $('<a class="' + oClasses.sPageButton + ' ' + oClasses.sPagePrevious + '">' + oLang.sPrevious + '</a>'),
oNumbers = $('<span class="' + oClasses.sPageNumbers + '"></span>'),
oNext = $('<a class="' + oClasses.sPageButton + ' ' + oClasses.sPageNext + '">' + oLang.sNext + '</a>'),
oLast = $('<a class="' + oClasses.sPageButton + ' ' + oClasses.sPageLast + '">' + oLang.sLast + '</a>');
oFirst.click({ 'fnCallbackDraw': fnCallbackDraw, 'oSettings': oSettings, 'sPage': 'first' }, that.fnClickHandler);
oPrevious.click({ 'fnCallbackDraw': fnCallbackDraw, 'oSettings': oSettings, 'sPage': 'previous' }, that.fnClickHandler);
oNext.click({ 'fnCallbackDraw': fnCallbackDraw, 'oSettings': oSettings, 'sPage': 'next' }, that.fnClickHandler);
oLast.click({ 'fnCallbackDraw': fnCallbackDraw, 'oSettings': oSettings, 'sPage': 'last' }, that.fnClickHandler);
// Draw
$(nPager).append(oFirst, oPrevious, oNumbers, oNext, oLast);
},
// fnUpdate is only called once while table is rendered
'fnUpdate': function(oSettings, fnCallbackDraw) {
var oClasses = oSettings.oClasses,
that = this;
var tableWrapper = oSettings.nTableWrapper;
// Update stateful properties
this.fnUpdateState(oSettings);
if (oSettings._iCurrentPage === 1) {
$('.' + oClasses.sPageFirst, tableWrapper).attr('disabled', true);
$('.' + oClasses.sPagePrevious, tableWrapper).attr('disabled', true);
} else {
$('.' + oClasses.sPageFirst, tableWrapper).removeAttr('disabled');
$('.' + oClasses.sPagePrevious, tableWrapper).removeAttr('disabled');
}
if (oSettings._iTotalPages === 0 || oSettings._iCurrentPage === oSettings._iTotalPages) {
$('.' + oClasses.sPageNext, tableWrapper).attr('disabled', true);
$('.' + oClasses.sPageLast, tableWrapper).attr('disabled', true);
} else {
$('.' + oClasses.sPageNext, tableWrapper).removeAttr('disabled');
$('.' + oClasses.sPageLast, tableWrapper).removeAttr('disabled');
}
var i, oNumber, oNumbers = $('.' + oClasses.sPageNumbers, tableWrapper);
// Erase
oNumbers.html('');
for (i = oSettings._iFirstPage; i <= oSettings._iLastPage; i++) {
oNumber = $('<a class="' + oClasses.sPageButton + ' ' + oClasses.sPageNumber + '">' + oSettings.fnFormatNumber(i) + '</a>');
if (oSettings._iCurrentPage === i) {
oNumber.attr('active', true).attr('disabled', true);
} else {
oNumber.click({ 'fnCallbackDraw': fnCallbackDraw, 'oSettings': oSettings, 'sPage': i - 1 }, that.fnClickHandler);
}
// Draw
oNumbers.append(oNumber);
}
// Add ellipses
if (1 < oSettings._iFirstPage) {
oNumbers.prepend('<span class="' + oClasses.sPageEllipsis + '">...</span>');
}
if (oSettings._iLastPage < oSettings._iTotalPages) {
oNumbers.append('<span class="' + oClasses.sPageEllipsis + '">...</span>');
}
},
// fnUpdateState used to be part of fnUpdate
// The reason for moving is so we can access current state info before fnUpdate is called
'fnUpdateState': function(oSettings) {
var iCurrentPage = Math.ceil((oSettings._iDisplayStart + 1) / oSettings._iDisplayLength),
iTotalPages = Math.ceil(oSettings.fnRecordsDisplay() / oSettings._iDisplayLength),
iFirstPage = iCurrentPage - oSettings._iShowPagesHalf,
iLastPage = iCurrentPage + oSettings._iShowPagesHalf;
if (iTotalPages < oSettings._iShowPages) {
iFirstPage = 1;
iLastPage = iTotalPages;
} else if (iFirstPage < 1) {
iFirstPage = 1;
iLastPage = oSettings._iShowPages;
} else if (iLastPage > iTotalPages) {
iFirstPage = (iTotalPages - oSettings._iShowPages) + 1;
iLastPage = iTotalPages;
}
$.extend(oSettings, {
_iCurrentPage: iCurrentPage,
_iTotalPages: iTotalPages,
_iFirstPage: iFirstPage,
_iLastPage: iLastPage
});
}
};