<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
link
rel
=
"stylesheet"
href
=
"jqwidgets/styles/jqx.base.css"
type
=
"text/css"
/>
<
script
type
=
"text/javascript"
src
=
"scripts/jquery-1.11.1.min.js"
>
</
script
>
<
script
type
=
"text/javascript"
src
=
"jqwidgets/jqxcore.js"
>
</
script
>
<
script
type
=
"text/javascript"
src
=
"jqwidgets/jqxdata.js"
>
</
script
>
<
script
type
=
"text/javascript"
src
=
"jqwidgets/jqxbuttons.js"
>
</
script
>
<
script
type
=
"text/javascript"
src
=
"jqwidgets/jqxscrollbar.js"
>
</
script
>
<
script
type
=
"text/javascript"
src
=
"jqwidgets/jqxmenu.js"
>
</
script
>
<
script
type
=
"text/javascript"
src
=
"jqwidgets/jqxgrid.js"
>
</
script
>
<
script
type
=
"text/javascript"
src
=
"jqwidgets/jqxgrid.selection.js"
>
</
script
>
<
script
type
=
"text/javascript"
src
=
"jqwidgets/jqxgrid.columnsresize.js"
>
</
script
>
</
head
>
<
body
>
<
center
>
<
h1
style
=
"color: green"
>
GeeksforGeeks
</
h1
>
<
h3
>
jQWidgets jqxGrid getfilterinformation()
method
</
h3
><
br
/>
<
div
id
=
"jqxg"
></
div
>
<
div
>
<
input
type
=
"button"
id
=
"jqxBtn"
style
=
"margin-top: 25px"
value
=
"Click here"
/>
</
div
>
<
div
id
=
"log"
></
div
>
</
center
>
<
script
type
=
"text/javascript"
>
$(document).ready(function () {
var d = new Array();
var subjectNames =
["C++", "Scala", "Java", "C", "R", "JavaScript"];
var pageNumber =
["7", "8", "12", "11", "10", "19"];
for (var j = 0; j <
50
; j++) {
var r = {};
r["subjectnames"] =
subjectNames[(Math.floor(
Math.random() * subjectNames.length))
];
r["pagenumber"] =
pageNumber[(Math.floor(
Math.random() * pageNumber.length))
];
d[j] = r;
}
var src = {
localdata: d,
datatype: "array",
};
var
data_Adapter
=
new
$.jqx.dataAdapter(src);
$("#jqxg").jqxGrid({
source: data_Adapter,
theme: 'energyblue',
filterable: true,
height: "230px",
width: "240px",
columns: [
{
text: "Subject Name",
datafield: "subjectnames",
width: "120px",
},
{
text: "Page No.",
datafield: "pagenumber",
width: "120px",
},
],
});
$("#jqxBtn").jqxButton({
width: "180px",
height: "30px",
});
var
add_filter
=
function
() {
var
fg
=
new
$.jqx.filter();
var
val
=
'ja'
;
var
conditn
=
'contains'
;
var
opratr
=
2
;
var
fltr
=
fg
.createfilter('stringfilter', val, conditn);
fg.addfilter(opratr, fltr);
$("#jqxg").jqxGrid('addfilter', 'subjectnames', fg);
$("#jqxg").jqxGrid('applyfilters');
}
$("#jqxBtn").on("click", function () {
add_filter();
var gfi = $("#jqxg").jqxGrid('getfilterinformation');
var
details
=
""
;
for (var
j
=
0
; j < gfi.length; j++) {
var
Fg
=
gfi
[j];
details += Fg.filtercolumn;
var
f
=
Fg
.filter.getfilters();
for (var
k
=
0
; k < f.length; k++) {
details += ", \nValue to be filtered: " + f[k].value;
details += ", \nCondition applied: " + f[k].condition;
details += ", \nOperator used: " + f[k].operator;
}
}
$("#log").html("Column to be filtered: " + details);
});
});
</script>
</
body
>
</
html
>