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 {
    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 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"}];
​
var customersDataSet = [{"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"}];
 
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 showAllFlag = null;
​
function showAll( flag ) {
  showAllFlag = flag;
  $("#salespersonBillTo").DataTable().draw(false);
}
        
function createChild_1(row) {
    //parent 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();
 
    //table.parent().css('background', '#90b2e8');
​
    // Child row DataTable configuration, always passes the parent row's id to server
    var customerTable = salespersonBillTo_childTable1 = $('#salespersonBillTo_customerRows_' + rowData.returnedSalespersonGroupNumber)
      .on('draw.dt', function (e) {
         e.stopPropagation();
      })
    .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});
            //  console.log(customerRowBudgetCounts);
             },
                     
        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 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,
    });
  
  
    // Add event listener for opening and closing details
     $('#salespersonBillTo').on("click", "td.BR_CBT_detail-level-control_2", function(e) {
        e.stopPropagation();  // Make sure the Parent event doesn't execute
      
        var tr = $(this).closest("tr");
        var row = customerTable.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");
        }
    });
​
}
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_productRows_' + rowData.customerNumber)
     .on('draw.dt', function (e) {
        e.stopPropagation();
     })
    .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',
                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() {
      showAllFlag = null;
        var tr = $(this).closest("tr");
        var row = parentTable.row(tr);
        
        var BR_CBT_rowData1 = row.data(); 
​
        if (row.child.isShown()) {
            // This row is already open - close it
            destroyChild(row);
            tr.removeClass("shown");
        } else {
            // Open this row
            createChild_1(row);
            tr.addClass("shown");
        }
    });
  
          
  parentTable.on('draw', function () {
​
    if ( showAllFlag === null ) {
      return;
    }
    if ( showAllFlag ) {
      var table = $("#salespersonBillTo").DataTable();
      table.rows( {page: 'current'} ).every(function ( rowIdx, tableLoop, rowLoop ) {
​
        createChild_1(this);
        $(this.node()).addClass("shown");
​
        // Find the child detail Datatable
        var childTable = $(this.node()).next('tr').find('table').DataTable();
​
        // Loop through the child Datatable to open child rows
        childTable.rows().every(function ( rowIdx, tableLoop, rowLoop ) {
          createChild_2(this);
          $(this.node()).addClass("shown");
        });
​
  
      } );
    } else {
      var table = $("#salespersonBillTo").DataTable();
      table.rows( {page: 'current'} ).every(function ( rowIdx, tableLoop, rowLoop ) {
​
        if (this.child.isShown()) {
​
          // Find the child detail Datatable
          var childTable = $(this.node()).next('tr').find('table').DataTable();
​
          // Loop through the child Datatable to open child rows
          childTable.rows().every(function ( rowIdx, tableLoop, rowLoop ) {
            destroyChild(this);
            $(this.node()).removeClass("shown");
          });
​
          // Then destroy the first level child 
          destroyChild(this);
          $(this.node()).removeClass("shown");
​
        }
      } );
      
    }
  });
  
  $('#show').on('click', function () {
    showAll(true);
  });
​
  $('#hide').on('click', function () {
    showAll(false);
  });
​
});
4 warnings
Line 33: You might be leaking a variable (salespersonBillTo_childTable1) here.
Line 65: Use '!==' to compare with '0'.
Line 281: Use '!==' to compare with '0'.
Line 369: 'table' is already defined.
Output 300px

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

Dismiss x
public
Bin info
anonymouspro
0viewers