var grid; function addFilter(){ grid.addFilter('age', 30, '<='); } function clearFilter(){ grid.clearFilter('age', '<='); } document.addEventListener("DOMContentLoaded", function() { grid = new FancyGrid({ title: 'Paging', renderTo: 'container', width: 550, height: 500, data: data, paging: true, filter: true, defaults: { resizable: true, draggable: true }, columns: [{ index: 'name', title: 'Name' }, { index: 'surname', title: 'SurName' }, { index: 'age', title: 'Age' }, { index: 'country', title: 'Country' }, { index: 'position', title: 'Position' }, { index: 'email', title: 'Email' }] }); }); var data = [{ "name": "Elizabeth", "surname": "Woods", "id": 1, "country": "USA", "position": "Software Tester", "email": "[email protected]", "age": 28 }, { "name": "Ryan", "surname": "Phillips", "id": 2, "country": "Singapore", "position": "Software Tester", "email": "[email protected]", "age": 23 }, { "name": "Grace", "surname": "Thomson", "id": 3, "country": "Netherlands", "position": "Ruby Developer", "email": "[email protected]", "age": 35 }, { "name": "Jose", "surname": "Martin", "id": 4, "country": "Luxembourg", "position": "Angular Developer", "email": "[email protected]", "age": 32 }, { "name": "Luis", "surname": "Smith", "id": 5, "country": "Denmark", "position": "Frontend Developer", "email": "[email protected]", "age": 30 }, { "name": "Ed", "surname": "Baker", "id": 6, "country": "Norway", "position": "QA Engineer", "email": "[email protected]", "age": 35 }, { "name": "Sophia", "surname": "Hamilton", "id": 7, "country": "Netherlands", "position": "Java Developer", "email": "[email protected]", "age": 42 }, { "name": "Christopher", "surname": "Walker", "id": 8, "country": "San Marino", "position": "Oracle Engineer", "email": "[email protected]", "age": 37 }, { "name": "William", "surname": "Garcia", "id": 9, "country": "Belgium", "position": "Oracle Engineer", "email": "[email protected]", "age": 42 }, { "name": "Alexander", "surname": "Johnson", "id": 10, "country": "Germany", "position": "Software Tester", "email": "[email protected]", "age": 36 }, { "name": "John", "surname": "Tucker", "id": 11, "country": "Sweden", "position": "Ruby Developer", "email": "[email protected]", "age": 28 }, { "name": "Addison", "surname": "Wilson", "id": 12, "country": "Sweden", "position": "Angular Developer", "email": "[email protected]", "age": 36 }, { "name": "David", "surname": "Clark", "id": 13, "country": "Denmark", "position": "Python Developer", "email": "[email protected]", "age": 20 }, { "name": "Carlos", "surname": "Richardson", "id": 14, "country": "Netherlands", "position": "React Developer", "email": "[email protected]", "age": 25 }, { "name": "Noah", "surname": "West", "id": 15, "country": "Hong Kong", "position": "Scala Developer", "email": "[email protected]", "age": 28 }, { "name": "Alexander", "surname": "Hill", "id": 16, "country": "USA", "position": "QA Engineer", "email": "[email protected]", "age": 24 }, { "name": "Emily", "surname": "Simpson", "id": 17, "country": "Netherlands", "position": "PHP Developer", "email": "[email protected]", "age": 20 }, { "name": "Ted", "surname": "Clark", "id": 18, "country": "Finland", "position": "Software Tester", "email": "[email protected]", "age": 37 }, { "name": "Anna", "surname": "Baker", "id": 19, "country": "Ireland", "position": "DevOps", "email": "[email protected]", "age": 20 }, { "name": "Daniel", "surname": "Thomson", "id": 20, "country": "Germany", "position": "Python Developer", "email": "[email protected]", "age": 22 }];