I cant update UI template!

General
1

hi I cant update data injected to Ui telpmate until reload Tabs !!!
whay
any help

[{"id":"fadb2f93.c61ec8","type":"ui_template","z":"3bab7d86.a7d252","group":"917f331.ee040d","name":"Head","order":3,"width":"16","height":"17","format":"<link rel=\"stylesheet\" type=\"text/css\" href=\"https://cdn.datatables.net/v/ju-1.12.1/dt-1.10.18/af-2.3.2/b-1.5.4/datatables.min.css\"/>\n \n<script type=\"text/javascript\" src=\"https://cdn.datatables.net/v/ju-1.12.1/dt-1.10.18/af-2.3.2/b-1.5.4/datatables.min.js\"></script>\n\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"global","x":470,"y":460,"wires":[[]]},{"id":"2eb129eb.da4e26","type":"ui_template","z":"3bab7d86.a7d252","group":"917f331.ee040d","name":"Table","order":3,"width":"16","height":"17","format":"<table id=\"example\" class=\"display\" width=\"100%\"></table>\n<style> \nbody.nr-dashboard-theme md-content md-card {\n\tcolor: #000000;\n}\n</style>\n<script type=\"text/javascript\" class=\"init\">\n var dataSet =[];\n     $(document).ready(function() {\n    $('#example').DataTable( {\n        data: dataSet,\n        columns: [\n            { title: \"Name\" },\n            { title: \"Position\" },\n            { title: \"Office\" },\n            { title: \"Extn.\" },\n            { title: \"Start date\" },\n            { title: \"Salary\" }\n        ]\n    } );\n} );\n(function(scope) {\n\n scope.$watch('msg', function (msg) { //watch for an incoming NR msg\n if (msg) {\n console.log(msg)\n dataSet = msg.payload;\n  \n\n\n\n };\n }); \n })(scope);\n</script>\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":470,"y":500,"wires":[[]]},{"id":"a4b9a602.cedcb8","type":"inject","z":"3bab7d86.a7d252","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[[\"Tiger Nixon\",\"System Architect\",\"Edinburgh\",\"5421\",\"2011/04/25\",\"$320,800\"],[\"Garrett Winters\",\"Accountant\",\"Tokyo\",\"8422\",\"2011/07/25\",\"$170,750\"]]","payloadType":"json","x":300,"y":500,"wires":[["2eb129eb.da4e26"]]},{"id":"917f331.ee040d","type":"ui_group","name":"Group 1","tab":"5543b30c.8e955c","order":1,"disp":true,"width":"16","collapse":true},{"id":"5543b30c.8e955c","type":"ui_tab","name":"Tabulka","icon":"dashboard","disabled":false,"hidden":false}]
2

You need to call draw()

[{"id":"fadb2f93.c61ec8","type":"ui_template","z":"8ac17474d97456ce","group":"917f331.ee040d","name":"Head","order":3,"width":"16","height":"17","format":"<link rel=\"stylesheet\" type=\"text/css\" href=\"https://cdn.datatables.net/v/ju-1.12.1/dt-1.10.18/af-2.3.2/b-1.5.4/datatables.min.css\"/>\n \n<script type=\"text/javascript\" src=\"https://cdn.datatables.net/v/ju-1.12.1/dt-1.10.18/af-2.3.2/b-1.5.4/datatables.min.js\"></script>\n\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"global","x":1090,"y":640,"wires":[[]]},{"id":"2eb129eb.da4e26","type":"ui_template","z":"8ac17474d97456ce","group":"917f331.ee040d","name":"Table","order":3,"width":"16","height":"17","format":"<table id=\"example\" class=\"display\" width=\"100%\"></table>\n<style> \nbody.nr-dashboard-theme md-content md-card {\n\tcolor: #000000;\n}\n</style>\n<script type=\"text/javascript\" class=\"init\">\n\n(function(scope) {\n\n    var $datatable\n    var dataSet =[];\n    $(document).ready(function() {\n        $datatable = $('#example').DataTable( {\n            data: dataSet,\n            columns: [\n                { title: \"Name\" },\n                { title: \"Position\" },\n                { title: \"Office\" },\n                { title: \"Extn.\" },\n                { title: \"Start date\" },\n                { title: \"Salary\" }\n            ]\n        } );\n    });\n\n    scope.$watch('msg', function (msg) { //watch for an incoming NR msg\n        if (msg) {\n            //let table = $('#example').DataTable();\n            $datatable.clear();\n            $datatable.rows.add(msg.payload).draw();\n        };\n    }); \n\n})(scope);\n</script>\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":1090,"y":680,"wires":[[]]},{"id":"a4b9a602.cedcb8","type":"inject","z":"8ac17474d97456ce","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[[\"Tiger Nixon\",\"System Architect\",\"Edinburgh\",\"5421\",\"2011/04/25\",\"$320,800\"],[\"Garrett Winters\",\"Accountant\",\"Tokyo\",\"8422\",\"2011/07/25\",\"$170,750\"]]","payloadType":"json","x":920,"y":680,"wires":[["2eb129eb.da4e26"]]},{"id":"917f331.ee040d","type":"ui_group","name":"Group 1","tab":"5543b30c.8e955c","order":1,"disp":true,"width":"16","collapse":true},{"id":"5543b30c.8e955c","type":"ui_tab","name":"Tabulka","icon":"dashboard","disabled":false,"hidden":false}]
1 Like
3

