123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514 |
- /*Tabulator Init*/
- var tabledata = [{
- id: 1,
- name: "Oli Bob",
- progress: 12,
- gender: "male",
- rating: 1,
- col: "red",
- dob: "19/02/1984",
- car: 1,
- lucky_no: 5,
- activity: [1, 20, 5, 3, 10, 13, 17, 15, 9, 11, 10, 12, 14, 16, 13, 9, 7, 11, 10, 13]
- },
- {
- id: 2,
- name: "Mary May",
- progress: 1,
- gender: "female",
- rating: 2,
- col: "blue",
- dob: "14/05/1982",
- car: true,
- lucky_no: 10,
- activity: [10, 12, 14, 16, 13, 9, 7, 11, 10, 13, 1, 2, 5, 4, 1, 16, 4, 2, 1, 3]
- },
- {
- id: 3,
- name: "Christine Lobowski",
- progress: 42,
- gender: "female",
- rating: 0,
- col: "green",
- dob: "22/05/1982",
- car: "true",
- lucky_no: 12,
- activity: [1, 2, 5, 4, 1, 16, 4, 2, 1, 3, 3, 7, 9, 1, 4, 8, 2, 6, 4, 2]
- },
- {
- id: 4,
- name: "Brendon Philips",
- progress: 100,
- gender: "male",
- rating: 1,
- col: "orange",
- dob: "01/08/1980",
- lucky_no: 18,
- activity: [3, 7, 9, 1, 4, 8, 2, 6, 4, 2, 1, 3, 1, 3, 3, 1, 1, 3, 1, 3]
- },
- {
- id: 5,
- name: "Margret Marmajuke",
- progress: 16,
- gender: "female",
- rating: 5,
- col: "yellow",
- dob: "31/01/1999",
- lucky_no: 33,
- activity: [1, 3, 1, 3, 3, 1, 1, 3, 1, 3, 20, 17, 15, 11, 16, 9, 12, 14, 20, 12]
- },
- {
- id: 6,
- name: "Frank Harbours",
- progress: 38,
- gender: "male",
- rating: 4,
- col: "red",
- dob: "12/05/1966",
- car: 1,
- lucky_no: 2,
- activity: [20, 17, 15, 11, 16, 9, 12, 14, 20, 12, 11, 7, 6, 12, 14, 13, 11, 10, 9, 6]
- },
- {
- id: 7,
- name: "Jamie Newhart",
- progress: 23,
- gender: "male",
- rating: 3,
- col: "green",
- dob: "14/05/1985",
- car: true,
- lucky_no: 63,
- activity: [11, 7, 6, 12, 14, 13, 11, 10, 9, 6, 4, 17, 11, 12, 0, 5, 12, 14, 18, 11]
- },
- {
- id: 8,
- name: "Gemma Jane",
- progress: 60,
- gender: "female",
- rating: 0,
- col: "red",
- dob: "22/05/1982",
- car: "true",
- lucky_no: 72,
- activity: [4, 17, 11, 12, 0, 5, 12, 14, 18, 11, 11, 15, 19, 20, 17, 16, 16, 5, 3, 2]
- },
- {
- id: 9,
- name: "Emily Sykes",
- progress: 42,
- gender: "female",
- rating: 1,
- col: "maroon",
- dob: "11/11/1970",
- lucky_no: 44,
- activity: [11, 15, 19, 20, 17, 16, 16, 5, 3, 2, 1, 2, 3, 4, 5, 4, 2, 5, 9, 8]
- },
- {
- id: 10,
- name: "James Newman",
- progress: 73,
- gender: "male",
- rating: 5,
- col: "red",
- dob: "22/03/1998",
- lucky_no: 9,
- activity: [1, 20, 5, 3, 10, 13, 17, 15, 9, 11, 1, 2, 3, 4, 5, 4, 2, 5, 9, 8]
- },
- {
- id: 11,
- name: "Martin Barryman",
- progress: 20,
- gender: "male",
- rating: 5,
- col: "violet",
- dob: "04/04/2001",
- activity: [1, 2, 3, 4, 5, 4, 11, 7, 6, 12, 14, 13, 11, 10, 9, 6, 2, 5, 9, 8]
- },
- {
- id: 12,
- name: "Jenny Green",
- progress: 56,
- gender: "female",
- rating: 4,
- col: "indigo",
- dob: "12/11/1998",
- car: true,
- activity: [11, 15, 19, 20, 17, 15, 11, 16, 9, 12, 14, 20, 12, 20, 17, 16, 16, 5, 3, 2]
- },
- {
- id: 13,
- name: "Alan Francis",
- progress: 90,
- gender: "male",
- rating: 3,
- col: "blue",
- dob: "07/08/1972",
- car: true,
- activity: [4, 17, 11, 7, 6, 12, 14, 13, 11, 10, 9, 6, 11, 12, 0, 5, 12, 14, 18, 11]
- },
- {
- id: 14,
- name: "John Phillips",
- progress: 80,
- gender: "male",
- rating: 1,
- col: "green",
- dob: "24/09/1950",
- car: true,
- activity: [11, 7, 6, 12, 14, 1, 20, 5, 3, 10, 13, 17, 15, 9, 1, 13, 11, 10, 9, 6]
- },
- {
- id: 15,
- name: "Ed White",
- progress: 70,
- gender: "male",
- rating: 0,
- col: "yellow",
- dob: "19/06/1976",
- activity: [20, 17, 15, 11, 16, 9, 4, 17, 11, 12, 0, 5, 12, 14, 18, 11, 12, 14, 20, 12]
- },
- {
- id: 16,
- name: "Paul Branderson",
- progress: 60,
- gender: "male",
- rating: 5,
- col: "orange",
- dob: "01/01/1982",
- activity: [1, 3, 1, 3, 3, 1, 11, 15, 19, 20, 17, 16, 16, 5, 3, 2, 1, 3, 1, 3]
- },
- {
- id: 18,
- name: "Emma Netwon",
- progress: 40,
- gender: "female",
- rating: 4,
- col: "brown",
- dob: "07/10/1963",
- car: true,
- activity: [3, 7, 9, 1, 4, 8, 3, 7, 9, 1, 4, 8, 2, 6, 4, 2, 2, 6, 4, 2]
- },
- {
- id: 19,
- name: "Hannah Farnsworth",
- progress: 30,
- gender: "female",
- rating: 1,
- col: "pink",
- dob: "11/02/1991",
- activity: [1, 2, 5, 4, 1, 16, 10, 12, 14, 16, 13, 9, 7, 11, 10, 13, 4, 2, 1, 3]
- },
- {
- id: 20,
- name: "Victoria Bath",
- progress: 20,
- gender: "female",
- rating: 2,
- col: "purple",
- dob: "22/03/1986",
- activity: [10, 12, 14, 16, 13, 9, 7, 1, 2, 3, 4, 5, 4, 2, 5, 9, 8, 11, 10, 13]
- },
- ];
- var tableDataNested = [{
- name: "Oli Bob",
- location: "United Kingdom",
- gender: "male",
- col: "red",
- dob: "14/04/1984",
- _children: [{
- name: "Mary May",
- location: "Germany",
- gender: "female",
- col: "blue",
- dob: "14/05/1982"
- },
- {
- name: "Christine Lobowski",
- location: "France",
- gender: "female",
- col: "green",
- dob: "22/05/1982"
- },
- {
- name: "Brendon Philips",
- location: "USA",
- gender: "male",
- col: "orange",
- dob: "01/08/1980",
- _children: [{
- name: "Margret Marmajuke",
- location: "Canada",
- gender: "female",
- col: "yellow",
- dob: "31/01/1999"
- },
- {
- name: "Frank Harbours",
- location: "Russia",
- gender: "male",
- col: "red",
- dob: "12/05/1966"
- },
- ]
- },
- ]
- },
- {
- name: "Jamie Newhart",
- location: "India",
- gender: "male",
- col: "green",
- dob: "14/05/1985"
- },
- {
- name: "Gemma Jane",
- location: "China",
- gender: "female",
- col: "red",
- dob: "22/05/1982",
- _children: [{
- name: "Emily Sykes",
- location: "South Korea",
- gender: "female",
- col: "maroon",
- dob: "11/11/1970"
- },]
- },
- {
- name: "James Newman",
- location: "Japan",
- gender: "male",
- col: "red",
- dob: "22/03/1998"
- },
- ];
-
- var nestedData = [{
- id: 1,
- make: "Ford",
- model: "focus",
- reg: "P232 NJP",
- color: "white",
- serviceHistory: [{
- date: "01/02/2016",
- engineer: "Steve Boberson",
- actions: "Changed oli filter"
- },
- {
- date: "07/02/2017",
- engineer: "Martin Stevenson",
- actions: "Break light broken"
- },
- ]
- },
- {
- id: 1,
- make: "BMW",
- model: "m3",
- reg: "W342 SEF",
- color: "red",
- serviceHistory: [{
- date: "22/05/2017",
- engineer: "Jimmy Brown",
- actions: "Aligned wheels"
- },
- {
- date: "11/02/2018",
- engineer: "Lotty Ferberson",
- actions: "Changed Oil"
- },
- {
- date: "04/04/2018",
- engineer: "Franco Martinez",
- actions: "Fixed Tracking"
- },
- ]
- },
- ]
- var rowMenu = [{
- label: "Change Name",
- action: function (e, row) {
- row.update({
- name: "Steve Bobberson"
- });
- }
- },
- {
- label: "Select Row",
- action: function (e, row) {
- row.select();
- }
- },
- {
- separator: true,
- },
- {
- label: "Delete Row",
- action: function (e, row) {
- row.delete();
- }
- },
- ]
-
- //define row context menu
- var headerMenu = [{
- label: "COUNT",
- action: function (e, column) {
- //column.hide();
- }
- },
- {
- label: "SUM",
- action: function (e, column) {
- //column.move("col");
- }
- },
- {
- label: "AVERAGE",
- action: function (e, column) {
- //column.move("col");
- }
- },
- {
- label: "MAX",
- action: function (e, column) {
- //column.move("col");
- }
- },
- {
- label: "MIN",
- action: function (e, column) {
- //column.move("col");
- }
- },
- {
- separator: true,
- },
- {
- label: "Calendar",
- action: function (e, column) {
- //column.move("col");
- }
- },
- {
- label: "Hide Column",
- action: function (e, column) {
- //column.move("col");
- }
- },
- {
- label: "Remove column",
- action: function (e, column) {
- //column.move("col");
- }
- }
- ]
-
- var table = new Tabulator("#tabulator-example", {
- height: '100%',
- data: tabledata,
- layout: "fitColumns",
- responsiveLayout: "hide",
- tooltips: true,
- addRowPos: "top",
- history: true,
- movableColumns: true,
- resizableRows: true,
- langs: {
- "fr-fr": { //French language definition
- "columns": {
- "name": "Nom",
- "gender": "Genre",
- "col": "Couleur",
- "dob": "Date de Naissance",
- },
- "pagination": {
- "first": "Premier",
- "first_title": "Première Page",
- "last": "Dernier",
- "last_title": "Dernière Page",
- "prev": "Précédent",
- "prev_title": "Page Précédente",
- "next": "Suivant",
- "next_title": "Page Suivante",
- "all": "Toute",
- },
- },
- "de-de": { //German language definition
- "columns": {
- "name": "Name",
- "gender": "Genre",
- "col": "Farbe",
- "dob": "Geburtsdatum",
- },
- "pagination": {
- "first": "Zuerst",
- "first_title": "Zuerst Seite",
- "last": "Last",
- "last_title": "Letzte Seite",
- "prev": "Zurück",
- "prev_title": "Zurück Seite",
- "next": "Nächster",
- "next_title": "Nächster Seite",
- "all": "Alle",
- },
- },
- },
- initialSort: [{
- column: "name",
- dir: "asc"
- },],
- columns: [
- {
- title: "#",
- field: "id",
- width: 100,
- minWidth: 80,
- },
- {
- title: "Name",
- field: "name",
- headerMenu: headerMenu,
- minWidth: 100,
- },
- {
- title: "Gender",
- field: "gender",
- headerMenu: headerMenu,
- width: 195,
- editorParams: {
- values: ["male", "female"]
- },
- editableTitle: true
- },
- {
- title: "Rating",
- field: "rating",
- width: 100,
- minWidth: 150,
- editableTitle: true
- },
- {
- title: "Color",
- field: "col",
- headerMenu: headerMenu,
- width: 130,
- editableTitle: true
- },
- {
- title: "Date Of Birth",
- field: "dob",
- headerMenu: headerMenu,
- width: 180,
- sorter: "date",
- hozAlign: "center",
- editableTitle: true
- }
- ],
- });
-
- $("#tabulator-controls input[name=name]").on("keyup", function () {
- table.setFilter("name", "like", $(this).val())
- });
|