<!DOCTYPE html> <html> <head> {% include "common/common-head.html" %} </head> <body class="hold-transition skin-blue sidebar-mini"> <div class="wrapper"> {% include "common/page-header.html" %} {% with pageselected="status" %} {% include "common/sidebar-menu.html" %} {% endwith %} <!-- Content Wrapper. Contains page content --> <div class="content-wrapper"> <!-- Content Header (Page header) --> <section class="content-header"> <h1> Outlet status </h1> </section> <!-- Main content --> <section class="content"> <div class="row"> <div class="col-xs-12"> <div class="box"> <div class="box-body"> <table id="example2" class="table table-bordered table-hover"> <thead> <tr> <th style="width: 15px">#</th> <th>Description</th> <th style="width: 30px">Status</th> <th style="width: 300px">Power load</th> <th style="width: 150px">Command</th> </tr> </thead> <tbody> </tbody> </table> </div> <!-- /.box-body --> </div> <!-- /.box --> </div> <!-- /.col --> </div> <!-- /.row --> </section> <!-- /.content --> </div> <!-- /.content-wrapper --> {% include "common/footer.html" %} </div> <!-- ./wrapper --> {% include "common/common-js.html" %} <!-- DataTables --> <script src="../../bower_components/datatables.net/js/jquery.dataTables.min.js"></script> <script src="../../bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script> <script> $(function () { var btnhtml = `<div class="btn-group"> <button type="button" class="btn btn-info" script="toggle">Toggle</button> </div>`; var table = $('#example2').DataTable({ 'ajax': '/json/status', "columns" : [ { "data" : "Num" }, { "data" : "Description" }, { "data" : "Status" }, { "data" : null, "defaultContent": "<div class='progress progress-xs'><div class='progress-bar progress-bar-danger' style='width: 55%'></div></div>"}, { "data" : null, "defaultContent":btnhtml } ], 'paging' : false, 'lengthChange': true, 'searching' : true, 'ordering' : true, 'info' : true, 'rowCallback': function( row, data ) { if ( data.Status ) { $('td:eq(2)', row).html( '<i class="fa fa-toggle-on"></i>' ); } else { $('td:eq(2)', row).html( '<i class="fa fa-toggle-off"></i>' ); } } }); // autoreload every 3 seconds setInterval( function () { table.ajax.reload(); }, 3000 ); $('#example2 tbody').on( 'click', '[script="toggle"]', function (e) { e.preventDefault(); var id = $( this ).closest('tr').find('td:first').text(); $.ajax({ url: '/json/outlet/'+id+'/toggle', type: 'post' }) .done(function(result) { console.log(result); table.ajax.reload(); }) .fail(function(jqXHR, textStatus, errorThrown) { // needs to implement if it fails console.log(textStatus); }); }); } ); </script> </body> </html>