We Keep Coding

How to change data with Javascript as DataTables displays it into a html table

I am very new to Javascript, I am working to extend pieces of code implemented by third parts and I have to slightly change some data before it is displayed into a html table via DataTables.
In particular, data comes from the columns "nested field" and "subfields" of a Postgres database table, declared as:
CREATE TABLE testing_nested_field_blacklist (
nested_field varchar(100) NOT NULL UNIQUE,
subfields varchar(100)[] NOT NULL
);
The html table filled up with data looks like this:
Data coming from column "subfields" is displayed into the table as a string of words separated by commas (,), but what I want instead is words to be separated by comma and one space (, ) , like this:
In order to get this, I am thinking about
building a function that, given a string as input, substitutes
commas with comma-and-space and returns it as output
put the function in a for cycle that applyes the substitution to element of column "subfields"
for each row of the table, and I would put this function at the end of the script that loads
the data into the table. So that it gets triggered also when "refresh", "add", "edit" and
"delete" functions are triggered.
However, I don't know how to get and change the data.
Can anybody point me the right direction to do this?
This is the javascript piece of code that displays the data into the html template:
var NestedFieldTable;
var nested_field_to_remove = {};
var nested_field;
$(document).ready(function() {
// NESTED FIELD
NestedFieldTable = $('#NestedFieldTable').DataTable({
"destroy": true,
"processing":true,
"ajax": {
"url": '/getNestedFields/',
"type":"POST",
"dataSrc": "nested_field"
},
"columns": columns_nested_field,
"columnDefs": [
{"targets": -1, "data": null, "defaultContent": "<i class='fas fa-edit' aria-hidden='true' id='modifyRow' data-toggle='modal' data-target='#myModalEditNestedField' title='click to edit nested field or blacklist'></i><i style='margin-left:15px;' class='fas fa-trash' aria-hidden='true' id='deleteRow' data-toggle='modal' data-target='#myModalDeleteNestedField' title='Click to delete nested field and blacklist'></i>", "width": "75px"},
],
"dom": "<'row'<'col-md-6 toolbar_nestedfield'><'col-md-6'fBl>>" +
"<'row'<'col-md-6'><'col-md-6'>>" +
"<'row'<'col-md-12't>><'row'<'col-md-12'pi>>",
"buttons": [
{
extend: 'collection',
text: 'Export',
autoClose: true,
buttons: [
{
text: '<i class="fas fa-print"></i> Print',
extend: 'print',
messageTop: 'Table of subfields and nested field .',
footer: false
}
]
},
{
text: '<i class="fas fa-sync-alt"></i>',
titleAttr: 'Refresh table',
action: function ( e, dt) {
dt.ajax.reload();
set_alert_message({"title":"Refresh", "detail":"Table successfully refreshed"}, "success");
}
}
],
"language": {
"searchPlaceholder": "Search",
"search": "<div class='form-group'><div class='input-group'><div class='input-group-prepend'><span class='input-group-text'><i class='fas fa-search fa-fw'></i></span></div>_INPUT_</div></div>",
"lengthMenu": "<div class='form-group'><div class='input-group'><div class='input-group-prepend'><span class='input-group-text'><i class='fas fa-list-ul fa-fw'></i></span></div>_MENU_</div></div>",
"oPaginate": {
sNext: '<span class="pagination-default">❯</span>',
sPrevious: '<span class="pagination-default">❮</span>'
}
}
});
$(".toolbar_nestedfield").html('<button type="button" class="dt-button" title="click to add new nested field and blacklist" data-toggle="modal" data-target="#myModalAddNestedField"><i class="fas fa-plus"></i></button>');
This is the javascript piece of code that defines the columns of the tabel, and it is necessary to make DataTables work:
var columns_nested_field = [
{ "title":"Nested field", data: "nested_field"},
{ "title":"Subfields blacklist", data: "subfields"},
{ "title":"Edit", "orderable": false, "className": 'icon_dt_style'}
];
and this is the html template:
<!-- Begin Page Content -->
<div class="container-fluid">
<ol class="breadcrumb shadow-lg">
<li class="breadcrumb-item">
Home
</li>
<li class="breadcrumb-item active">Nested fields and subfields blacklists</li>
</ol>
<!-- alert messages -->
<div class="alert alert-success alert-dismissible fade show" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<strong id="alert-success-title"></strong> <div id="alert-success-detail"></div>
</div>
<div class="alert alert-danger alert-dismissible fade show" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<strong id="alert-danger-title"></strong> <div id="alert-danger-detail"></div>
</div>
<!-- TABELLA NESTED FIELDS -->
<div class="card shadow mb-4">
<div class="card-header py-3">
<h6 class="m-0 font-weight-bold text-primary"><i class="fas fa-ban" aria-hidden="true"></i> Nested fields and subfields blacklists</h6>
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-bordered table-hover" id="NestedFieldTable" width="100%" cellspacing="0">
</table>
</div>
</div>
</div>
</div>
<!-- /.container-fluid -->

SOLVED
As suggested in the comments by #Lapskaus, data displayed by DataTables can be manipulated by using the columns.render method.
In my case I had to apply the same change to all elements of an array (having each cell of column subfields containing an array), so I used the Array-access render method.
I added the element key-value render: "[my-separator]" to object
{ "title":"Subfields blacklist", data: "subfields"}
of variable columns_nested_field, that corresponds to the column whose data I want to manipulate ("render": "[my-separator]" works as well).
And since I want , as separator, I turned my variable
var columns_nested_field = [
{ "title":"Nested field", data: "nested_field"},
{ "title":"Subfields blacklist", data: "subfields"},
{ "title":"Edit", "orderable": false, "className": 'icon_dt_style'}
];
into
var columns_nested_field = [
{ "title":"Nested field", data: "nested_field"},
{ "title":"Subfields blacklist", data: "subfields", render: "[, ]"}, // <-- added the render key
{ "title":"Edit", "orderable": false, "className": 'icon_dt_style'}
];
so that I get

Loading Laravel Chart consoletvs/charts:7.*

I am new to laravel charts.I thought following the documentation to make a sample chart will be a stepping stone. Having followed the documentation form adding the package into my project using composer require consoletvs/charts:7.* and publishing the configuration file by running php artisan vendor:publish --tag=charts and then creating a new chart with the command: php artisan make:chart SampleChart a SampleChart was made under App\Chart
In the SampleChart class i made the following chart configuration
public ?string $name = 'SampleChart';
public ?string $routeName = 'SampleChart';
public ?array $middlewares = ['auth'];
I then manually register using the App\Providers\AppServiceProvider with the code as stated from the documentation
public function boot(Charts $charts)
{
$charts->register([
\App\Charts\SampleChart::class
]);
}
On rendering the chart in my views; I put in the following code
<div id="chart" style="height: 300px;"> </div>
<!-- Charting library -->
<script src="{{ asset('js/Chart.min.js') }}"></script>//downloaded from https://unpkg.com/echarts/dist/echarts.min.js
<!-- Chartisan -->
<script src="{{ asset('js/chartisan_chartjs.js') }}">
</script> //downloaded from https://unpkg.com/#chartisan/echarts/dist/chartisan_echarts.js
<!-- Your application script -->
<script>
const chart = new Chartisan({
el: '#chart',
url: "#chart('SampleChart')",
loader: {
color: '#222',
size: [30, 30],
type: 'bar',
textColor: '#000',
text: 'Loading some chart data...',
},
});
</script>
the output is a flex item with a caption "Loading some chart data... " and nothing shows. Am Stucked
I used the tutorial form https://dev.to/arielmejiadev/use-laravel-charts-in-laravel-5bbm and https://izwebtechnologies.com/2019/06/03/how-to-create-charts-in-laravel/ but none was able to made me accomplish having a chart. though the two tutorial links are for chart6.* i later read the two have different approaches to chart design.
I am Usning Laravel7 and charts:7.*

i am the author.
Some of the issues may be releated to laravel charts, and others to chartisan. I am doing my best to keep everybody happy here but seems people are not happy with the docs.
I am creating an example page with all sorts of examples on chartisan's page.
Remember laravel charts now only acts as a wrapper around chartisan's php package.
Its such a big project for a single person and i like to see constructive feedback.
What exacly isn't clear from the chartisan docs?

try to run without public ?array $middlewares = ['auth']; set.
just public ?array $middlewares = [];
^^^^^^^^^^ this is how I used with Laravel package ^^^^^^^^^^
vvvvvvvvvvvvvvvvvvvv This is how I use now vvvvvvvvvvvvvvvvvvvv
After some time using the ConsoleTV/Charts I decided not to use it like Laravel package.
I get rid of any use of it and use the javascript version only.
To get the data I did this:
Create a controller named whatever you want and put a function like this:
public function chartSample1()
{
$data = array(
"chart" => array(
"labels" => ["First", "Second", "Third"]
),
"datasets" => array(
array("name" => "Sample 1", "values" => array(10, 3, 7)),
array("name" => "Sample 2", "values" => array(1, 6, 2)),
)
);
return $data;
}
On the "routes/web.php" added:
Route::get('/chartSample1', 'MyChartController#chartSample1')->name('chartSample1');
And on the page:
#extends('layouts.app')
#section('content')
<div class="row justify-content-center">
<div class="col-sm-12 align-self-center">
<div class="row">
<div class="col-lg-3">
<div class="card shadow p-3 mb-5 bg-white rounded">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<div id="chart" style="height: 300px;"></div>
Go somewhere
</div>
</div>
</div>
<div class="col-lg-3">
<div class="card shadow p-3 mb-5 bg-white rounded">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<div id="chart2" style="height: 300px;"></div>
Go somewhere
</div>
</div>
</div>
<div class="col-lg-3">
<div class="card shadow p-3 mb-5 bg-white rounded">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<div id="chart3" style="height: 300px;"></div>
Go somewhere
</div>
</div>
</div>
<div class="col-lg-3">
<div class="card shadow p-3 mb-5 bg-white rounded">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Go somewhere
</div>
</div>
</div>
</div>
</div>
</div>
{{-- This script has more features --}}
<script src="https://unpkg.com/chart.js/dist/Chart.min.js"></script>
<script src="https://unpkg.com/#chartisan/chartjs/dist/chartisan_chartjs.js"></script>
{{--
<script src="https://unpkg.com/echarts/dist/echarts.min.js"></script>
<script src="https://unpkg.com/#chartisan/echarts/dist/chartisan_echarts.js"></script>
--}}
</script>
<script>
const chart = new Chartisan({
el: '#chart',
url: "{{ route('chartSample1') }}",
hooks: new ChartisanHooks()
.colors(['#ECC94B', '#4299E1'])
.legend()
loader: {
color: '#ff00ff',
size: [30, 30],
type: 'bar',
textColor: '#11ff00',
text: 'Loading some chart data...',
}
});
const chart2 = new Chartisan({
el: '#chart2',
data: {
chart: { "labels": ["First", "Second", "Third"] },
datasets: [
{ "name": "Sample 1", "values": [10, 3, 7] },
{ "name": "Sample 2", "values": [5, 6, 2] }
],
},
hooks: new ChartisanHooks()
.colors(['#ECC94B', '#4299E1', '#AAEE11'])
.legend({ position: 'left' })
.beginAtZero()
.datasets([{ type: 'line', fill: false }, 'bar']),
});
const chart3 = new Chartisan({
el: '#chart3',
data: {
chart: { "labels": ["First", "Second", "Third"] },
datasets: [
{ "name": "Sample 1", "values": [10, 3, 7] },
],
},
hooks: new ChartisanHooks()
.colors(['#ECC94B', '#4299E1', '#AAEE11'])
.datasets([{ type: 'pie', fill: true }, 'pie']),
});
</script>

I had a similar problem and I've been able to solve it. The configuration in your chart class is not compulsory. You can choose to ignore them.
Your render url is also wrong. It is supposed to be in snake case:
//SampleChart will be
#chart('sample_chart')
//PostData will be
#chart('post_data')
If you specified the route in your Chart class, you will have to use that: #chart('your_route'). If you don't know your route, use the php artisan route:list -c command to check.
If you want to specify the type of chart, you have to use hooks.
I ran into a bit of an issue myself. Everything Works for line chart and bar chart, but i can't present a pie chart. The Doughnut is also not working.

"Uncaught TypeError: $(...).modal is not a function" when trying to open modal from Tabulator

This question has already been answered, but those answers don't work for me. I've already tried to update my dependencies and I've even added some.
I am using tabulator to do the management of the users. When I click a cell in tabulator, I want it to open a modal so that I can auto-populate it.
How can I open the modal on row/cell click? I know for the row click I am not using the right function, I am only using cell click for testing.
I'm getting the following error:
gestaoutilizadores:338 Uncaught TypeError: $(...).modal is not a function
at t.cellClick (gestaoutilizadores:338)
at HTMLDivElement. (tabulator.min.js:4)
Dependencies
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/tabulator-tables#4.4.3/dist/js/tabulator.min.js"></script>
Modal
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Javascript (Tabulator)
var table = new Tabulator("#example-table", {
height: "100%", // set height of table (in CSS or here), this enables the Virtual DOM and improves render speed dramatically (can be any valid css height value)
data: tabledata, //assign data to table
layout: "fitColumns", //fit columns to width of table (optional)
pagination: "local", //enable local pagination.
paginationSize: 5, // this option can take any positive integer value (default = 10)
columns: [ //Define Table Columns
{
title: "ID",
field: "id",
width: 150
},
{
title: "Tipo Utilizador",
field: "type",
align: "center",
/*, align:"left", formatter:"progress"*/ formatter: "lookup",
formatterParams: {
"0": "Super User",
"1": "Admin",
"2": "Utilizador Normal",
}
},
{
title: "Username",
field: "username",
align: "center",
cellClick: function(e, cell) {
var data = cell.getData();
$('#exampleModal').modal('toggle');
console.log(data);
console.log("username")
},
},
{
title: "Password",
field: "password",
align: "center"
},
{
title: "Empresa",
field: "empresa",
align: "center"
},
{
title: "Data de Criacao",
field: "createDate",
sorter: "date",
align: "center"
},
],
});

You will need to import the jQuery library before the bootstrap library.
This is because the bootstrap library will register the modal plugin with jQuery when the package loads, if jQuery is not there when this happens then the modal plugin will not be loaded and your code will error.

How to make col-xs-6 under instead of beside each other?

I'm using 3 col-xs-6 for my form fields but I'm not getting the result I want.
I want to achieve this:
| col-xs-6 |
| col-xs-6 |
| col-xs-6 |
but instead I see this
| col-xs-6 | col-xs-6 |
| col-xs-6 |
I know this is the way it works but I want to achieve the first result. I've tried applying row to each of the col-xs-6s but that didn't work.
This is my html
<div class="col-xs-12">
<h1>Form</h1>
<form class="top20" ng-submit="vm.exportForm()" name="vm.exportForm" novalidate>
<formly-form model="vm.exportModel" fields="vm.exportFields" form="vm.exportForm"></formly-form>
</form>
</div>
and this is how I structure the formly form in the controller
vm.exportFields = [
{
className: 'col-xs-6',
key: 'field1',
type: 'select2',
templateOptions: {
label: 'Field1',
valueProp: 'subCode',
labelProp: 'description',
options: []
}
},
{
className: 'col-xs-6',
key: 'field2',
type: 'select2',
templateOptions: {
label: 'Field2',
valueProp: 'subCode',
labelProp: 'description',
options: []
}
},
{
className: 'col-xs-6',
key: 'field3',
type: 'select2',
templateOptions: {
label: 'Field3',
valueProp: 'subCode',
labelProp: 'description',
options: []
}
}
];
Update
What I've decided to do is make my fields col-xs-12 and wrap them in a <div class="col-xs-6"></div> instead. Looks like I expected it to be. Thanks guys.

If you want them in its own line, wrap it inside a .row:
.row
| col-xs-6 |
.row
| col-xs-6 |
.row
| col-xs-6 |
In complex ways, you can try using .push and .pull classes, along with .col-offset classes.

You don´t want col-xs-6... you want col-xs-12 (100% width). The problem you are having is that you have 3 columns with 50% width, so 2 of them are side by side and the third one is below of the first two.

Try editing your code this way.
vm.exportFields = [
{
className: 'col-xs-6 col-xs-offset-3',
key: 'field1',
type: 'select2',
templateOptions: {
label: 'Field1',
valueProp: 'subCode',
labelProp: 'description',
options: []
}
},
{
className: 'col-xs-6 col-xs-offset-3',
key: 'field2',
type: 'select2',
templateOptions: {
label: 'Field2',
valueProp: 'subCode',
labelProp: 'description',
options: []
}
},
{
className: 'col-xs-6 col-xs-offset-3',
key: 'field3',
type: 'select2',
templateOptions: {
label: 'Field3',
valueProp: 'subCode',
labelProp: 'description',
options: []
}
}
];

You have to bind all the col-xs-6 inside the row class. Then it will be in that form.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<div class="container">
<!-- Start of row -->
<div class="row">
<div class="col-xs-6">
My Text
</div>
</div>
<!-- End of row -->
<!-- Start of row -->
<div class="row">
<div class="col-xs-6">
My Text
</div>
</div>
<!-- Start of row -->
<div class="row">
<div class="col-xs-6">
My Text
</div>
</div>
<!-- End of row -->
</div>

<div class="container-fluid">
<div class="row">
<div class="col-xs-6 " style="background-color:lavender;">col-xs-6</div>
</div>
<div class="row">
<div class="col-xs-6 " style="background-`color:lavenderblush`;">col-xs-6</div>
</div>
<div class="row">
<div class="col-xs-6 " style="background-color:lavender;">col-xs-6</div>
</div>
</div>
</div>

Kendo MobileListView - can't get it to populate on remote source

I've tried to populate both the kendoMobileListView and the kendoListView with a remote source, but I just can't get it to populate with data.
The ItemBound event does not seem to fire.
If I use a local datasource then it works.
HTML:
<div data-role="view" data-use-native-scrolling="true" data-layout="default" data-title="Mobile-layout">
<div id="items-listview"></div>
</div>
<!-- Main Layout -->
<div data-role="layout" data-id="default">
<header data-role="header">
<div data-role="navbar"><span data-role="view-title"></span></div>
</header>
<!-- View Content -->
<div data-role="footer">
<div data-role="tabstrip">
Footer
</div>
</div>
</div>
Javascript:
$(document).ready(function(){
kendoApp = new kendo.mobile.Application($(document.body));
var myDataSource = new kendo.data.DataSource({
transport:{
read: {
url: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers",
dataType: "odata"
}
}
});
/*
$("#items-listview").kendoMobileListView({
dataSource: {
data: [
{ name: "Test 1" },
{ name: "Test 2" }
]
},
template: "<div>Blalbalblaa</div>"
});
*/
$("#items-listview").kendoMobileListView({
dataSource: myDataSource,
template: "<div>blalbalal</div>"
});
});
Please see my fiddle: http://jsfiddle.net/jasonBr81/3zjtcwr0/38/

Changed the datatype to "jsonp" and changed url to http://demos.telerik.com/kendo-ui/service/products, which returns a json object.
It then works!