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>
​
    <link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
    <script src="https://nightly.datatables.net/js/jquery.dataTables.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',
    },
    {
        returnedSalespersonGroupNumber: '0',
        salespersonName: 'HOUSE ACCOUNTS',
        totalBudget: '10',
        openBudget: '0',
        completedBudget: '10',
    },
    {
        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',
    },
    {
        customer: '12555 - Test Customer',
        customerNumber: '12555',
        openBudget: '0',
        completedBudget: '1',
        totalBudget: '1',
        returnedSalespersonGroupNumber: '0',
    },
];
​
var productsDataSet = [
    {
        status: 'Completed',
        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',
    },
    {
        status: 'Completed',
        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',
    },
    {
        status: 'Completed',
        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 showAll(flag) {
    var parentTable = $('#salespersonBillTo').DataTable();
​
    parentTable.rows().every(function () {
        // If need to show and not shown yet, or
        // If need to hide and is shown,
        // Then click the control icon, which toggles the row
        if ((flag && ! this.child.isShown()) || (! flag && this.child.isShown())) {
            $('td.child-control', this.node()).trigger('click', {
                showChildren: true
            });
        }
    });
}
​
function createChild_1(row, showChildren) {
    //parent table data
    var rowData = row.data();
​
    // This is the table we'll convert into a DataTable
    var salespersonBillTo_childTable1 = $(
        '<table 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({
            //Store budget status total number (used to reset button badge totals when budget is marked complteted)
            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 child-control',
                    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 id="BR_CBT_customerOpenBudgetButton">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_customerCompletedBudgetButton">Completed ' +
                            row.completedBudget +
                            '</button></td>'
                        );
                    },
                },
​
                {
                    data: null,
                    searchable: false,
                    orderable: false,
                    render: function (data, type, row) {
                        return (
                            '<td><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,
            initComplete: function () {
                let api = this.api();
​
                if (showChildren) {
                    api.rows().every(function () {
                        $('td.child-control', this.node()).trigger('click', {
                            api: api
                        });
                    });
                }
            }
        });
}
​
​
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 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: 100,
            columns: [
                {
                    className: 'BR_CBT_detail-level-control_3',
                    orderable: false,
                    data: null,
                    defaultContent: '',
                },
                { data: 'status', id: 'status' },
                { data: 'productNumber' },
                { data: 'productDescription' },
                { data: 'locationCode' },
​
                //Columns used for budget row data information
                { 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 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-3 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>' + 
​
         // Last Year Sales table
          '<table id="salespersonBillTo_salesYearTable" class="center">' +
​
            '<div class="col-5 poundsExpression text-primary" id="poundsExpression"><p>All pounds are expressed in thousands</p></div>' +
            
            '<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" 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',
                        },
                        {name:  'BD$02'},
                        {name:  'BD$03'},
                        {name:  'BD$04'},
                        {name:  'BD$05'},
                        {name:  'BD$06'},
                        {name:  'BD$07'},
                        {name:  'BD$08'},
                        {name:  'BD$09'},
                        {name:  'BD$10'},
                        {name:  'BD$11'},
                        {name:  'BD$12'},
                      ]
         } );
  
        // 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
//  salespersonBillTo_childTable3
//      .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',
//             ajax: {
//                      type: 'POST',
//                  url: 'BudgetReporting/ssp_BudgetData.php',
//                  data: { locationCode:rowData.locationCode,  
//                              salespersonGroupingNumber: rowData.returnedSalespersonGroupNumber,
//                              customerNumber: rowData.customerNumber,
//                              productNumber: rowData.productNumber
//                       },
//                  },
//               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', "width": "7%" },
//                           { data: 'BD$02', "width": "7%" },
//                         { data: 'BD$03', "width": "7%" },
//                           { data: 'BD$04', "width": "7%" },
//                         { data: 'BD$05', "width": "7%" },
//                           { data: 'BD$06', "width": "7%" },
//                         { data: 'BD$07', "width": "7%" },
//                           { data: 'BD$08', "width": "7%" },
//                         { data: 'BD$09', "width": "7%" },
//                           { data: 'BD$10', "width": "7%" },
//                         { data: 'BD$11', "width": "7%" },
//                         { data: 'BD$12', "width": "7%" },
                           
//                         {
//                             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="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 Completed</button>';
//                                  }else{
//                                         return '<button type="button" id="BR_CBT_markBudgetRecordCompletedButon_'+ full.PKLOC + full.PKGRP + full.PKCUST + full.PKPROD +'"class="unstyled-button" )">Mark Completed</button>';
//                                  }
//                              }
//                          },  
//             ],                                                                                                              
         
//             columnDefs: [ 
//                              { targets: "_all" , className: "text-center" },
//                          //{ targets: 13, className: "text-center" },
//                              { 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 = $('table', 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);
    });
});
5 warnings
Line 254: Bad line breaking before '?'.
Line 299: Use '!==' to compare with '0'.
Line 351: 'let' is available in ES6 (use esnext option) or Mozilla JS extensions (use moz).
Line 388: Bad line breaking before '?'.
Line 776: Use '!==' to compare with '0'.
Output 300px

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

Dismiss x
public
Bin info
anonymouspro
0viewers