Skip to content

Commit 3f53f42

Browse files
JocaPCJocaPC
committed
Verision 1.4.1. added save state and filtering increment length for server side
1 parent f91ef2a commit 3f53f42

File tree

3 files changed

+812
-12
lines changed

3 files changed

+812
-12
lines changed

‎media/js/jquery.dataTables.columnFilter.js‎

Lines changed: 51 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/*
22
* File: jquery.dataTables.columnFilter.js
3-
* Version: 1.4.0.
3+
* Version: 1.4.1.
44
* Author: Jovan Popovic
55
*
66
* Copyright 2011 Jovan Popovic, all rights reserved.
@@ -95,14 +95,24 @@
9595
//return oTable.fnSettings().oApi._fnColumnIndexToVisible(oTable.fnSettings(), iColumnIndex);
9696
}
9797

98-
function fnCreateInput(oTable, regex, smart, bIsNumber) {
98+
function fnCreateInput(oTable, regex, smart, bIsNumber, iFilterLength) {
9999
var sCSSClass = "text_filter";
100100
if (bIsNumber)
101101
sCSSClass = "number_filter";
102102

103103
label = label.replace(/(^\s*)|(\s*$)/g, "");
104-
105-
var input = $('<input type="text" class="search_init ' + sCSSClass + '" value="' + label + '"/>');
104+
var currentFilter = oTable.fnSettings().aoPreSearchCols[i].sSearch;
105+
var search_init = 'search_init ';
106+
var inputvalue = label;
107+
if(currentFilter != '' && currentFilter != '^') {
108+
if(bIsNumber && currentFilter.charAt(0) == '^')
109+
inputvalue = currentFilter.substr(1); //ignore trailing ^
110+
else
111+
inputvalue = currentFilter;
112+
search_init = '';
113+
}
114+
115+
var input = $('<input type="text" class="' + search_init + sCSSClass + '" value="' + inputvalue + '"/>');
106116
th.html(input);
107117
if (bIsNumber)
108118
th.wrapInner('<span class="filter_column filter_number" />');
@@ -119,7 +129,29 @@
119129
});
120130
} else {
121131
input.keyup(function () {
122-
/* Filter on the column (the index) of this element */
132+
if(oTable.fnSettings().oFeatures.bServerSide && iFilterLength!=0) {
133+
//If filter length is set in the server-side processing mode
134+
//Check has the user entered at least iFilterLength new characters
135+
136+
var currentFilter = oTable.fnSettings().aoPreSearchCols[index].sSearch;
137+
var iLastFilterLength = $(this).data("dt-iLastFilterLength");
138+
if(typeof iLastFilterLength == "undefined")
139+
iLastFilterLength = 0;
140+
var iCurrentFilterLength = this.value.length;
141+
if( Math.abs(iCurrentFilterLength - iLastFilterLength) < iFilterLength
142+
//&& currentFilter.length == 0 //Why this?
143+
)
144+
{
145+
//Cancel the filtering
146+
return;
147+
}
148+
else
149+
{
150+
//Remember the current filter length
151+
$(this).data("dt-iLastFilterLength", iCurrentFilterLength );
152+
}
153+
}
154+
/* Filter on the column (the index) of this element */
123155
oTable.fnFilter(this.value, _fnColumnIndex(index), regex, smart);//Issue 37
124156
fnOnFiltered();
125157
});
@@ -205,7 +237,6 @@
205237

206238