thanks man its worked

4

now i want Get Data from a Selected row or cell and send it to node-red (msg.payload)
https://datatables.net/reference/api/cell().data()
exp : Alert the data from a cell when it is clicked upon

$('#example tbody').on( 'click', 'td', function () {
    alert( table.cell( this ).data() );
} );

how to implement it???

5

Use scope.send as documented in the template built in help.

6

ok am updating ui template to

<table id="example" class="display" width="100%"></table>
<style> 
body.nr-dashboard-theme md-content md-card {
	color: #000000;
}
</style>
<script type="text/javascript" class="init">

(function(scope) {

    var $datatable
    var dataSet =[];
    $(document).ready(function() {
        $datatable = $('#example').DataTable( {
            data: dataSet,
            columns: [
                { title: "Name" },
                { title: "Position" },
                { title: "Office" },
                { title: "Extn." },
                { title: "Start date" },
                { title: "Salary" }
            ]
        } );
    });
$('#example tbody').on( 'click', 'td', function () {
    msg.payload = table.cell( this ).data()
    $scope.send(msg);
    
} );
    scope.$watch('msg', function (msg) { //watch for an incoming NR msg
        if (msg) {
            //let table = $('#example').DataTable();
            $datatable.clear();
            $datatable.rows.add(msg.payload).draw();
        };
    }); 

})(scope);
</script>

but not work

7 
let m {};
m.payload = "whatever";
scope.send(m);
8

nothing
The problem is not in scop.send
Probably in jquary functions
changed scop.send with console log and nothing
Could the function be located wrong?

$('#example tbody').on( 'click', 'td', function () {
   conole.log("test");
    
} );
9

The datatables library has helper functions & handlers / callbacks for cell click and row click and getting values. Read the docs

.

1 Like
10

ok its work and see log in browser console

console.log('Col Clicked.', this, aData, iDisplayIndex, iDisplayIndexFull);

Untitled
Untitled755Ă—394 20 KB

but how convert this log to object !!!
and if send this to NR i see :

let m = {"topic":"cell click","payload":""}
m.payload = this;
scope.send(m)

Untitled

11

ok so i found another way
with

$('#example tbody').on( 'click', 'td', function () {
   
    scope.send( $datatable.cell( this ).data() );
    
} );

but first click worked but with Error in console
and second click nothing

Untitled
Untitled1366Ă—768 140 KB

full code UI Template

<table id="example" class="display" width="100%"></table>
<style> 
body.nr-dashboard-theme md-content md-card {
	color: #000000;
}
</style>

<script type="text/javascript" class="init">

     
(function(scope) {

    var $datatable
    var dataSet =[];
    $(document).ready(function() {
        $datatable = $('#example').DataTable( {
            fnRowCallback: function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
// Row click
$(nRow).on('click', function() {
//console.log('Row Clicked. Look I have access to all params, thank You closures.', this, aData, iDisplayIndex, iDisplayIndexFull);

});

// Cell click
$('td', nRow).on('click', function() {
//console.log('Col Clicked.', this, aData, iDisplayIndex, iDisplayIndexFull);

});
},
            data: dataSet,
            columns: [
                { title: "Name" },
                { title: "Position" },
                { title: "Office" },
                { title: "Extn." },
                { title: "Start date" },
                { title: "Salary" }
            ]
        } );
  
$('#example tbody').on( 'click', 'td', function () {
   
    scope.send( $datatable.cell( this ).data() );
    
} );
    });



        
    scope.$watch('msg', function (msg) { //watch for an incoming NR msg
        if (msg) {
            //let table = $('#example').DataTable();
            $datatable.clear();
            $datatable.rows.add(msg.payload).draw();
        };
    }); 

})(scope);

</script>