Cacher is the code snippet organizer for pro developers

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 type="button" class="btn btn-xs btn-primary buy"><i class="glyphicon glyphicon-arrow-up"></i></button> <button type="button" class="tn btn-xs btn-alert sell"><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) {
  return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">' +
        '<div class="detail-row ui form">'+
        '<div class="row">'+
        '<div class="col-sm-12 col-md-4">'+
        '<p class="MNBMasfel">Záróár: <span id="MNBTradeInfo_close" class="auto int">' + d.close + 'Ft</span><br/>'+
        'Nyitóár: <span id="MNBTradeInfo_open" >' + d.open + ' Ft</span><br/>'+
        'Napi min: <span id="MNBTradeInfo_min" class="auto int">' + d.min + ' Ft</span><br/>'+
        'Napi max: <span id="MNBTradeInfo_max" class="auto int">' + d.max + ' Ft</span><br/>'+
        'Utolsó adat id&#337;pontja: <span>' + d.stamp + '</span><br/>'+
        'Utolsó vételi ár: <span id="MNBTradeInfo_lastbid" class="auto int">' + d.lastbid + ' Ft</span><br/>'+
        'Utolsó eladási ár: <span id="MNBTradeInfo_lastask" class="auto int">' + d.lastask + ' Ft</span><br/>'+
        '</div>'+
        '<div class="col-sm-12 col-md-4">'+
        '<iframe id="MNBTradeLine_gfx" src="https://bet.hu/portal/api/game/game.html?securityId='+d.bseid+'&amp;title='+ d.instr + '&amp;width=420&amp;height=160&amp;isRealtime=true" frameborder="0" width="420" height="203" scrolling="no"></iframe>'+
        '</div>'+
        '</div>'+
        '</div>'+  
    '</table>';
}

