File
Add library
Share
Login or Register
Help
HTMLSaved
 
<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    
    <script src="https://cdn.datatables.net/1.13.11/js/jquery.dataTables.js"></script>
<link href="https://cdn.datatables.net/1.13.11/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
​
​
            <link href="https://editor.datatables.net/extensions/Editor/css/editor.dataTables.min.css" rel="stylesheet" type="text/css" />
<script src="https://editor.datatables.net/extensions/Editor/js/dataTables.editor.min.js"></script>
​
    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
  <body>
​
    
 </div> 
    <div class="row row-padding">
            <div class="col-12">
                <div class="card">
                    <div class="card-body">
                            <button id="show">Show All</button>
                        <button id="hide">Hide All</button>
                        <table id="salespersonBillTo" class="" width="100%">
                            <thead style="display: none"></thead>
                        </table>
                    </div>
    
                </div>
            </div>
    </div>
    
  </body>
</html>
​
CSSSaved
 
#salespersonBillTo {
    font-family: Sans-serif;
    font-size: 0.80rem; 
} 
​
#salespersonBillTo table.dataTable.compact tbody th, table.dataTable.compact tbody td,
    table.dataTable.compact tfoot td {
    padding: 0px 0px 0px 0px;
}
​
/**********************************************/
/* Level 1 table and row styles (Salesperson) */
/**********************************************/
/* .level-1-control-row-format-0{ text-align: left; }    */
​
.level-1-control-row-format-1 {
    text-align: left;
    width: 195px
}
​
.level-1-control-row-format-2 {
    text-align: left;
    width: 50px
}
​
.level-1-control-row-format-3 {
    text-align: left;
    width: 50px
}
​
.level-1-control-row-format-4 {
    text-align: left;
    width: 940px
}
​
#salespersonBillTo td.BR_CBT_detail-level-control_1 {
background: url('https://www.datatables.net/examples/resources/details_open.png') no-repeat center;
    cursor: pointer;
    transition: .5s;
    height: 30px;
    width: 25px
}
​
#salespersonBillTo tr.shown td.BR_CBT_detail-level-control_1 {
    background: url('https://www.datatables.net/examples/resources/details_close.png') no-repeat cente
    transition: .5s;
    height: 30px;
    width: 25px
}
​
/* Level 1 button badges (Salesperson) */
#BR_CBT_SalespersonOpenBudgetButton {
    border-radius: 0.25rem;
    background-color: #dc3545;
    border: none;
    color: white;
    width: 138px;
    height: 25px;
}
​
#BR_CBT_SalespersonCompletedBudgetButton {
    border-radius: 0.25rem;
    background-color: #28a745;
    border: none;
    color: white;
    width: 138px;
    height: 25px;
}
​
#BR_CBT_SalespersonTotalBudgetButton {
    border-radius: 0.25rem;
    background-color: #6c757d;
    border: none;
    color: white;
    width: 138px;
    height: 25px;
​
}
​
/***************************************************/
/* Level 2 table and row styles (Customer Bill To) */
/***************************************************/
​
.level-2-control-row-format-1 {
    text-align: left;
    width: 274px
}
​
.level-2-control-row-format-2 {
    text-align: left;
    width: 120px
}
​
.level-2-control-row-format-3 {
    text-align: left;
    width: 120px
}
​
.level-2-control-row-format-4 {
    text-align: left;
    width: 812px
}
​
#salespersonBillTo td.BR_CBT_detail-level-control_2 {
background: url('https://www.datatables.net/examples/resources/details_open.png') no-repeat center;
    cursor: pointer;
    transition: .5s;
    height: 30px;
    width: 25px
}
​
#salespersonBillTo tr.shown td.BR_CBT_detail-level-control_2 {
    background: url('https://www.datatables.net/examples/resources/details_close.png') no-repeat cente
    transition: .5s;
    height: 30px;
    width: 25px
}
​
/* Level 2 button badges (Customer Bill To) */
#BR_CBT_customerOpenBudgetButton {
    border-radius: 0.25rem;
    background-color: #dc3545;
    border: none;
    color: white;
    width: 138px;
    height: 25px;
}
​
#BR_CBT_customerCompletedBudgetButton {
    border-radius: 0.25rem;
    background-color: #28a745;
    border: none;
    color: white;
    width: 138px;
    height: 25px;
}
​
#BR_CBT_customerTotalBudgetButton {
    border-radius: 0.25rem;
    background-color: #6c757d;
    border: none;
    color: white;
    width: 138px;
    height: 25px;
}
/*******************************************/
/* Level 3 table and row styles (Products) */
/*******************************************/
​
.level-3-control-row-format-1 {
    text-align: left;
    width: 80px
}
​
.level-3-control-row-format-2 {
    text-align: left;
    width: 60px
}
​
.level-3-control-row-format-3 {
    text-align: left;
    width: 270px
}
​
.level-3-control-row-format-4 {
    text-align: left;
    width: 1022px
}
​
#salespersonBillTo td.BR_CBT_detail-level-control_3 {
background: url('https://www.datatables.net/examples/resources/details_open.png') no-repeat center;
    cursor: pointer;
    transition: .5s;
    height: 30px;
    width: 47px
}
​
#salespersonBillTo tr.shown td.BR_CBT_detail-level-control_3 {
        background: url('https://www.datatables.net/examples/resources/details_close.png') no-repeat cente
    transition: .5s;
    height: 30px;
    width: 47px
    
}
​
/*************************/
/* Budget Level Styles   */
/*************************/
​
#salespersonBillTo_salesYearTable {
    height: 75px;
    width: 100%
}
​
#salespersonBillTo_salesYearTable th {
    text-align: center
}
​
#salespersonBillTo_salesYearTable td {
    text-align: center;
    width: 100px;
}
​
#salespersonBillTo_salesYearTable thead tr th {
    padding-left: 10px;
}
​
#salespersonBillTo_salesYearTable {
    height: 75px;
}
​
#salespersonBillTo_totalBudgetSpan{
    width: 50px; 
}
JavaScriptSaved
 
