Skip to content

Commit ffe1b34

Browse files
JocaPCJocaPC
committed
Added example with server side filtering with initialization.
1 parent fb618a3 commit ffe1b34

File tree

1 file changed

+175
-0
lines changed

1 file changed

+175
-0
lines changed

‎serverSideInitFilter.html‎

Lines changed: 175 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,175 @@
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+
var $dt =
26+
$('#example').dataTable({
27+
"bProcessing": true,
28+
"bServerSide": true,
29+
//"sAjaxSource": "server_processing.js"
30+
"sAjaxSource": "http://datatables.net/release-datatables/examples/server_side/scripts/jsonp.php",
31+
"fnServerData": function( sUrl, aoData, fnCallback ) {
32+
$.ajax( {
33+
"url": sUrl,
34+
"data": aoData,
35+
"success": fnCallback,
36+
"dataType": "jsonp",
37+
"cache": false
38+
} );
39+
}
40+
});
41+
var oSettings = $dt.fnSettings();
42+
oSettings.aoPreSearchCols[ 0 ].sSearch = "Trident";
43+
oSettings.aoPreSearchCols[ 1 ].sSearch = "5";
44+
$dt.fnDraw();
45+
46+
$dt.columnFilter({
47+
aoColumns: [
48+
{ type: "select", values: [ 'Gecko', 'Trident "New"', 'Trident', 'KHTML', 'Misc', 'Presto', 'Webkit', 'Tasman'] },
49+
{ type: "text" },
50+
{ type: "text" },
51+
{ type: "text" }
52+
]
53+
});
54+
55+
$("[rel=0]", $dt).val("Trident");
56+
$("[rel=1]", $dt).val("5");
57+
58+
} );
59+
</script>
60+
<script type="text/javascript">
61+
62+
var _gaq = _gaq || [];
63+
_gaq.push(['_setAccount', 'UA-17838786-4']);
64+
_gaq.push(['_trackPageview']);
65+
66+
(function () {
67+
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
68+
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
69+
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
70+
})();
71+
72+
</script>
73+
</head>
74+
75+
76+
77+
78+
<body id="dt_example">
79+
<div id="container">
80+
<a href="index.html">Home</a>
81+
<a href="http://code.google.com/p/jquery-datatables-column-filter/wiki/ColumnFilter">Wiki</a>
82+
<div class="full_width big">
83+
84+
JQuery DataTable Column Filter - Server Side Example
85+
</div>
86+
87+
<h1>Preamble</h1>
88+
<p>
89+
DataTables ColumnFilter add-in works in the Server-side mode. Live example below is configured to use server-side
90+
processing code. On the live demo site is used JSONP processing because live server processing page is placed on the DataTables site.
91+
</p>
92+
<p>
93+
94+
Note that in the server-side mode you must define values for the select list in the dropdown - autobuild will not work because
95+
in the column are not placed all values that can be used for filtering. Also, if you put the range filters in the columns you
96+
start and end values will be sent in the start~end format. You will need to parse it on the server-side and return filtered
97+
informaiton back to plugin.
98+
</p>
99+
100+
101+
102+
103+
<h1>Live example</h1>
104+
105+
106+
107+
108+
109+
110+
111+
<div id="demo">
112+
113+
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
114+
<thead>
115+
<tr>
116+
<th>Rendering engine</th>
117+
<th>Browser</th>
118+
<th>Platform(s)</th>
119+
<th>Engine version</th>
120+
<th>CSS grade</th>
121+
</tr>
122+
</thead>
123+
<tfoot>
124+
<tr>
125+
126+
<th>Rendering engine</th>
127+
<th>Browser</th>
128+
<th>Platform(s)</th>
129+
<th>Engine version</th>
130+
<th>CSS grade</th>
131+
</tr>
132+
</tfoot>
133+
<tbody>
134+
</tbody>
135+
</table>
136+
137+
</div>
138+
<div class="spacer"></div>
139+
140+
141+
142+
143+
144+
<h1>Initialization code</h1>
145+
146+
<p>There are no additional settings here - if you set-up dataTables in the server-side processing mode, filter requests will just be redirected to the server-side.</p>
147+
148+
149+
<h1>Other examples</h1>
150+
<ul>
151+
152+
<li><a href="default.html">Basic usage</a></li>
153+
<li><a href="customFilters.html">Custom filters</a></li>
154+
<li><a href="dateRange.html">Date ranges</a></li>
155+
<li><a href="numberRange.html">Number ranges</a></li>
156+
<li><a href="ajaxSource.html">Ajax source filtering</a></li>
157+
<li><a href="serverSide.html">Server-side filtering</a></li>
158+
<li><a href="regex.html">Regular expression filtering</a></li>
159+
<li><a href="external.html">Filtering via external form</a></li>
160+
</ul>
161+
162+
<div id="footer" style="text-align:center;">
163+
<span style="font-size:10px;">
164+
DataTables Column Filter Add-on &copy; Jovan Popovic 2011.<br>
165+
DataTables designed and created by <a href="http://www.sprymedia.co.uk">Allan Jardine</a> &copy; 2007-2011<br>
166+
</span>
167+
</div>
168+
</div>
169+
</body>
170+
171+
172+
173+
174+
175+
</html>

0 commit comments

Comments
 (0)