Cacher is the code snippet organizer for pro developers

// DATATBLES MONSTER :D

var dataurl = server_base_url + indexphp_base_url + '?module=frontend&action=getmyinstruments&user=' + $('#MNBTopHtmlUserId').html();
var datatbleMoreBtn = "<i class='glyphicon glyphicon-plus-sign'></i>";
var datatbleActionsBtn = '<button title="Vétel" data-toggle="modal" data-target="#buyModal" data-placement="left" class="btn btn-xs btn-primary"><i class="glyphicon glyphicon-arrow-up"></i></button> <button title="Eladás" data-toggle="modal" data-target="#buyModal" data-placement="right" class="btn btn-xs btn-alert"><i class="glyphicon glyphicon-arrow-down"></i></button>'
var numericValue = $.fn.dataTable.render.number(' ', ',', 0, '');
var numericValuePct = $.fn.dataTable.render.number(' ', ',', 2, '');

function format(d) {
  // `d` is the original data object for the row
  return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">' +
    '<tr>' +
    '<td>Név:</td>' +
    '<td>' + d.instr + '</td>' +
    '</tr>' +
    '<tr>' +
    '<td>Last:</td>' +
    '<td>' + d.last + '</td>' +
    '</tr>' +
    '<tr>' +
    '<td>info:</td>' +
    '<td>tábla infó</td>' +
    '</tr>' +
    '</table>';
}
var listview = $('table.dataTable').DataTable({
  paging: false,
  searching: false,
  responsive: true,
  ordering: true,
  "ajax": dataurl,
  "order": [
    [10, "desc"]
  ],
  "columnDefs": [
    //{ className: dataNames, "targets": [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11] }
  ],
  "columns": [{
    "className": 'details-control text-center',
    "orderable": false,
    "data": null,
    "defaultContent": '<i class="glyphicon glyphicon-plus-sign"></i>'
  }, {
    "data": "instr"
  }, {
    "data": "category",
    className: "category text-center",
  }, {
    "data": "last",
    className: "last text-right",
    render: numericValue
  }, {
    "data": "bid",
    className: "bid text-right",
    render: numericValue
  }, {
    "data": "ask",
    className: "ask text-right",
    render: numericValue
  }, {
    "data": "changept",
    className: "changept text-right",
    "createdCell": function(td, cellData, rowData, row, col) {
      if (cellData < 0) {
        $(td).css('color', '#CC4533') //#CC4533 red
      }
      if (cellData > 0) {
        $(td).css('color', '#50924D') //#50924D green
      }
    }
  }, {
    "data": "changepct",
    className: "changepct text-right",
    render: $.fn.dataTable.render.number('%', ',', 2, ''),
    "createdCell": function(td, cellData, rowData, row, col) {
      if (cellData < 0) {
        $(td).css('color', '#CC4533') //#CC4533 red
      }
      if (cellData > 0) {
        $(td).css('color', '#50924D') //#50924D green
      }
    }
  }, {
    "data": "close",
    className: "text-right",
    render: numericValue
  }, {
    "data": "qty",
    className: "qty text-right",
  }, {
    "data": "price",
    className: "price text-right",
    render: numericValue
  }, {
    "data": "profit",
    className: "profit text-right",
    render: numericValuePct
  }, {
    "data": "null",
    "defaultContent": datatbleActionsBtn,
    "orderable": false,
    className: "actions text-center",
    idName: "actions"
  }]
});

// Add event listener for opening and closing details
$('table tbody').on('click', 'td.details-control', function() {
  var tr = $(this).closest('tr');
  var row = listview.row(tr);

  if (row.child.isShown()) {
    // This row is already open - close it
    row.child.hide();
    tr.removeClass('shown');
  } else {
    // Open this row
    row.child(format(row.data())).show();
    tr.addClass('shown');
  }
});

setInterval(function() {
  listview.ajax.reload();
}, 10000);