var salespersonGroupingNumber = '0';
​
var salespersonDataSet = [
    {
        returnedSalespersonGroupNumber: '0',
        salespersonName: 'HOUSE ACCOUNTS',
        totalBudget: '10',
        openBudget: '0',
        completedBudget: '10',
    },
​
];
​
var customersDataSet = [
    {
        customer: '12555 - Test Customer',
        customerNumber: '12555',
        openBudget: '0',
        completedBudget: '1',
        totalBudget: '1',
        returnedSalespersonGroupNumber: '0',
    },
​
];
​
var productsDataSet = [
    {
        status: 'Open',
        customerNumber: '12555',
        productNumber: 'B12348',
        productDescription: 'Test Product',
        locationCode: 'CHI',
        shipToCode: '',
        shipMessage: '',
        customerBillToName: '',
        customerBillToAddress1: '',
        customerBillToAddress2: '',
        customerBillToAddress3: '',
        customerShipToName: '',
        customerShipToAddress1: '',
        customerShipToAddress2: '',
        customerShipToAddress3: '',
        lastYear_JanuarySales: '.0',
        lastYear_FebruarySales: '.0',
        lastYear_MarchSales: '.0',
        lastYear_AprilSales: '.0',
        lastYear_MaySales: '.0',
        lastYear_JuneSales: '.0',
        lastYear_JulySales: '.0',
        lastYear_AugustSales: '.0',
        lastYear_SeptemberSales: '.0',
        lastYear_OctoberSales: '.0',
        lastYear_NovemberSales: '.0',
        lastYear_DecemberSales: '.0',
        lastYear_TotalSales: 0,
        thisYear_JanuarySales: '.0',
        thisYear_FebruarySales: '.0',
        thisYear_MarchSales: '.0',
        thisYear_AprilSales: '.0',
        thisYear_MaySales: '.0',
        thisYear_JuneSales: '.0',
        thisYear_JulySales: '.0',
        thisYear_AugustSales: '.0',
        thisYear_SeptemberSales: '.0',
        thisYear_OctoberSales: '.0',
        thisYear_NovemberSales: '.0',
        thisYear_DecemberSales: '.0',
        thisYear_TotalSales: 0,
        returnedSalespersonGroupNumber: '0',
    },
​
];
var budgetDataSet ={
  "data": [{
    "DT_RowId": "row_028baa38c25716baa38c251267baa38c25S06914",
    "PKLOC": "028",
    "PKGRP": "716",
    "PKCUST": "1267",
    "PKPROD": "S06914",
    "SYNCFL": "Y",
    "BD$01": "11.0",
    "BD$02": "11.0",
    "BD$03": "11.0",
    "BD$04": "11.0",
    "BD$05": "11.0",
    "BD$06": "11.0",
    "BD$07": "11.0",
    "BD$08": "11.0",
    "BD$09": "11.0",
    "BD$10": "11.0",
    "BD$11": "11.0",
    "BD$12": "11.0"
  }],
  "options": [],
  "files": [],
  "draw": 1,
  "recordsTotal": 1,
  "recordsFiltered": 1,
  "debugSql": []
};
​
var salespersonRowBudgetCounts = []; // Array used for getting open and closed for salesperson level button badge
var customerRowBudgetCounts = []; // Array used for getting open and closed for customer level button badge
var productRowBudgetCounts = []; // Array used for getting open and closed for product level button badge
 var locationSelectionArrayData ='<option value="" disabled selected hidden>Choose Location</option>';