207239
function fnCreateDateRangeInput(oTable) {
208-
209240
th.html(_fnRangeLabelPart(0));
210241
var sFromId = oTable.attr("id") + '_range_from_' + i;
211242
var from = $('<input type="text" class="date_range_filter" id="' + sFromId + '" rel="' + i + '"/>');
@@ -276,15 +307,21 @@
276307
if (aData == null)
277308
aData = _fnGetColumnValues(oTable.fnSettings(), iColumn, true, false, true);
278309
var index = iColumn;
310+
var currentFilter = oTable.fnSettings().aoPreSearchCols[i].sSearch;
311+
279312
var r = '<select class="search_init select_filter"><option value="" class="search_init">' + sLabel + '</option>';
280313
var j = 0;
281314
var iLen = aData.length;
282315
for (j = 0; j < iLen; j++) {
283316
if (typeof (aData[j]) != 'object') {
284-
r += '<option value="' + escape(aData[j]) + '">' + aData[j] + '</option>';
317+
var selected = '';
318+
if(escape(aData[j]) == currentFilter) selected = 'selected '
319+
r += '<option ' + selected + ' value="' + escape(aData[j]) + '">' + aData[j] + '</option>';
285320
}
286321
else {
287-
r += '<option value="' + escape(aData[j].value) + '">' + aData[j].label + '</option>';
322+
var selected = '';
323+
if(escape(aData[j].value) == currentFilter) selected = 'selected '
324+
r += '<option ' + selected + 'value="' + escape(aData[j].value) + '">' + aData[j].label + '</option>';
288325
}
289326
}
290327

@@ -522,7 +559,6 @@
522559
iFilteringDelay: 500,
523560
aoColumns: null,
524561
sRangeFormat: "From {from} to {to}"
525-
526562
};
527563

528564
properties = $.extend(defaults, options);
@@ -536,6 +572,8 @@
536572
if (properties.sPlaceHolder == "head:after") {
537573
var tr = $("thead tr:last", oTable).detach();
538574
tr.prependTo($("thead", oTable));
575+
/*Fixed a bug in specifying thead:after where filters were getting intermixed with sort columns even when using datatables bSortCellsTop. Changed prependTo to appendTo*/
576+
//tr.appendTo($("thead", oTable)); - this does not work with numberRange.html example
539577
sFilterRow = "thead tr:last";
540578
} else if (properties.sPlaceHolder == "head:before") {
541579
var tr = $("thead tr:first", oTable).detach();
@@ -548,7 +586,8 @@
548586
i = index;
549587
var aoColumn = { type: "text",
550588
bRegex: false,
551-
bSmart: true
589+
bSmart: true,
590+
iFilterLength: 0
552591
};
553592
if (properties.aoColumns != null) {
554593
if (properties.aoColumns.length < i || properties.aoColumns[i] == null)
@@ -571,7 +610,7 @@
571610
sRangeFormat = properties.sRangeFormat
572611
switch (aoColumn.type) {
573612
case "number":
574-
fnCreateInput(oTable, true, false, true);
613+
fnCreateInput(oTable, true, false, true, aoColumn.iFilterLength);
575614
break;
576615

577616
case "select":
@@ -590,7 +629,7 @@
590629
default:
591630
bRegex = (aoColumn.bRegex == null ? false : aoColumn.bRegex);
592631
bSmart = (aoColumn.bSmart == null ? false : aoColumn.bSmart);
593-
fnCreateInput(oTable, bRegex, bSmart, false);
632+
fnCreateInput(oTable, bRegex, bSmart, false, aoColumn.iFilterLength);
594633
break;
595634

596635
}

‎serverSideDelay.html‎

Lines changed: 158 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,158 @@
1+
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2+
<html><head>
3+
4+
5+
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
6+
<link rel="shortcut icon" type="image/ico" href="http://www.sprymedia.co.uk/media/images/favicon.ico">
7+
8+
<title>Using DataTable with column filter plugin - Server Side Example</title>
9+
<style type="text/css" title="currentStyle">
10+
@import "media/css/demo_page.css";
11+
@import "media/css/demo_table.css";
12+
@import "media/css/themes/base/jquery-ui.css";
13+
@import "media/css/themes/smoothness/jquery-ui-1.7.2.custom.css";
14+
</style>
15+
16+
<script src="media/js/jquery-1.4.4.min.js" type="text/javascript"></script>
17+
<script src="media/js/jquery.dataTables.js" type="text/javascript"></script>
18+
19+
<script src="media/js/jquery-ui.js" type="text/javascript"></script>
20+
21+
<script src="media/js/jquery.dataTables.columnFilter.js" type="text/javascript"></script>
22+
23+
<script type="text/javascript" charset="utf-8">
24+
$(document).ready( function () {
25+
$('#example').dataTable({
26+
"bProcessing": true,
27+
"bServerSide": true,
28+
//"sAjaxSource": "server_processing.js"
29+
"sAjaxSource": "http://datatables.net/release-datatables/examples/server_side/scripts/jsonp.php",
30+
"fnServerData": function( sUrl, aoData, fnCallback ) {
31+
$.ajax( {
32+
"url": sUrl,
33+
"data": aoData,
34+
"success": fnCallback,
35+
"dataType": "jsonp",
36+
"cache": false
37+
} );
38+
}
39+
}
40+
).columnFilter({
41+
aoColumns: [ { type: "text", iFilterLength: 1 },
42+
{ type: "text", iFilterLength: 2 },
43+
{ type: "text", iFilterLength: 3 },
44+
{ type: "text" }
45+
],
46+
47+
48+
});
49+
50+
} );
51+
</script>
52+
<script type="text/javascript">
53+
54+
var _gaq = _gaq || [];
55+
_gaq.push(['_setAccount', 'UA-17838786-4']);
56+
_gaq.push(['_trackPageview']);
57+
58+
(function () {
59+
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
60+
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
61+
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
62+
})();
63+
64+
</script>
65+
</head>
66+
67+
68+
69+
70+
<body id="dt_example">
71+
<div id="container">
72+
<a href="index.html">Home</a>
73+
<a href="http://code.google.com/p/jquery-datatables-column-filter/wiki/ColumnFilter">Wiki</a>
74+
<div class="full_width big">
75+
76+
JQuery DataTable Column Filter - Server Side Example with delayed filter
77+
</div>
78+
79+
<h1>Preamble</h1>
80+
<p>
81+
In the server-side mode it might be a performance issue if plugin sends request each time user types
82+
a new charater. To prevent this you can set iFilterLength parameter in each column. Filtering will
83+
not be performed until user types a leasts iFilterLength characters in the filter text box.
84+
</p>
85+
86+
<p>Many thanks to Mike Robellard for this code</p>
87+
88+
89+
90+
<h1>Live example</h1>
91+
92+
<p>In the following example on the second column is set minimum filtering length 2 characters, and in the third column
93+
is set minimum filtering length 3 characters.
94+
</p>
95+
96+
97+
98+
99+
100+
<div id="demo">
101+
102+
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
103+
<thead>
104+
<tr>
105+
<th>Rendering engine</th>
106+
<th>Browser</th>
107+
<th>Platform(s)</th>
108+
<th>Engine version</th>
109+
<th>CSS grade</th>
110+
</tr>
111+
</thead>
112+
<tfoot>
113+
<tr>
114+
115+
<th>Rendering engine</th>
116+
<th>Browser</th>
117+
<th>Platform(s)</th>
118+
<th>Engine version</th>
119+
<th>CSS grade</th>
120+
</tr>
121+
</tfoot>
122+
<tbody>
123+
</tbody>
124+
</table>
125+
126+
</div>
127+
<div class="spacer"></div>
128+
129+
130+
131+
132+
133+
134+
<h1>Other examples</h1>
135+
<ul>
136+
137+
<li><a href="default.html">Basic usage</a></li>
138+
<li><a href="customFilters.html">Custom filters</a></li>
139+
<li><a href="dateRange.html">Date ranges</a></li>
140+
<li><a href="numberRange.html">Number ranges</a></li>
141+
<li><a href="serverSide.html">Server-side filtering</a></li>
142+
<li><a href="regex.html">Regular expression filtering</a></li>
143+
</ul>
144+
145+
<div id="footer" style="text-align:center;">
146+
<span style="font-size:10px;">
147+
DataTables Column Filter Add-on &copy; Jovan Popovic 2011.<br>
148+
DataTables designed and created by <a href="http://www.sprymedia.co.uk">Allan Jardine</a> &copy; 2007-2011<br>
149+
</span>
150+
</div>
151+
</div>
152+
</body>
153+
154+
155+
156+
157+
158+
</html>

0 commit comments

Comments
 (0)