function buy(d) {
  return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">' +
'<div id="buy" class="panel-body">'+
'<div class="col-sm-12 col-md-4">'+
        '<p class="MNBMasfel">Záróár: <span id="MNBTradeInfo_close" >' + d.close + 'Ft</span><br/>'+
        'Nyitóár: <span id="MNBTradeInfo_open" >' + d.open + ' Ft</span><br/>'+
        'Napi min: <span id="MNBTradeInfo_min" >' + d.min + ' Ft</span><br/>'+
        'Napi max: <span id="MNBTradeInfo_max" >' + d.max + ' Ft</span><br/>'+
        'Utolsó adat id&#337;pontja: <span" >' + d.stamp + '</span><br/>'+
        'Utolsó vételi ár: <span id="MNBTradeInfo_lastbid" >' + d.lastbid + ' Ft</span><br/>'+
        'Utolsó eladási ár: <span id="MNBTradeInfo_lastask" >' + d.lastask + ' Ft</span><br/>'+
        '</p>'+
        '</div>'+
'<form class="form-horizontal col-sm-8">'+
        '<div class="col-sm-12 col-md-8 buyStock">'+
            '<div class="form-group">'+
                '<label for="quantity_Buy" class="col-md-1">Darab</label>'+
                '<div class="col-md-11 controls">'+
                    '<div class="input-group">'+
                        '<span class="input-group-btn">'+
                            '<button id="max_Buy" class="btn btn-primary" style="width:100px;" type="button" return false>Max</button>'+
                        '</span>'+
                        '<input id="quantity_Buy" type="number" class="form-control text-right" pattern="[0-9]+" maxlength="5" name="quantity_Buy" paceholder="0" onkeypress="calcDB()">' +

                        '<span class="input-group-addon">'+ d.instr + '</span>'+
                    '</div>'+
                '</div>'+
            '</div>'+
            '<div class="form-group">'+
                '<label for="price_Buy " class="col-md-1 control-label">Ár</label>'+
                '<div class="col-md-11">'+
                    '<div class="input-group">'+
                        '<div class="input-group-btn">'+
                       '<button id="priceBtn" class="btn btn-primary" style="width:100px;" type="button" return false>Ár</button>'+
                        '</div>'+
                        '<input id="price_Buy " type="number" class="form-control text-right" name="price_Buy" placeholder="0">'+
                        '<span class="input-group-addon">Ft</span>'+
                    '</div>'+
                '</div>'+
            '</div>'+
            '<div class="form-group">'+
                '<label class="col-md-1 control-label">Típus</label>'+
                '<div class="col-md-3">'+
              '<select name="type " id="MNBTradeLine_ordertype " class="btn btn-primary dropdown-toggle">'+
                  '<option value="market">Piaci</option>'+
                  '<option value="limit">Limit</option>'+
                  '<option value="marketstop">Stop Piaci</option>'+
                  '<option value="limitstop" >Limit Stop</option>'+
              '</select>'+
                '</div>'+
                '<div class="col-md-8">'+
                    '<div class="btn-group">'+
              '<select name="expire " id="MNBTradeLine_expire " class="btn btn-primary dropdown-toggle">'+
                  '<option value="mo" >Mai napon</option>'+
                  '<option value="gtc" >Visszavonásig</option>'+
              '</select>'+
                    '</div>'+
                '</div>'+
            '</div>'+
            '<div class="form-group">'+
            '<div class="col-md-1 control-label">'+
                '<label for="total_Buy" name="total_BuyLabel" class="col-md-1 control-label" data-toggle="tooltip" data-placement="top" title="Összesen">Össz.</label>'+
            '</div>'+
            '<div class="col-sm-12 col-md-11">'+
                    '<div class="input-group">'+
                        '<input id="total_Buy " class="form-control text-right"  type="number" placeholder="0" name="total_Buy">'+
                        '<span class="input-group-addon">Ft</span>'+
                    '</div>'+
                '</div>'+
            '</div>'+
            '<div class="form-group">'+
            '<div class="col-md-12">'+
              '<div class="alert alert-danger">'+
                '<strong>Figyelem!</strong>'+
              '</div>'+
             '</div>'+
         '</div>'+
         '<div class="form-group">'+
            '<div class="col-md-12">'+
                '<button type="submit" class="btn btn-primary center-block"><i class="fa fa-plus"></i>&nbsp;'+ d.instr +' vásárlás</button>'+
            '</div>              '+
            '</div>'+
        '</div>'+
    '</form>'+
'</div>'
'</table>';
}
function sell(d) {
  return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">' +
        '<div class="sell-row ui form">'+
        '<div class="row">'+
'<div class="panel-body">'+
        '<div class="col-sm-12 col-md-4">'+
        '<p class="MNBMasfel">Záróár: <span id="MNBTradeInfo_close" >' + d.close + 'Ft</span><br/>'+
        'Nyitóár: <span id="MNBTradeInfo_open" >' + d.open + ' Ft</span><br/>'+
        'Napi min: <span id="MNBTradeInfo_min" >' + d.min + ' Ft</span><br/>'+
        'Napi max: <span id="MNBTradeInfo_max" >' + d.max + ' Ft</span><br/>'+
        'Utolsó adat id&#337;pontja: <span" >' + d.stamp + '</span><br/>'+
        'Utolsó vételi ár: <span id="MNBTradeInfo_lastbid" >' + d.lastbid + ' Ft</span><br/>'+
        'Utolsó eladási ár: <span id="MNBTradeInfo_lastask" >' + d.lastask + ' Ft</span><br/>'+
        '</div>'+
        '<div class="col-sm-12 col-md-8">'+
            '<div class="form-group">'+
                '<label for="quantity_Sell" class="col-md-1" control-label">Darab</label>'+
                '<div class="col-md-11 controls">'+
                    '<div class="input-group">'+
                        '<span class="input-group-btn">'+
                            '<button class="btn btn-primary" style="width:100px;" type="button">Max</button>'+
                        '</span>'+
                        '<input type="text" class="form-control text-right" pattern="[0-9]+" maxlength="5" name="quantity_Sell" placeholder="'+ d.qty +'">'+
                        '<span class="input-group-addon">'+ d.instr + '</span>'+
                    '</div>'+
                '</div>'+
            '</div>'+
            '<div class="form-group">'+
                '<label for="price_Sell" class="col-md-1 control-label">Ár</label>'+
                '<div class="col-md-11">'+
                    '<div class="input-group">'+
                        '<div class="input-group-btn">'+
                       '<button class="btn btn-primary" style="width:100px;" type="button">Ár</button>'+
                        '</div>'+
                        '<input type="text" class="form-control text-right" name="price_Sell" placeholder="'+ d.ask + '">'+
                        '<span class="input-group-addon">Ft</span>'+
                    '</div>'+
                '</div>'+
            '</div>'+
            '<div class="form-group">'+
                '<label class="col-md-1 control-label">Típus</label>'+
                '<div class="col-md-3">'+
              '<select name="type" id="MNBTradeLine_ordertype" class="btn btn-primary dropdown-toggle">'+
                '<option id="marketdropdown" class="enabled" value="market">Piaci</option>                 '+
                  '<option value="limit">Limit</option>'+
                  '<option value="marketstop">Stop Piaci</option>'+
                  '<option value="limitstop" >Limit Stop</option>'+
              '</select>'+
                '</div>'+
                '<div class="col-md-8">'+
                    '<div class="btn-group">'+
              '<select name="expire" id="MNBTradeLine_expire" class="btn btn-primary dropdown-toggle">'+
                  '<option value="mo" >Mai napon</option>'+
                  '<option value="gtc" >Visszavonásig</option>'+
              '</select>'+
                    '</div>'+
                '</div>'+
            '</div>'+
            '<div class="form-group">'+
            '<div class="col-md-1 control-label">'+
                '<label for="total_Buy" class="col-md-1 control-label" data-toggle="tooltip" data-placement="top" title="Összesen">Össz.</label>'+
            '</div>'+
            '<div class="col-sm-12 col-md-11">'+
                    '<div class="input-group">'+
                        '<input class="form-control text-right"  type="text" placeholder="0" name="total_Sell">'+
                        '<span class="input-group-addon">Ft</span>'+
                    '</div>'+
                '</div>'+
            '</div>'+
            '<div class="col-md-12">'+
                '<div class="bs-callout bs-callout-danger">'+
                '</div>'+
            '<div class="col-md-12">'+
                '<button type="submit" class="btn btn-danger center-block"><i class="fa fa-minus"></i>&nbsp;'+ d.instr +' eladás</button>'+
            '</div>'+                
            '</div>'+
        '</form><!--form_Sell-->'+
        '</div>'+
    '</div>'+
        '</div>'+  
    '</table>';
}
var listview = $('table.dataTable').DataTable({
  paging: false,
  searching: false,
  responsive: false,
  showdetails: false,
  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"
  }]
});

// 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);

    // Open this row
    row.child(format(row.data())).show();
    tr.addClass('shown');
});

$('table tbody').on('click', 'button.buy', function() {
  var tr = $(this).closest('tr');
  var row = listview.row(tr);
    // Open this row
    row.child(buy(row.data())).show();
    $('.buy').addClass('shown');
});
$('table tbody').on('click', 'button.sell', function() {
  var tr = $(this).closest('tr');
  var row = listview.row(tr);
    // Open this row
    row.child(sell(row.data())).show();
    tr.addClass('shown');
});
/*
setInterval(function() {
  listview.ajax.reload();
}, 100000);
*/

// close jquery 
});