2e:null 2f:["$","title",null,{"children":"Prototype Table | Bildungsplanung Kanton Zürich | Observable"}] 34:T522d,makeDataTable = function ( data, meta, chartconfig, containerId = "container", filterValues = filterView, filterViewof = viewof filterView ) { /** * makeDataTable creates a data table inside an existing html-container. It includes one filter view at the top * @param {Object[]} data The data to be displayed in the table * * @param {Object} meta The metadata to be displayed around the chart * @param {string} [meta.title] A title for the chart, the title is not shown if it is empty or not provided * @param {boolean} [meta.titleHide = false] If true the title is only shown in full screen and on exports * @param {string} [meta.subtitle] A subtitle for the chart, the subtitle is not shown if it is empty or not provided * @param {boolean} [meta.subtitleHide = false] If true the subtitle is only shown in full screen and on exports * @param {string} [meta.descriptionTop] A description to be displayed above the chart, the descriptionTop is not shown if it is empty or not provided * @param {boolean} [meta.descriptionTopHide = false] If true descriptionTop is only shown in full screen and on exports * @param {string} [meta.description] A description to be displayed below the chart, the description is not shown if it is empty or not provided. * @param {boolean} [meta.descriptionHide = false] If true description is only shown in full screen and on exports * @param {string} meta.source A data source to be displayed below the chart * @param {string} meta.statusDate A date to be displayed below the chart, showing the date the data was generated * @param {string} [meta.readingExampleContent] A reading example to be displayed below the chart, the reading example is not shown if it is empty or not provided * @param {boolean} [meta.readingExampleHide = false] If true the reading example is only shown in full screen * @param {string} [meta.dataLimitsContent] A data limits text to be displayed below the chart, data limits is not shown if it is empty or not provided * @param {boolean} [meta.dataLimisHide = false] If true data limits is only shown in full screen * * @param {Object[]} meta.columns An array of objects with different attributes describing the data columns, this is needed for the table as well as the export functions * @param {string} meta.columns.columnKey The key of the data column in the data objects * @param {string} meta.columns.columnName The name of the data column in the data objects to be displayed to the public * @param {string('year' | 'string' | 'int' | 'percent' | 'float' | 'float2' | 'float6' | 'date' | 'datemonthyear' | 'dateyear' | 'miochf' | 'chf' | 'floatha' | 'terrajoule')} meta.columns.type The data type of the data column in the data objects, used for formating the data * @param {number} meta.columns.order A number ordering the columns for diplay in the table and in exports * @param {boolean} meta.columns.display A boolean to hide technical columns in the table and in exports * @param {boolean} meta.columns.filter True if a column is used as a filter attribute * @param {number} meta.columns.responsivePriority An integer to prioritize the display of columns, mainly used in responsive table displays Columns with a high value of responsivePriority get hidden fist. If not provided the responsive priority is from ascending from left to right. * @param {boolean} meta.columns.highlight A boolean to decide if a column should be highlighted * @param {Object[]} [meta.highlightRows] An array of oject with different attributes describing rows to be highlighted * @param {string} meta.highlightRows.columnKey The key of the column in which to look for the selector * @param {string} meta.highlightRows.selector The selector to decide if the row is highlighted * * @param {Object} chartconfig The configuration in connection with this particular table * @param {string} [chartconfig.charttype] The type of chart to be generated from this dataset. At the moment only used for documentation * @param {boolean} [chartconfig.fullscreen = false] If true the fullscreen button is displayed in the dropdown * @param {boolean} [chartconfig.embed = false] If true the embed button is displayed in the dropdown * @param {boolean} [chartconfig.downloadpng = false] If true the download button for png is displayed in the dropdown (mostly not used with tables) * @param {boolean} [chartconfig.downloadsvg = false] If true the download button for svg is displayed in the dropdown (mostly not used with tables) * @param {boolean} [chartconfig.downloadxlsxall = false] If true the download button for the xlsx-file for the entire dataset is displayed in the dropdown * @param {boolean} [chartconfig.downloadxlsx = false] If true the download button for xlsx-file for the filtered dataset is displayed in the dropdown * @param {boolean} [chartconfig.downloadcsvall = false] If true the download button for the csv-file for the entire dataset is displayed in the dropdown * @param {boolean} [chartconfig.downloadscv = false] If true the download button for csv-file for the filtered dataset is displayed in the dropdown * * @param {boolean} [chartconfig.ordering = false] If true the table can be reordered by each column by clicking the column header * @param {boolean} [chartconfig.colReorder = false] If true the columns can be reordered by draging and droping the column header * @param {string} [chartconfig.colGroupDelim] String that delimits the column group name from the column name for two level column names. Usually ": ". No column grouping if left empty or undefined. * @param {string} [chartconfig.rowGroup] The name of the column which is used to group the table. No row grouping if left empty. * @param {boolean} [chartconfig.info = false] If true addtional info on the data table is displayed (i.e. number of rows) * @param {boolean} [chartconfig.paging = false] If true paging is turned on with a default of 10 rows per page * @param {boolean} [chartconfig.lengthChange = false] If true the number of rows per page can be changed by the user. makes only sence in combination with paging = true * @param {boolean} [chartconfig.searching = false] If true a fulltext search field is displayed at the top * @param {boolean} [chartconfig.stateSave = false] If true state information such as pagination position, display length, filtering and sorting is saved when reloading the page using a cookie. * @param {boolean} [chartconfig.responsive = false] If true columns are hidden when the screen is too small. * * @param {string} containerId The id of the html container in which the table is supposed to be placed * @param {object} filterValues object containing the filter values * @param {object} filterViewof viewof the filters to be included in the main container */ DataTables; //create metaProcessor object from prototype. This regenerates the id of the container for legacy reasons. let metaProcessor = new MetaProcessor(meta, containerId); //get the uid let uid = metaProcessor.getUid(); //get the main container let container = metaProcessor.getContainer(); container.append(() => css); container.append(() => tablestyle); //read table config, set defaults, create local variables let { ordering = false, colReorder = false, info = false, lengthChange = false, paging = false, searching = false, stateSave = false, responsive = false, colGroupDelim = "", rowGroup } = chartconfig; //load datatables and plugins, wait until the datatables is loaded //require("datatables.net-dt"); //select plugin not needed at the moment, select plugin is currently always off. //await require("https://cdn.datatables.net/select/1.3.3/js/dataTables.select.min.js") if (colReorder == true) { dt_colReorder; } if (responsive == true) { dt_responsive; } if (rowGroup != undefined) { dt_rowgroup; } /*await require("https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"); await require("https://cdn.datatables.net/1.13.4/js/dataTables.jqueryui.min.js");*/ //buttons plugin not needed at the moment, buttons are created manually /*await require("datatables.net-buttons") await require("https://cdn.datatables.net/buttons/1.7.1/js/buttons.colVis.min.js") await require("https://cdn.datatables.net/buttons/1.7.1/js/buttons.print.min.js") await require("https://cdn.datatables.net/buttons/1.7.1/js/buttons.html5.min.js") await require("https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js")*/ //can't be loaded //await require("https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js") setTimeout(() => { //console.log("Delayed for 1 second."); //create dropdown objects from prototype let downmenu = new Downmenu(uid); //add meta data before the actual content metaProcessor.addMetaTop(); //check if the filterView has already been appended. If the filterView ist reappended every time it leads to lags in chrome let filterDefined = d3.select("#filters" + uid).empty(); //add filter container. let filters = metaProcessor.addFilterContainer(); //filters.append(function() {return viewof filterView}); if (filterDefined) { filters.append(() => filterViewof); } // Alternative zum einbinden von views: //let filterView2 = Inputs.bind(InputsLeuSelect(distincts(daten.data, "Bezirk"), {label: "Bla"}), viewof filterView) //container.append(function() {return filterView2}); // add the drop down menu let dropdowncontainer = d3.select("#dropdowncontainer" + uid); if (dropdowncontainer.empty()) { container.append(() => downmenu.showDropdown()); } //add the container for the table if it is not there yet let maincontainer = d3.select("#main" + uid); if (maincontainer.empty()) { maincontainer = container.append("table"); } maincontainer .attr("id", "main" + uid) .attr("class", "table table-striped table-bordered stripe") .attr("width", "auto"); //add meta data before the actual content metaProcessor.addMetaBottom(); //console.log("Data:"); //console.log(data); //console.log("Meta:"); //console.log(meta); let filteredData = filterData(data, meta, filterValues); //the elements to the dropdown menu addDropDownContent( meta, chartconfig, containerId, uid, downmenu, data, filteredData, filterValues ); //Create the config for the datatables columns from the metadata let columnconfig = []; for (let i of meta.columns) { //only if a collumn has to be shown if (i.display) { let render, className = "mdl-table__cell"; //format int if (i.type == "int" || i.type == "integer") { render = $.fn.dataTable.render.number("'", ".", 0, "", ""); className = className.concat(" dt-body-right"); //console.log(render) } //format percent else if (i.type == "percent" || i.type == "percentage") { render = function (d, type, row) { if (typeof d !== "number" && typeof d !== "string") { return d; } //config var thousands = "'"; var decimal = "."; var prefix = ""; var postfix = " %"; var precision = 1; var negative = d < 0 ? "-" : ""; var flo = parseFloat(d); // If NaN then there isn't much formatting that we can do - just // return immediately, escaping any HTML (this was supposed to // be a number after all) if (isNaN(flo)) { return d; } flo = (flo * 100).toFixed(precision); d = Math.abs(flo); var intPart = parseInt(d, 10); var floatPart = precision ? decimal + (d - intPart).toFixed(precision).substring(2) : ""; return ( negative + (prefix || "") + intPart.toString().replace(/\B(?=(\d{3})+(?!\d))/g, thousands) + floatPart + (postfix || "") ); }; className = className.concat(" dt-body-right"); } //format float else if (i.type == "float") { render = $.fn.dataTable.render.number("'", ".", 1, "", ""); className = className.concat(" dt-body-right"); //console.log(render) } else { render = undefined; //className = undefined; } if (i.highlight) { className = className.concat(" mdl-table__cell--highlighted"); } if (colGroupDelim != "") { columnconfig.push({ data: i.columnKey, name: i.columnName, responsivePriority: i.responsivePriority, render: render, className: className, order: i.order, defaultContent: "" }); } else { columnconfig.push({ data: i.columnKey, name: i.columnName, title: i.columnName, responsivePriority: i.responsivePriority, render: render, className: className, order: i.order, defaultContent: "" }); } } } //Change order of the array according to the order from the metadata columnconfig.sort((a, b) => a.order - b.order); //console.log(columnconfig); // if a column group delimiter is defined the table header is generated from scratch if (colGroupDelim != "") { let headerHtml = ` `; let counter = 1; //first row of the table header for (let i in columnconfig) { //counter for the group size let currentNameArray = columnconfig[i].name.split(colGroupDelim); let nextNameArray = []; if (columnconfig[i * 1 + 1] != undefined) { nextNameArray = columnconfig[i * 1 + 1].name.split(colGroupDelim); } //add a cell with a rowspan of 2 if the delimiter does not exist within the column name if (currentNameArray.length == 1) { headerHtml = headerHtml.concat( ` ` + currentNameArray[0] + ` ` ); counter = 1; } //add a cell if the delimiter exists within a column name if (currentNameArray.length > 1) { //if the current column group name is identical to the column group name of the next column, increase the counter by one if (currentNameArray[0] == nextNameArray[0]) { counter = counter + 1; } //if the this is the last column or if the current column group name is different from the next column group name o, add the header cell and reset the counter if ( nextNameArray[0] == undefined || currentNameArray[0] != nextNameArray[0] ) { headerHtml = headerHtml.concat( ` ` + currentNameArray[0] + ` ` ); counter = 1; } } } //close the first row and initiate the second row headerHtml = headerHtml.concat(` `); //add the second row of header cells for every name with the delimiter for (let i in columnconfig) { let currentNameArray = columnconfig[i].name.split(colGroupDelim); if (currentNameArray.length > 1) { headerHtml = headerHtml.concat( ` ` + currentNameArray[1] + ` ` ); } } headerHtml = headerHtml.concat(` `); maincontainer.html(headerHtml); } console.log(columnconfig); //create actual table let table = $("#main" + uid).DataTable({ data: filteredData, columns: columnconfig, language: { sEmptyTable: "Keine Daten in der Tabelle vorhanden", sInfo: "_START_ bis _END_ von _TOTAL_ Einträgen", sInfoEmpty: "Keine Daten vorhanden", sInfoFiltered: "(gefiltert von _MAX_ Einträgen)", sInfoThousands: ".", sLengthMenu: "_MENU_ Einträge anzeigen", sLoadingRecords: "Wird geladen ..", sProcessing: "Bitte warten ..", sSearch: "", sZeroRecords: "Keine Einträge vorhanden", oPaginate: { sFirst: "Erste", sPrevious: "Zurück", sNext: "Nächste", sLast: "Letzte" }, oAria: { sSortAscending: ": aktivieren, um Spalte aufsteigend zu sortieren", sSortDescending: ": aktivieren, um Spalte absteigend zu sortieren" }, select: { rows: { _: "%d Zeilen ausgewählt", "1": "1 Zeile ausgewählt" } }, buttons: { print: "Drucken", colvis: "Spalten", copy: "Kopieren", copyTitle: "In Zwischenablage kopieren", copyKeys: "Taste ctrl oder \u2318 + C um Tabelle
in Zwischenspeicher zu kopieren.

Um abzubrechen die Nachricht anklicken oder Escape drücken.", copySuccess: { _: "%d Zeilen kopiert", "1": "1 Zeile kopiert" }, pageLength: { "-1": "Zeige alle Zeilen", _: "Zeige %d Zeilen" } } }, ordering: ordering, colReorder: colReorder, info: info, lengthChange: lengthChange, paging: paging, searching: searching, stateSave: stateSave, dom: "Blfrtip", /*,buttons: [ 'colvis', 'csv', 'copy', 'print', 'pdf' ]*/ responsive: responsive ? { /*{ details: { display: $.fn.dataTable.Responsive.display.childRow } }*/ details: { renderer: function (api, rowIdx, columns) { let data = columns .map((col, i) => { return col.hidden ? '' + '' + columnconfig[i].name + ":" + " " + /*"" + col.title + ":" + " " +*/ '' + col.data + "" + "" : ""; }) .join(""); let subtable = document.createElement("table"); subtable.innerHTML = data; subtable.classList.add("mdl-table__body"); return data ? subtable : false; } } } : responsive, select: false, //destroy is needed for table to be loaded destroy: true, createdRow: function (row, data, index) { $(row).addClass("mdl-table__row"); }, //add rowGroup if defined ...(rowGroup != undefined ? { rowGroup: { dataSrc: rowGroup } } : {}), //conditionally add higlighted rows ...(meta.hasOwnProperty("highlightRows") ? { rowCallback: function (row, data, index) { for (let i of meta.highlightRows) { if (data[i.columnKey] == i.selector) { $(row) .children() .addClass("mdl-table__cell mdl-table__cell--highlighted"); } } } } : {}) }); table.tables().body().to$().addClass("mdl-table__body"); $("#" + containerId + uid + " thead tr th").addClass( "mdl-table__cell mdl-table__column-header" ); //workaround for bug, if the last column has rowspan = 2 $("#secondheaderrow").children().attr("colspan", "1"); table.columns.adjust().draw(); setTimeout(() => { console.log("redraw"); table.columns.adjust().draw(); }, "5000"); }, "0"); /*setTimeout(() => { let table = $("#main" + uid) .columns.adjust() .draw(); }, "5000");*/ this.getChart = function () { return container.node(); }; }35:T148e,tablestyle = html``36:[] 32:{"id":"84334e452c2fdf36","slug":"tabelle","title":"Prototype Table","thumbnail":"27c8211c2cc8c5c3a9bfac5c013e282f7714fc3cbfcca420a65162424219a895","access_level":"public","create_time":"$D2022-01-10T09:25:55.751Z","update_time":"$D2026-06-12T06:25:16.611Z","view_time":null,"first_public_time":"$D2022-01-10T09:26:32.251Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"480a316ccb4f6253","login":"bildungsplanungzh","name":"Bildungsplanung Kanton Zürich","avatar_url":"https://avatars-next.observableusercontent.com/2cb1f8851e077d6126eed5b60e134287f21a1bc0897970ba693f8aa5b3dc3bb3","tier":"pro_2024"},"version":1836,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"ae2fb568d64d2eb1","login":"resmartizh","name":"Res Marti","avatar_url":"https://avatars-next.observableusercontent.com/69661c8e64ee6b7b99aba46691979edfa94971eb1e410861d738d2401ebe034e","tier":null}],"members":[{"type":"team","id":"480a316ccb4f6253","login":"bildungsplanungzh","name":"Bildungsplanung Kanton Zürich","avatar_url":"https://avatars-next.observableusercontent.com/2cb1f8851e077d6126eed5b60e134287f21a1bc0897970ba693f8aa5b3dc3bb3","tier":"pro_2024","role":"editor"},{"type":"individual","id":"ae2fb568d64d2eb1","login":"resmartizh","name":"Res Marti","avatar_url":"https://avatars-next.observableusercontent.com/69661c8e64ee6b7b99aba46691979edfa94971eb1e410861d738d2401ebe034e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Prototype Table","cells":[{"id":0,"value":"# Prototype Table","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1265,"value":"Generalisiertes Modul für responsive Tabellen mit Export-Funktion.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":124,"value":"tablecontainer = initTable.getChart()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":438,"value":"//actual viewof\nviewof filterView = Inputs.form({\n //Bezirk: InputsLeuSelect(distincts(data.data, \"Bezirk\"), { label: \"Bezirk\" })\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1277,"value":"//extendable form viewof\n//viewof filterView = Inputs.form(formOBj)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1276,"value":"//object for form elements\n//mutable formOBj=({})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1243,"value":"//filling in the form elements\n/*defineFilters={\n for(let column of daten.meta.columns) {\n if(column.filter) {\n mutable formOBj[column.columnKey]=InputsLeuSelect(distincts(daten.data, column.columnKey), {label: column.columnName})\n }\n }\n //needed to update the formOBj\n mutable formOBj=mutable formOBj;\n}*/","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1275,"value":"filterData = function (data, meta, filterValues) {\n console.log(filterValues);\n let filtereddata = data;\n for (let column of meta.columns) {\n if (column.filter && filterValues.hasOwnProperty(column.columnKey)) {\n filtereddata = filtereddata.filter(function (e) {\n return e[column.columnKey] == filterValues[column.columnKey];\n });\n }\n }\n return filtereddata;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":318,"value":"initTable = new makeDataTable(data.data, data.meta, data.chart)\n//initTable = makeDataTable(datengefiltert, data.meta, {responsive:true, ordering:false})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1816,"value":"viewof refreshCache = Inputs.toggle({ label: \"Refresh cache\", value: false })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1585,"value":"data = {\n let refresh = refreshCache;\n return basicapi.data(uri, refresh);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1819,"value":"uri = \"p_uebersicht_bestand_schulstufen_schultyp\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"md `## resource loading`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"d3 = require(\"d3@7\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":223,"value":"$$ = require('jquery') ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":307,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"css = html`\n\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":877,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":441,"value":"import { distincts, style } from \"@statistikzh/shared-imports\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":583,"value":"import {\n Downmenu,\n addDropDownContent,\n MetaProcessor,\n basicapi\n} from \"@bildungsplanungzh/general\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1825,"value":"import { InputsLeuSelect } from \"@bildungsplanungzh/leuselect\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1744,"value":"DataTables = require(\"datatables.net-bs4\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1810,"value":"dt_colReorder = require(\"datatables.net-colreorder-bs4\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1809,"value":"dt_responsive = require(\"datatables.net-responsive-bs4\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1808,"value":"dt_rowgroup = require(\"datatables.net-rowgroup-bs4\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1807,"value":"require.resolve(\"datatables.net-colreorder-bs4\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":992,"value":"## Archiv","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 33:"$32:body"