<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery QueryBuilder Example</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jQuery-QueryBuilder/2.4.2/jQuery-QueryBuilder.min.css">
</head>
<body>
<div id="query-builder"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-QueryBuilder/2.4.2/jQuery-QueryBuilder.min.js"></script>
<script>
$(document).ready(function() {
$('#query-builder').queryBuilder({
filters: [
{
id: 'name',
label: 'Name',
type: 'string',
operators: ['equal', 'not_equal', 'contains', 'not_contains']
},
{
id: 'age',
label: 'Age',
type: 'integer',
operators: ['equal', 'not_equal', 'less', 'less_or_equal', 'greater', 'greater_or_equal']
}
]
});
});
</script>
</body>
</html>