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;
}
​
#budgetCompletedBadge {
    border-radius: 0.25rem;
    background-color: transparent;
    border: none;
    color: #28a745;
    font-weight: bold;
    width: 138px;
    height: 25px;
}
​
/**********************************************/
/* 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,
#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_1,
#salespersonBillTo tr.shown td.BR_CBT_detail-level-control_2 {
    background: url('https://www.datatables.net/examples/resources/details_close.png'') no-repeat center ;
    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 center ;
    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 center;
    transition: .5s;
    height: 30px;
    width: 47px
    
}
​
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 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
​
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
    salespersonBillTo_childTable2
        .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 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);
    });
});
​
4 warnings
Line 223: Bad line breaking before '?'.
Line 268: Use '!==' to compare with '0'.
Line 320: 'let' is available in ES6 (use esnext option) or Mozilla JS extensions (use moz).
Line 478: 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