var salespersonBillTo_editor; // use a global for the submit and return data rendering
​
​
function createChild_1(row) {
    //child_1 table data
    var rowData = row.data();
​
    // This is the table we'll convert into a DataTable
    var salespersonBillTo_childTable1 = $(
            '<table id="salespersonBillTo_customerRows_'+rowData.returnedSalespersonGroupNumber +'" class="display nowrap" width="100%">' +
            '<thead style="display:none"></thead >' +
            '</table>'  
    );
​
    // Display it the child row
    row.child(salespersonBillTo_childTable1).show();
​
    // Child row DataTable configuration, always passes the parent row's id to server
    var customerTable = salespersonBillTo_childTable1
        .on(
            'click',
            'td.BR_CBT_detail-level-control_2',
            function (e, d) {
                e.stopPropagation(); // Make sure the Parent event doesn't execute
​
                // DT API instance might be passed in as part of the second parameter
                // Happens during initialisation
                var table = d && d.api
                    ? d.api
                    : customerTable;
​
                var tr = $(this).closest('tr');
                var row = table.row(tr);
            
                if (row.child.isShown()) {
                    // This row is already open - close it
                    destroyChild(row);
                    tr.removeClass('shown');
                } else {
                    // Open this row
                    createChild_2(row);
                    tr.addClass('shown');
                }
            }
        )
        .DataTable({
            rowCallback: function (row, data, index) {
                 customerRowBudgetCounts.push({id:data.customerNumber, open:data.openBudget, closed: data.completedBudget});
            },
            dom: 't',
          
               data:customersDataSet,
          
            pageLength: 100,
            columns: [
                {
                    className: 'BR_CBT_detail-level-control_2',
                    orderable: false,
                    data: null,
                    defaultContent: '',
                },
                {
                    data: 'customer',
                },
​
                {
                    data: null,
                    searchable: false,
                    orderable: false,
                       render: function ( data, type, row ) {
                           if (row.openBudget !== 0) {
​
                                 return '<td><button type="button" id="BR_CBT_customerOpenBudgetButton">Open '+ row.openBudget + '</button></td>';
                                  
                                  }else{
                                      
                                //   return '<td><strong><span style="color:green;">Budget Completed</span></strong></td>';
                                     return '<td><button  type="button" class="budgetCompletedBadge">Budget Completed</button></td>';
                                      
                                 }
                         }
                    }, 
​
                {
                    data: null,
                    searchable: false,
                    orderable: false,
                    render: function (data, type, row) {
                        return (
                            '<td><button type="button" id="BR_CBT_customerCompletedBudgetButton">Completed ' +  row.completedBudget +'</button></td>'
                        );
                    },
                },
​
                {
                    data: null,
                    searchable: false,
                    orderable: false,
                    render: function (data, type, row) {
                        return (
                            '<td><button type="button" id="BR_CBT_customerTotalBudgetButton">Total ' +row.totalBudget +'</button></td>'
                        );
                    },
                },
                { data: 'customerNumber', visible: false },
                { data: 'returnedSalespersonGroupNumber', visible: false },
        ],
        
            // Set rows IDs
            rowId: function (a) {
                return 'salespersonBillTo_' + a.customerNumber;
            },
            columnDefs: [
                { targets: [1], className: 'level-2-control-row-format-1' },
                { targets: [2], className: 'level-2-control-row-format-2' },
                { targets: [3], className: 'level-2-control-row-format-3' },
                { targets: [4], className: 'level-2-control-row-format-4' },
            ],
​
            select: false,
        });
}
​
function createChild_2(row) {
    //child_1 table data
    var rowData = row.data();
​
    // This is the table we'll convert into a DataTable
    var salespersonBillTo_childTable2 = $(
            '<table id="salespersonBillTo_productRows_' + rowData.customerNumber + '" class="display compact nowrap  "width="100%">' +
            '<thead style="display:none"></thead >' +
            '</table>'
    );
​
    // Display it the child row
    row.child(salespersonBillTo_childTable2).show();
​
    // Child row DataTable configuration, always passes the parent row's id to server
    var productTable = salespersonBillTo_childTable2
        .on(
            'click',
            'td.BR_CBT_detail-level-control_3',
            function (e, d) {
                e.stopPropagation(); // Make sure the Parent event doesn't execute
​
                // DT API instance might be passed in as part of the second parameter
                // Happens during initialisation
                var table = d && d.api
                    ? d.api
                    : productTable;
​
                var tr = $(this).closest('tr');
                var row = table.row(tr);
​
                if (row.child.isShown()) {
                    // This row is already open - close it
                    destroyChild(row);
                    tr.removeClass('shown');
                } else { 
                    // Open this row
                    createChild_3(row);
                    tr.addClass('shown');
                }
            }
        )
        .DataTable({
            rowCallback: function (row, data, index) {
                if ( data.status =='Open'){
                    $(row).find('td:eq(1)').css('font-weight', 'bold'); // text bold
                    $(row).find('td:eq(1)').css('color', '#dc3545'); // text color
                 }else{
                    $(row).find('td:eq(1)').css('font-weight', 'bold'); // text bold
                    $(row).find('td:eq(1)').css('color', '#28a745'); // text color
                  } 
            },
            dom: 't',
                data: productsDataSet,
        pageLength: 500,
            columns: [
                {
                    className: 'BR_CBT_detail-level-control_3',
                    orderable: false,
                    data: null,
                    defaultContent: '',
                },
                 { data: 'status',
                      id: 'status' },
                      { data: 'productNumber'},
                      { data: 'productDescription' },
                      { data: 'location' },
​
                      //Columns used for budget row data information
                      { data: 'salesperson', visible: false },
                      { data: 'shipToCode', visible: false },
                      { data: 'shipMessage', visible: false },    
                      { data: 'customerBillToName', visible: false },
                      { data: 'customerBillToAddress1', visible: false },
                      { data: 'customerBillToAddress2', visible: false },
                      { data: 'customerBillToAddress3', visible: false },
                      { data: 'customerShipToName', visible: false },
                      { data: 'customerShipToAddress1', visible: false },
                      { data: 'customerShipToAddress2', visible: false },
                      { data: 'customerShipToAddress3', visible: false } , 
                     
                     { data: 'lastYear_JanuarySales', visible: false },
                     { data: 'lastYear_FebruarySales', visible: false },
                     { data: 'lastYear_MarchSales', visible: false },
                     { data: 'lastYear_AprilSales', visible: false },
                     { data: 'lastYear_MaySales', visible: false },
                     { data: 'lastYear_JuneSales', visible: false },
                     { data: 'lastYear_JulySales', visible: false },
                     { data: 'lastYear_AugustSales', visible: false },
                     { data: 'lastYear_SeptemberSales', visible: false },
                     { data: 'lastYear_OctoberSales', visible: false },
                     { data: 'lastYear_NovemberSales', visible: false },
                     { data: 'lastYear_DecemberSales', visible: false },
                     { data: 'lastYear_TotalSales', visible: false },
​
                     { data: 'thisYear_JanuarySales', visible: false },
                     { data: 'thisYear_FebruarySales', visible: false },
                     { data: 'thisYear_MarchSales', visible: false },
                     { data: 'thisYear_AprilSales', visible: false },
                     { data: 'thisYear_MaySales', visible: false },
                     { data: 'thisYear_JuneSales', visible: false },
                     { data: 'thisYear_JulySales', visible: false },
                     { data: 'thisYear_AugustSales', visible: false },
                     { data: 'thisYear_SeptemberSales', visible: false },
                     { data: 'thisYear_OctoberSales', visible: false },
                     { data: 'thisYear_NovemberSales', visible: false },
                     { data: 'thisYear_DecemberSales', visible: false }, 
                     { data: 'thisYear_TotalSales', visible: false },
                     { data: 'returnedSalespersonGroupNumber', visible: false }
        ],
        
            // Set rows IDs
            rowId: function (a) {
                return 'salespersonBillTo_' + a.productNumber;
            },
            columnDefs: [
                  {
                      targets: [1],
                      className: 'level-3-control-row-format-1',
                      createdCell:  function (td, cellData, rowData, row, col) {
                              $(td).attr('name', 'status'); 
                           }
                    },
                    {
                      targets: [2],
                      className: 'level-3-control-row-format-2'
                    },
                    {
                      targets: [3],
                      className: 'level-3-control-row-format-3'
                    },
                    {
                      targets: [4],
                      className: 'level-3-control-row-format-4'
                    },
​
                 ],
                    
            select: false,
        });
}
function createChild_3(row) {
    //child_3 table data
    var rowData = row.data();
​
    // This is the table we'll convert into a DataTable
    var salespersonBillTo_childTable3 = $('<div class="budgetDetailRowForm col-12 py-3">' +
​
              '<div class="col-12 flex budgetFormRow">' +
​
                   '<div class="budgetDetailFormRow-1-format-1"><label>Location:</label> <select id="BR_CBT_locationSelection_' + rowData.productNumber +'" name="BR_CBT_locationSelection_' + rowData.productNumber +'" onchange="BR_CBT_changeLocation(this.value, '+ rowData.returnedSalespersonGroupNumber +',  '+ rowData.customerNumber +', \''+ rowData.productNumber +'\')"></select></div>' + 
      
                    '<div class="budgetDetailFormRow-1-format-2"><label>Customer Number:</label><span>  ' + rowData.customerNumber +' </span></div>' +
​
                    '<div class="budgetDetailFormRow-1-format-3"><label>Ship Code:</label><span>  ' + rowData.shipToCode +' </span></div>' +
​
                    '<div class="budgetDetailFormRow-1-format-4"><label>Ship Message:</label><span>  ' + rowData.shipMessage +' </span></div>' +
       
                '</div>' +    
​
                   '<div class="col-12 flex budgetFormRow">' +
                         
                       '<div class="budgetDetailFormRow-1-format-5"><label>Product Number:</label><span>  ' + rowData.productNumber +' </span></div>' +
​
                   '<div class="budgetDetailFormRow-1-format-6"><label>Product Description:</label><span>  ' + rowData.productDescription +' </span></div>' +
​
                '</div>' +  
​
                //Bill To and Ship To Information
                '<div class="flex pt-2 pb-1">' +
                 
                        '<div class="col-3"><label><u>Bill To</u></label></div>' +
​
                    '<div class="col-3"><label><u>Ship To</u></label></div>' +
​
                    '</div>' +   
                            
                    '<div class="flex budgetFormRow"> ' +
             
                    '<div class="col-3"><label>Name:</label><span>  ' + rowData.customerBillToName +' </span></div>' +
​
                    '<div class="col-3"><label>Name:</label><span>  ' + rowData.customerShipToName +' </span></div>' +
​
                '</div>' +
​
                '<div class="flex budgetFormRow">' +
​
                    '<div class="col-3"><label>Address 1:</label><span>  ' + rowData.customerBillToAddress1 +' </span></div>' +
​
                        '<div class="col-3"><label>Address 1:</label><span>  ' + rowData.customerShipToAddress1 +' </span></div>' +
​
                '</div>' +
​
                    '<div class="flex budgetFormRow">' +
             
                        '<div class="col-3"><label>Address 2:</label><span>  ' + rowData.customerBillToAddress2 +' </span></div>' +
​
                        '<div class="col-3"><label>Address 2:</label><span>  ' + rowData.customerShipToAddress2 +' </span></div>' +
​
                    '</div>' + 
                    
                    '<div class="flex budgetFormRow">' +
                 
                        '<div class="col-3"><label>Address 3:</label><span>  ' + rowData.customerBillToAddress3 +' </span></div>' +
​
                        '<div class="col-3"><label>Address 3:</label><span>  ' + rowData.customerShipToAddress3 +' </span></div>' +
​
                '</div>' +  
                    
         '</div>' + 
​
         '<div class="col-5 poundsExpression text-primary" id="poundsExpression"><p>All pounds are expressed in thousands</p></div>' +
            
         // Last Year Sales table
          '<table id="salespersonBillTo_salesYearTable" class="center">' +
​
            '<thead>'+
               '<tr><th></th><th>January</th><th>February</th><th>March</th><th>April</th><th>May</th><th>June</th><th>July</th><th>August</th><th>September</th><th>October</th><th>November</th><th>December</th><th>Totals</th><th></th></tr>'+
             '</thead>' +
​
            '<tbody>'+
                 '<tr><td class="px-2"><b>Last Year Sales</b></td><td>' + parseFloat(rowData.lastYear_JanuarySales).toFixed(1) +'</td><td>' + parseFloat(rowData.lastYear_FebruarySales).toFixed(1) +'</td><td>' + parseFloat(rowData.lastYear_MarchSales).toFixed(1) +'</td><td>' + parseFloat(rowData.lastYear_AprilSales).toFixed(1) +'</td><td>' + parseFloat(rowData.lastYear_MaySales).toFixed(1) +'</td><td>' + parseFloat(rowData.lastYear_JuneSales).toFixed(1) +'</td><td>' + parseFloat(rowData.lastYear_JulySales).toFixed(1) +'</td><td>' + parseFloat(rowData.lastYear_AugustSales).toFixed(1) +'</td><td>' + parseFloat(rowData.lastYear_SeptemberSales).toFixed(1) +'</td><td>' + parseFloat(rowData.lastYear_OctoberSales).toFixed(1) +'</td><td>' + parseFloat(rowData.lastYear_NovemberSales).toFixed(1) +'</td><td>' + parseFloat(rowData.lastYear_DecemberSales).toFixed(1) +'</td><td>' + parseFloat(rowData.lastYear_TotalSales).toFixed(1) +'</td><td></td></tr>' +
                '<tr><td class="px-2"><b>This Year Sales</b></td><td>' + parseFloat(rowData.thisYear_JanuarySales).toFixed(1) +'</td><td>' + parseFloat(rowData.thisYear_FebruarySales).toFixed(1) +'</td><td>' + parseFloat(rowData.thisYear_MarchSales).toFixed(1) +'</td><td>' + parseFloat(rowData.thisYear_AprilSales).toFixed(1) +'</td><td>' + parseFloat(rowData.thisYear_MaySales).toFixed(1) +'</td><td>' + parseFloat(rowData.thisYear_JuneSales).toFixed(1) +'</td><td>' + parseFloat(rowData.thisYear_JulySales).toFixed(1) +'</td><td>' + parseFloat(rowData.thisYear_AugustSales).toFixed(1) +'</td><td>' + parseFloat(rowData.thisYear_SeptemberSales).toFixed(1) +'</td><td>' + parseFloat(rowData.thisYear_OctoberSales).toFixed(1) +'</td><td>' + parseFloat(rowData.thisYear_NovemberSales).toFixed(1) +'</td><td>' + parseFloat(rowData.thisYear_DecemberSales).toFixed(1) +'</td><td>' + parseFloat(rowData.thisYear_TotalSales).toFixed(1) +'</td><td></td></tr>'+ 
            '</tbody>' +
            
          '</table>' +
​
​
         // Budget table
         '<table id="salespersonBillTo_budgetRows_' + rowData.locationCode + '-' + rowData.customerNumber + '-' + rowData.productNumber + '" class="budgetDetailTable budgetDetailRow">' +
         '</table>' +
​
         '<div class="py-2"><button type="button" disabled id="BR_CBT_setBudgetWithSameValue_'+ rowData.locationCode + rowData.returnedSalespersonGroupNumber + rowData.customerNumber + rowData.productNumber + '" class="btn btn-secondary btn-xs" onclick="BR_CBT_showSetBudgetWithSameValueModal(\''+ rowData.locationCode +'\', \''+ rowData.returnedSalespersonGroupNumber +'\', \''+ rowData.customerNumber +'\', \''+ rowData.productNumber +'\' )">Enter same value for each month</button></div >' 
​
    );
​
    // Display it the child row
    row.child(salespersonBillTo_childTable3).show();
​
    //Set location select with array data found in HomePage.js and built in HomePage.js
    $("#BR_CBT_locationSelection_" + rowData.productNumber).html(locationSelectionArrayData);
​
   //Set current location code for updating existing location in Budget record (global variable found in HomePage.php)
     currentLocationCode = rowData.locationCode;
​
     //Set value of location select with current value.
     $("#BR_CBT_locationSelection_" + rowData.productNumber).val(rowData.locationCode);
​
   salespersonBillTo_editor = new $.fn.dataTable.Editor( {
​
        data: budgetDataSet,
              
        table: '#salespersonBillTo_budgetRows_' + rowData.locationCode + '-' + rowData.customerNumber + '-' + rowData.productNumber,
      
        formOptions: { inline: { onBlur: 'submit' } },
        fields: [
                        {
                        //  label: 'January Budget:',
                        name:  'BD$01', type:  "display"},
                        {name:  'BD$02' , type:  "display"},
                        {name:  'BD$03', type:  "display"},
                        {name:  'BD$04', type:  "display"},
                        {name:  'BD$05', type:  "display"},
                        {name:  'BD$06', type:  "display"},
                        {name:  'BD$07', type:  "display"},
                        {name:  'BD$08', type:  "display"},
                        {name:  'BD$09', type:  "display"},
                        {name:  'BD$10', type:  "display"},
                        {name:  'BD$11', type:  "display"},
                        {name:  'BD$12', type:  "display"},
                      ]
         } );
  
        // Set inline cell as selected to immediately start typing in new value          
         salespersonBillTo_editor.on('open', function () { 
            $('div.DTE input')[0].select();
        });
​
            
//  // Child row DataTable configuration, always passes the parent row's id to server
    row.child()
        .find('table.budgetDetailTable')
        .DataTable({
            createdRow: function ( row, data, index ) {
                  $('td', row).eq(1).attr('id', rowData.locationCode + '-' + rowData.customerNumber + '-' + rowData.productNumber + '_janBudget');
                  $('td', row).eq(2).attr('id', rowData.locationCode + '-' + rowData.customerNumber + '-' + rowData.productNumber + '_febBudget');
                  $('td', row).eq(3).attr('id', rowData.locationCode + '-' + rowData.customerNumber + '-' + rowData.productNumber + '_marBudget');
                  $('td', row).eq(4).attr('id', rowData.locationCode + '-' + rowData.customerNumber + '-' + rowData.productNumber + '_aprBudget');
                  $('td', row).eq(5).attr('id', rowData.locationCode + '-' + rowData.customerNumber + '-' + rowData.productNumber + '_mayBudget');
                  $('td', row).eq(6).attr('id', rowData.locationCode + '-' + rowData.customerNumber + '-' + rowData.productNumber + '_juneBudget');
                  $('td', row).eq(7).attr('id', rowData.locationCode + '-' + rowData.customerNumber + '-' + rowData.productNumber + '_julyBudget');
                  $('td', row).eq(8).attr('id', rowData.locationCode + '-' + rowData.customerNumber + '-' + rowData.productNumber + '_augBudget');
                  $('td', row).eq(9).attr('id', rowData.locationCode + '-' + rowData.customerNumber + '-' + rowData.productNumber + '_septBudget');
                  $('td', row).eq(10).attr('id', rowData.locationCode + '-' + rowData.customerNumber + '-' + rowData.productNumber + '_octBudget');
                  $('td', row).eq(11).attr('id', rowData.locationCode + '-' + rowData.customerNumber + '-' + rowData.productNumber + '_novBudget');
                  $('td', row).eq(12).attr('id', rowData.locationCode + '-' + rowData.customerNumber + '-' + rowData.productNumber + '_decBudget');
               },
                
               dom: 't',
data: budgetDataSet,
                 autoWidth: false,
                 serverSide: true,
                 order: [ 1, 'asc' ],
             keys: {
                    columns: ':not(:first-child, .markCompleteButton)',
                    keys: [ 9 ],
                    editor: salespersonBillTo_editor,
                    editOnFocus: true
             },
               columns: [
                           {
                               data: null,
                               searchable: false,
                               orderable: false,
                               className: 'budgetRowTitle',
                               render: function ( data, type, row ) {
                                    return '<td><b>Next Year Budget</b></td>';
                                 }
                            },  
​
                             { data: 'BD$01' },
                             { data: 'BD$02' },
                             { data: 'BD$03' },
                             { data: 'BD$04' },
                             { data: 'BD$05' },
                             { data: 'BD$06' },
                             { data: 'BD$07' },
                             { data: 'BD$08' },
                             { data: 'BD$09' },
                             { data: 'BD$10' },
                             { data: 'BD$11' },
                             { data: 'BD$12' },
//                           { data: 'BD$01', "width": "89.24px"},
//                           { data: 'BD$02', "width": "90.44px"  },
//                           { data: 'BD$03', "width": "86.84px"  },
//                           { data: 'BD$04', "width": "85.04px"  },
//                           { data: 'BD$05', "width": "84.13px"  },
//                           { data: 'BD$06', "width": "85.19px"  },
//                           { data: 'BD$07', "width": "84.28px"  },
//                           { data: 'BD$08', "width": "88.19px"  },
//                           { data: 'BD$09', "width": "92.85px"  },
//                           { data: 'BD$10', "width": "89.24px"  },
//                           { data: 'BD$11', "width": "92.1px"  },
//                           { data: 'BD$12', "width": "91.95px"  },
                       
                           {
                               data: null,
                               className: 'totalBudgetTD',
                               render: function(data, type, full, row ) {
​
                                 var sum = 0;
                                 for (var i=1 ; i<13 ; i++) {
                                   sum += parseFloat(full['BD$' + (i<10 ? '0' : '') + i]);
                                   sum = Math.round(sum * 10) / 10;
                                 }
                               
                                   return '<span id="'+rowData.locationCode+'-'+rowData.customerNumber+'-'+rowData.productNumber+'_salespersonBillTo_totalBudgetSpan">'+sum+'</span>';
                               }
                           },
​
                             // ** Mark Completed Button
                           {
                               data: null,
                               searchable: false,
                               orderable: false,
                               className: 'markCompleteButton',
                               render: function ( data, type, full, meta ) {
                                   
                                    if( full.SYNCFL == 'N'){ 
​
                                          return '<button type="button" id="BR_CBT_markBudgetRecordCompletedButon_'+ full.PKLOC + full.PKGRP + full.PKCUST + full.PKPROD +'"class="btn btn-primary btn-xs" onclick="BR_CBT_showMarkBudgetRecordCompletedModal(\''+ full.PKLOC +'\', \''+ full.PKGRP +'\', \''+ full.PKCUST +'\', \''+ full.PKPROD +'\' )">Mark Complete</button>';
                                    }else{
                                           return '<button type="button" id="BR_CBT_markBudgetRecordCompletedButon_'+ full.PKLOC + full.PKGRP + full.PKCUST + full.PKPROD +'"class="unstyled-button" )">Mark Complete</button>';
                                    }
                                }
                            },  
               ],                                                                                                              
         
               columnDefs: [ 
                  { targets: [ 1 ], width: '89.24px', },
                  { targets: [ 2 ], width: '90.44px', },
                  { targets: [ 3 ], width: '86.84px', },
                  { targets: [ 4 ], width: '85.04px', },
                  { targets: [ 5 ], width: '84.13px', },
                  { targets: [ 6 ], width: '85.19px', },     
                  { targets: [ 7 ], width: '84.28px', },
                  { targets: [ 8 ], width: '88.19px', },
                  { targets: [ 9 ], width: '92.85px', },
                  { targets: [ 10 ], width: '89.24px', },
                  { targets: [ 11 ], width: '92.1px', },
                  { targets: [ 12 ], width: '91.95px', },
                //  { targets: [ 13 ], width: '96.95px', },
                 //  { targets: "_all", width: '2px'},
​
                                { targets: "_all", orderable: false}
                            ],
               
               select: {
                   style:    'os',
                   selector: 'td:first-child'
               },
        });
}
function destroyChild(row) {
    // Remove and destroy the DataTable in the child row
    var table = $('salespersonBillTo', row.child());
    table.detach();
    table.DataTable().destroy();
​
    // And then hide the row
    row.child.hide();
}
​
$(document).ready(function () {
    //**************************************************************************
    //  Main table (Salesperson)
    //**************************************************************************
    var parentTable = $('#salespersonBillTo').DataTable({
        //Store budget status total number (used to reset button badge totals when budget is marked complteted)
        rowCallback: function (row, data, index) {
            salespersonRowBudgetCounts.push({
                id: data.returnedSalespersonGroupNumber,
                open: data.openBudget,
                closed: data.completedBudget,
            });
        },
​
        // dom: 'ft',
        language: { search: 'Table Search: ' },
        dom: 't',
        data:salespersonDataSet,
        pageLength: 100,
        columns: [
            {
                className: 'BR_CBT_detail-level-control_1 child-control',
                orderable: false,
                data: null,
                defaultContent: '',
            },
            { data: 'salespersonName', orderable: false },
            {
                data: null,
                searchable: false,
                orderable: false,
                render: function (data, type, row) {
                    if (row.openBudget !== 0) {
                        return (
                            '<td><button id="BR_CBT_SalespersonOpenBudgetButton">Open ' +
                            row.openBudget +
                            '</button></td>'
                        );
                    } else {
                        return '<td><button id="budgetCompletedBadge">Budget Completed</button></td>';
                    }
                },
            },
            {
                data: null,
                searchable: false,
                orderable: false,
                render: function (data, type, row) {
                    return (
                        '<td><button id="BR_CBT_SalespersonCompletedBudgetButton">Completed ' +
                        row.completedBudget +
                        '</button></td>'
                    );
                },
            },
            {
                data: null,
                searchable: false,
                orderable: false,
                render: function (data, type, row) {
                    return (
                        '<td><button id="BR_CBT_SalespersonTotalBudgetButton">Total ' +
                        row.totalBudget +
                        '</button></td>'
                    );
                },
            },
            {
                data: 'returnedSalespersonGroupNumber',
                visible: false,
                orderable: false,
            },
        ],
​
        // Set rows IDs
        rowId: function (a) {
            return 'salespersonBillTo_' + a.returnedSalespersonGroupNumber;
        },
​
        columnDefs: [
            { targets: [1], className: 'level-1-control-row-format-1' },
            { targets: [2], className: 'level-1-control-row-format-2' },
            { targets: [3], className: 'level-1-control-row-format-3' },
            { targets: [4], className: 'level-1-control-row-format-4' },
        ],
    });
​
    // Add event listener for opening and closing details
    $('#salespersonBillTo tbody').on(
        'click',
        'td.BR_CBT_detail-level-control_1',
        function (e, d) {
            var tr = $(this).closest('tr');
            var row = parentTable.row(tr);
​
            if (row.child.isShown()) {
                // This row is already open - close it
                destroyChild(row);
                tr.removeClass('shown');
            } else {
                // Open this row
                createChild_1(row, d && d.showChildren ? true : false);
                tr.addClass('shown');
            }
        }
    );
​
    $('#show').on('click', function () {
        showAll(true);
    });
​
    $('#hide').on('click', function () {
        showAll(false);
    });
});
2 warnings
Line 134: Bad line breaking before '?'.
Line 254: Bad line breaking before '?'.
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers