The best place to find jQuery plugins !

Welcome on myjqueryplugins,

the best jquery plugins library !

Add your jQuery plugin.

Connect it with GitHub and create your plugin Homepage.

Make known your plugin to the community or link it to your own website !

jui_filter_rules : Create dataset filter rules as JSON object and the relevant WHERE SQL.

Tags :

Plugin rate :

jui_filter_rules is a jQuery plugin, useful to create dataset filter rules as JSON object and the relevant WHERE SQL. Fully configurable. Localization support.

  • Requires jquery (>=1.6)
  • moment.js and jquery-ui are not required but highly recommended for full functionality
  • For touch event support jquery.ui.touch-punch.min.js could be used

  • Tested with jquery >=1.8.3 moment.js 1.7.2 and jquery-ui >=1.9.2)

Copyright Christos Pontikis
Release: 1.0.0 (24 Jan 2013)

License MIT

Project page

http://pontikis.net/labs/jui_filter_rules

Demo

http://pontikis.net/labs/jui_filter_rules/demo

Documentation

http://pontikis.net/labs/jui_filter_rules/docs

Support Forum

http://pontikis.net/bbs

Implementation: 

HTML (head section)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<link rel="stylesheet" href="/path/to/jqueryui_theme/jquery-ui.css">
<link rel="stylesheet" href="/path/to/jquery.jui_filter_rules.css">
<!--  IF CUSTOM CLASSES USED -->
<link rel="stylesheet" href="/path/to/custom.css">
 
<script type="text/javascript" src="/path/to/jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="/path/to/jquery-ui.js" type="text/javascript"></script>
<script type="text/javascript" src="/path/to/moment.js" type="text/javascript"></script>
 
<!--  IF TOUCH EVENT SUPPORT FOR TOUCH DEVICES IS NEEDED -->
<script src="/path/to/jquery.ui.touch-punch.min.js" type="text/javascript"></script>
 
<script type="text/javascript" src="/path/to/jquery.jui_filter_rules.min.js" type="text/javascript"></script>
<script type="text/javascript" src="/path/to/jui_filter_rules/localization/en.js" type="text/javascript"></script>

JS code

The following analytic example demonstrates most common filter types:

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
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
$("#demo_rules1").jui_filter_rules({
 
    filters: [
        {
            filterName: "Lastname", "filterType": "text", field: "lastname", filterLabel: "Last name",
            excluded_operators: ["in", "not_in"],
            filter_interface: [
                {
                    filter_element: "input",
                    filter_element_attributes: {"type": "text", "value": "Smith", "class": "lastname"}
                }
            ]
        },
        {
            filterName: "AgeInYears", "filterType": "number", field: "age", filterLabel: "Age (years)",
            excluded_operators: ["in", "not_in"],
            filter_interface: [
                {
                    filter_element: "input",
                    filter_element_attributes: {type: "text"}
                }
            ]
        },
        {
            filterName: "GroupMembers", "filterType": "number", field: "group_members", filterLabel: "Group Members",
            excluded_operators: ["in", "not_in"],
            filter_interface: [
                {
                    filter_element: "input",
                    filter_element_attributes: {
                        type: "text",
                        value: "1"
                    },
                    filter_widget: "spinner",
                    filter_widget_properties: {
                        min: 1,
                        max: 10
                    }
                }
 
            ]
        },
        {
            filterName: "PerCentCompleted", "filterType": "number", field: "percent_completed", filterLabel: "PerCent Completed",
            excluded_operators: ["in", "not_in"],
            filter_interface: [
                {
                    filter_element: "input",
                    filter_element_attributes: {
                        type: "text",
                        disabled: "disabled",
                        "class": "ftl_slider_value"
                    }
                },
                {
                    filter_element: "div",
                    filter_element_attributes: {
                        "class": "ftl_slider"
                    },
                    filter_widget: "slider",
                    filter_widget_properties: {
                        min: 0,
                        max: 100,
                        slide: function(event, ui) {
                            $(this).prev("input").val(ui.value);
                        }
                    },
                    returns_no_value: "yes"
                }
            ]
        },
        {
            filterName: "DateInserted", "filterType": "date", field: "date_inserted", filterLabel: "Date inserted",
            excluded_operators: ["in", "not_in"],
            filter_interface: [
                {
                    filter_element: "input",
                    filter_element_attributes: {
                        type: "text",
                        title: "Set the date using format: dd/mm/yyyy"
                    },
                    filter_widget: "datepicker",
                    filter_widget_properties: {
                        dateFormat: "dd/mm/yy",
                        changeMonth: true,
                        changeYear: true
                    }
                }
            ],
            validate_dateformat: ["DD/MM/YYYY"],
            filter_value_conversion_server_side: {
                function_name: "date_encode",
                args: [
                    {"filter_value": "yes"},
                    {"value": "d/m/Y"}
                ]
            }
        },
        {
            filterName: "DateUpdated", "filterType": "date", field: "date_updated", filterLabel: "Datetime updated",
            excluded_operators: ["in", "not_in"],
            filter_interface: [
                {
                    filter_element: "input",
                    filter_element_attributes: {
                        type: "text",
                        title: "Set the date and time using format: dd/mm/yyyy hh:mm:ss"
                    },
                    filter_widget: "datetimepicker",
                    filter_widget_properties: {
                        dateFormat: "dd/mm/yy",
                        timeFormat: "HH:mm:ss",
                        changeMonth: true,
                        changeYear: true,
                        showSecond: true
                    }
                }
            ],
            validate_dateformat: ["DD/MM/YYYY HH:mm:ss"],
            filter_value_conversion: {
                function_name: "local_datetime_to_UTC_timestamp",
                args: [
                    {"filter_value": "yes"},
                    {"value": "DD/MM/YYYY HH:mm:ss"}
                ]
            }
        },
        {
            filterName: "Category", "filterType": "number", field: "category", filterLabel: "Category (ajax data)",
            excluded_operators: ["equal", "not_equal", "less", "less_or_equal", "greater", "greater_or_equal"],
            filter_interface: [
                {
                    filter_element: "input",
                    filter_element_attributes: {type: "checkbox"},
                    vertical_orientation: "yes"
                }
            ],
            lookup_values_ajax_url: "ajax/ajax_categories.php"
        },
        {
            filterName: "Level", "filterType": "number", field: "level", filterLabel: "Level",
            excluded_operators: ["in", "not_in", "less", "less_or_equal", "greater", "greater_or_equal"],
            filter_interface: [
                {
                    filter_element: "input",
                    filter_element_attributes: {type: "radio"}
                }
            ],
            lookup_values: [
                {lk_option: "Level1", lk_value: "1"},
                {lk_option: "Level2", lk_value: "2"},
                {lk_option: "Level3", lk_value: "3", lk_selected: "yes"}
            ]
        },
        {
            filterName: "Language", "filterType": "text", field: "language", filterLabel: "Language code (ajax data)",
            excluded_operators: ["in", "not_in", "less", "less_or_equal", "greater", "greater_or_equal"],
            filter_interface: [
                {
                    filter_element: "select",
                    filter_element_attributes: {size: "1"}
                }
            ],
            lookup_values_ajax_url: "ajax/ajax_languages.php"
        },
        {
            filterName: "Company", "filterType": "number", field: "company", filterLabel: "Company",
            excluded_operators: ["in", "not_in", "less", "less_or_equal", "greater", "greater_or_equal"],
            filter_interface: [
                {
                    filter_element: "select",
                    filter_element_attributes: {size: "1"}
                }
            ],
            lookup_values: [
                {lk_option: "Company1", lk_value: "1"},
                {lk_option: "Company2", lk_value: "2"},
                {lk_option: "Company3", lk_value: "3", lk_selected: "yes"}
            ]
        },
        {
            filterName: "Country", "filterType": "text", field: "country", filterLabel: "Country code",
            excluded_operators: ["in", "not_in", "less", "less_or_equal", "greater", "greater_or_equal"],
            filter_interface: [
                {
                    filter_element: "input",
                    filter_element_attributes: {type: "text", disabled: "disabled", "class": "ftl_autocomplete_value"}
                },
                {
                    filter_element: "input",
                    filter_element_attributes: {type: "text", "class": "ftl_autocomplete"},
                    filter_widget: "autocomplete",
                    filter_widget_properties: {
                        source: "ajax/ajax_countries.php",
                        minLength: 1,
                        select: function(event, ui) {
                            $(this).prev("input").val(ui.item.id);
                        },
                        // MUSTMATCH IMPLEMENTATION
                        change: function(event, ui) {
                            if(ui.item == null) {
                                $(this).val('');
                                $(this).prev("input").val('');
                            }
                        }
                    },
                    returns_no_value: "yes"
                }
            ]
        }
    ],
 
    decimal_separator: ".",
 
    htmlentities: false,
 
    onValidationError: function(event, data) {
        alert(data["err_description"] + ' (' + data["err_code"] + ')');
        if(data.hasOwnProperty("elem_filter")) {
            data.elem_filter.focus();
        }
    }
 
});

Options: 
filters
Array
Default : [] - the filters to apply (see DETAILED EXAMPLE above)
decimal_separator
String
Default : . - decimal separator
htmlentities
Boolean
Default : false - apply htmlentities in filters value
Methods: 
getRules
Function
Returns : object - get Rules
markRuleAsApplied
Function
mark rule as applied
markRuleAsError
Function
mark rule as error
markRuleAsPending
Function
mark rule as pending
markAllRulesAsApplied
Function
mark all rules as applied
clearAllRules
Function
clear all rules
Screenshots

Comments

great

Add new comment

To prevent automated spam submissions leave this field empty.

Plain text

  • Lines and paragraphs break automatically.
  • Allowed HTML tags: <p> <br> <br />

Informations

jQuery
>= 1.7
jQuery U.I
>= 1.8
Current version
1.0.0
Browsers compatibility
Google ChromeIE 8IE 9Mozilla FirefoxOperaSafari
Fork it on github Comments [1]