I have used DataTables in several web2py apps with little trouble (after the learning curve), but I am working on a new app and cannot seem to get the columnDefs to set the column widths. Here is the javascript in the page's HTML:
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('#list').dataTable( {
searching: true,
displayLength: 10,
lengthChange: false,
paging: true,
columnDefs: [
{"width": "15%", "targets": 0 },
{"width": "15%", "targets": 1 },
{"width": "10%", "targets": 2 },
{"width": "5%", "targets": 3 },
{"width": "10%", "targets": 4 },
{"width": "10%", "targets": 5 },
{"width": "5%", "targets": 6 },
{"width": "5%", "targets": 7 },
{"width": "20%", "targets": 8 }
]
});
});
All the other options (searching, displayLength, etc.) work as advertised, so I know the function is working, but I've tried about a hundred different things to make the column widths change, to no avail. I get the same lack of response using the columns option, or going back to the legacy aoColumnDefs. There are exactly 9 TH elements and 9 TD elements, so I know there's no mismatch there and there is, in fact, a table with an id='list'. Using Datatables 1.10.11.
Sorry for this seemingly elemental problem; I will appreciate any help or insights as to what I'm doing wrong here.
Related
When looking at CytoscapeJs, i was noticing that a lot of the labels was accomplished by strings. Some sort of naming mechanism, but if i wanted to instead, say show a warning Icon for the Label of an EDGE or prepend a ICON to the existing Label for a Name, it seems there is nothing really to account for that.
I was looking at using things like unicode characters to define what is to be presented, but I have noticed 2 things. Depending on your level of zoom, the character would be a black rectangle, and also the characters are in some cases limited to the OS and Browser language packs.
I wanted to just be able to define an icon image, or use ionicons or something else to add this.
Note: I was also looking at the npm package: ctyoscape-node-label-html, which manages to encapsulate a Node with html, but it too has issues. 1. The package is called cytoscape-NODE-label-html and makes no mention in the documentation as to EDGE labels. 2. The last release was over 2 years ago, so i was thinking that maybe it meant that cytoscapejs has updated to the point where it has implemented the ability to add icons.
In the Commom Use cases of IonIcons, it usually just adds items based on class references, so i was thinking i might be able to add the classes and it would work without even touching the label, but i havent had much success.
Is there something i am missing with regard to Cytoscape? I have not seen any demos on their website, so being able to supply demos with how this would work would be fantastic.
I dont personally have any code at the moment, but one can use pretty much any of the sample cytoscapejs samples ( https://js.cytoscape.org/ ) as a jumping off platform for this Iconography.
Here is a demo code that uses icons fromIonIcons. Unfortunately, I have to use embedded SVG code for use in this demonstration, so that, I can manipulate it as needed.
// airplane.svg source:
// https://raw.githubusercontent.com/ionic-team/ionicons/main/docs/ionicons/svg/ios-airplane.svg
function airplane_mkr(fill_color,rot_angle) {
let airplane = '<svg xmlns="http://www.w3.org/2000/svg" width="80" height="50" viewBox="0 0 512 512"><g transform="rotate(rot_angle,256,256)"><path fill="fill_color" d="M407.7 224c-3.4 0-14.8.1-18 .3l-64.9 1.7c-.7 0-1.4-.3-1.7-.9L225.8 79.4c-2.9-4.6-8.1-7.4-13.5-7.4h-23.7c-5.6 0-7.5 5.6-5.5 10.8l50.1 142.8c.5 1.3-.4 2.7-1.8 2.7L109 230.1c-2.6.1-5-1.1-6.6-3.1l-37-45c-3-3.9-7.7-6.1-12.6-6.1H36c-2.8 0-4.7 2.7-3.8 5.3l19.9 68.7c1.5 3.8 1.5 8.1 0 11.9l-19.9 68.7c-.9 2.6 1 5.3 3.8 5.3h16.7c4.9 0 9.6-2.3 12.6-6.1L103 284c1.6-2 4.1-3.2 6.6-3.1l121.7 2.7c1.4.1 2.3 1.4 1.8 2.7L183 429.2c-2 5.2-.1 10.8 5.5 10.8h23.7c5.5 0 10.6-2.8 13.5-7.4L323.1 287c.4-.6 1-.9 1.7-.9l64.9 1.7c3.3.2 14.6.3 18 .3 44.3 0 72.3-14.3 72.3-32S452.1 224 407.7 224z"/></g></svg>';
airplane = airplane.replace("fill_color", fill_color);
airplane = airplane.replace("rot_angle", rot_angle);
const svg_Url = encodeURI("data:image/svg+xml;utf-8," + airplane);
return {"background-color":"#bbbbbb", "background-image":svg_Url, label:"data(name)", width:60, height:60, opacity:1.0};
}
//Colored/rotated airplanes icons
const pink_plane = airplane_mkr("pink","135");
const green_plane = airplane_mkr("green","90");
const gold_plane = airplane_mkr("gold","45");
const blue_plane = airplane_mkr("blue","60");
const red_plane = airplane_mkr("red","180");
var cy = cytoscape({
container: document.getElementById("cy"),
elements: {
nodes: [
{
data: { id: "j", name: "France" },
position: { x: 100, y: 100 },
classes: "FRA"
},
{
data: { id: "e", name: "SVG Icon" },
position: { x: 100, y: 500 },
classes: "SVG"
},
{
data: { id: "k", name: "Italy" },
position: { x: 600, y: 500 },
classes: "italy"
},
{
data: { id: "g", name: "The Netherlands" },
position: { x: 550, y: 80 },
classes: "netherlands"
}
],
edges: [
{ data: { source: "j", target: "e", label: "JE" } },
{ data: { source: "j", target: "g", label: "JG" } },
{ data: { source: "e", target: "j" } },
{ data: { source: "k", target: "j" } },
{ data: { source: "k", target: "e", label: "KE" } },
{ data: { source: "k", target: "g" } },
{ data: { source: "g", target: "j" } }
]
},
style: [
{
selector: "node.FRA",
style: pink_plane
},
{
selector: "node.SVG",
style: green_plane
},
{
selector: "node.italy",
style: gold_plane
},
{
selector: "node.netherlands",
style: blue_plane
},
{
selector: "node.FRA",
style: red_plane
},
{
selector: "edge",
style: {
label: "data(label)",
width: 3,
"line-color": "#c0c",
"target-arrow-color": "#00c",
"curve-style": "bezier",
"target-arrow-shape": "triangle",
"target-arrow-fill": "#c00",
"arrow-scale": 20
}
},
{
selector: ".highlight",
css: {
"background-color": "yellow"
}
}
],
layout: {
name: "preset"
}
});
#cy {
width: 800px;
height: 400px;
position: absolute;
top: 5px;
left: 5px;
}
ion-icon {
font-size: 64px;
color: blue;
--ionicon-stroke-width: 5px;
}
<script type="module" src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons#5.5.2/dist/ionicons/ionicons.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/2.7.10/cytoscape.min.js"></script>
<div>
<span>Some ionicon icons</span><br/>
<ion-icon name="airplane" size="small"></ion-icon> <!--filled-->
<ion-icon name="airplane-sharp" size="large"></ion-icon> <!--sharp-->
<ion-icon name="airplane-outline"></ion-icon> <!--outline-->
</div><br/>
<div id="cy"></div>
The frontend uses angular 6 and the api uses asp.net core.
When you add an image to the body, it asks the api to save the file on the server.
By the way, when data is saved, it is saved as base64 bytes.
The database should be stored under 4000 bytes using Oracle.
Is there any way to upload an image via the image path?
I hope you can tell me how to write the uploadImagePath callback function in the angular example.
config: any = {
airMode: false,
tabDisable: true,
placeholder: '내용을 입력하세요.',
tabsize: 2,
height: '300px',
uploadImagePath: this.REST_API_ADDR + 'File/summernote',
popover: {
table: [
['add', ['addRowDown', 'addRowUp', 'addColLeft', 'addColRight']],
['delete', ['deleteRow', 'deleteCol', 'deleteTable']],
],
image: [
['image', ['resizeFull', 'resizeHalf', 'resizeQuarter', 'resizeNone']],
['float', ['floatLeft', 'floatRight', 'floatNone']],
['remove', ['removeMedia']],
],
link: [['link', ['linkDialogShow', 'unlink']]],
air: [ ['font', ['bold', 'italic', 'underline', 'strikethrough', 'superscript', 'subscript', 'clear',],],],
},
toolbar: [
['misc', ['codeview', 'undo', 'redo']],
['style', ['bold', 'italic', 'underline', 'clear']],
['font', ['bold', 'italic', 'underline', 'strikethrough', 'superscript', 'subscript', 'clear']],
['fontsize', ['fontname', 'fontsize', 'color']],
['para', ['style', 'ul', 'ol', 'paragraph', 'height']],
['insert', ['table', 'picture', 'link', 'video', 'hr']],
],
fontNames: ['Helvetica', 'Arial', 'Arial Black', 'Comic Sans MS', 'Courier New', 'Roboto', 'Times'],
}
I have a dynamically filled datatable with fixed columns and scrollX enabled:
$('#products').DataTable({
"data": formattedData,
"scrollX": true,
"fixedColumns":{ "leftColumns": 0, "rightColumns": 1 }
});
The problem is, I need the columns to stop automatically calculating their width. Even if I try to force them on initialization...
$('#products').DataTable({
"order": [[ 0, "asc" ]],
"columnDefs": [
{ "title": "Name", "targets": 0, "width": "350px" },
{ "title": "Code", "targets": 1 },
{ "title": "Regular code", "targets": 2, "width": "500px" },
{ "title": "Special code", "targets": 3, "width": "300px" }
]
});
... if scrollX is enabled, the scrolling is enabled just if the columns are too small. And I want the scrolling enaled always, and the columns not changing their width.
Any idea about how to force the column width?
The same question was asked here but has no answer: https://datatables.net/forums/discussion/31403/scrollx-not-work-with-fixed-column-width
First disable autoWidth -> https://datatables.net/reference/option/autoWidth
In my humble opinion columns.width are useless to anything than relative percentages. Define minimum column widths in CSS instead
#products td:nth-child(1) { min-width: 350px; }
#products td:nth-child(3) { min-width: 500px; }
#products td:nth-child(4) { min-width: 300px; }
http://jsfiddle.net/f8uw6rLy/
I want to use ag-grid in my angular 5 application
but I am unable to use as it throws an exception in my console.
My component code:
columnDefs = [
{headerName: "First Name", field: "first_name", width: 100, editable: true},
{headerName: "Last Name", field: "last_name", width: 100, editable: true},
{
headerName: "Gender",
field: "gender",
width: 90,
cellEditor: 'mySimpleCellEditor'
},
{
headerName: "Age",
field: "age",
width: 70,
cellEditor: 'mySimpleCellEditor'
},
{
headerName: "Mood",
field: "mood",
width: 70,
cellEditor: 'mySimpleCellEditor'
},
{
headerName: "Country",
field: "country",
width: 100,
cellEditor: 'mySimpleCellEditor'
},
{
headerName: "Address",
field: "address",
width: 502,
cellEditor: 'mySimpleCellEditor'
}
];
rowData = [
{
first_name: 'Bob', last_name: 'Harrison', gender: 'Male',
address: '1197 Thunder Wagon Common, Cataract, RI, 02987-1016, US, (401)
747-0763',
mood: "Happy", country: 'Ireland'
},
];
My html code:
<div>
<ag-grid-angular #aggrid style="width: 100%; height: 350px;"
class="ag-theme-balham"
[columndefs]="columnDefs"
[showtoolpanel]="true"
[rowdata]="rowData"
enablecolresize
enablesorting
enablefilter
rowheight="22"
rowselection="multiple">
</ag-grid-angular>
</div>
My app.module.ts code:
import { AgGridModule } from "ag-grid-angular/main";
imports: [
AgGridModule.withComponents([])
],
I am still getting the below error in my console and I am unable to run my application.
(anonymous) # bootstrap.min.js:6
compiler.js:215 Uncaught Error: Template parse errors:
Can't bind to 'columndefs' since it isn't a known property of 'ag-grid-
angular'.
1. If 'ag-grid-angular' is an Angular component and it has 'columndefs'
input, then verify that it is part of this module.
2. If 'ag-grid-angular' is a Web Component then add
'CUSTOM_ELEMENTS_SCHEMA' to the '#NgModule.schemas' of this component to
suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '#NgModule.schemas'
of this component. ("id-angular #aggrid style="width: 100%; height: 350px;"
class="ag-theme-balham"
[ERROR ->][columndefs]="columnDefs"
[showtoolpanel]="true"
[rowdata]="): ng:///AppModule/GridtestComponent.html#3:21
Can't bind to 'showtoolpanel' since it isn't a known property of 'ag-
grid-angular'.
1. If 'ag-grid-angular' is an Angular component and it has 'showtoolpanel'
input, then verify that it is part of this module.
I tried almost everything but still not able to resolve this issue.
How about instead of using...
[columndefs]="columnDefs"
[rowdata]="rowData"
You use...
[columnDefs]="columnDefs"
[rowData]="rowData"
Also, basically nothing - except address - in your rowdata matches the field names of your headers. AgGrid won't render data when it has no matching header for those. Please don't try to simply insert code at random. The main page has an easily accessible Get Started page.
You need import in app.module this:
import { NgModule, CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from '#angular/core';
#NgModule({
schemas: [
CUSTOM_ELEMENTS_SCHEMA,
NO_ERRORS_SCHEMA
],
...
I am using the function to export PDF from jquery DataTables. It works but it repeats the header like the image below:
Does anyone know of any way to export not repeating the header?
$("#table").DataTable({
buttons: [
{
text: '<i class="fas fa-file-pdf"></i> PDF',
extend: 'pdf',
className: 'btn btn-danger',
orientation: 'landscape',
title: 'My table to PDF',
pageSize: 'A3',
exportOptions: {
columns: [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ]
}
}
],
responsive : true,
paging : true,
searching : true
});
It is not so well documented, but after googling around in the pdfmake universe I realized there is a headerRows attribute that defines how many pages the header should be repeated on. This can be manipulated through DataTables' customize(doc) callback :
buttons: [{
extend: 'pdfHtml5',
customize: function(doc) {
doc.content[1].table.headerRows = 0
}
}]
This will prevent the headers from being repeated, i.e only be included on the first page "0".
Demo -> https://jsfiddle.net/mzaudL7c/
Note: The structure of doc.content can vary depending on your setup. So if it not work for you 1:1, investigate doc to find the correct index.