数据表隐藏/显示列

Question

I am using data-tables for some beautiful features,here i am using data-tables to fix columns of my table

Table structure

• I am making my table with JSON data which is pure dynamic using Java-Script
• Above my table i have a drop-down field which user selects then clicks go and i am showing only that columns which user is selecting
• when user selects 1 or two columns then columns of tbody and thead are breaking
• When i am removing fixedColumn then it is working fine but i need to implement fixedColumn
• The columns i have fixed are also visible twice when i selects dropdowns and press go

Working Code

 function format(number, decimals = 2, locale = 'en-in') { const fixed = parseInt(number).toFixed(decimals); const [int, dec] = fixed.split('.') const intFormatted = (+int).toLocaleString(locale) return intFormatted + (dec ? '.' + dec : ''); } var data = [{ "billdate": "2018-08-04", "outlet": "JAYANAGAR", "gross": 490465, "discount": 839, "GST": 28465, "amount": 518212 }, { "billdate": "2018-08-04", "outlet": "MALLESHWARAM", "gross": 99212, "discount": 0, "GST": 5567, "amount": 104801 }, { "billdate": "2018-08-04", "outlet": "KOLAR", "gross": 131349, "discount": 0, "GST": 6676, "amount": 138151 }, { "billdate": "2018-08-05", "outlet": "JAYANAGAR", "gross": 594466, "discount": 591, "GST": 34374, "amount": 628358 }, { "billdate": "2018-08-05", "outlet": "MALLESHWARAM", "gross": 109029, "discount": 0, "GST": 6062, "amount": 115113 }, { "billdate": "2018-08-05", "outlet": "KOLAR", "gross": 127449, "discount": 0, "GST": 6511, "amount": 134107 }, { "billdate": "2018-08-06", "outlet": "JAYANAGAR", "gross": 167811, "discount": 0, "GST": 9968, "amount": 177866 }, { "billdate": "2018-08-06", "outlet": "KOLAR", "gross": 62796, "discount": 0, "GST": 3257, "amount": 66095 }, { "billdate": "2018-08-07", "outlet": "JAYANAGAR", "gross": 267398, "discount": 268, "GST": 15898, "amount": 283124 }, { "billdate": "2018-08-07", "outlet": "MALLESHWARAM", "gross": 55381, "discount": 0, "GST": 3383, "amount": 58789 }, { "billdate": "2018-08-07", "outlet": "KOLAR", "gross": 64586, "discount": 6, "GST": 3285, "amount": 67886 }, { "billdate": "2018-08-08", "outlet": "JAYANAGAR", "gross": 295544, "discount": 246, "GST": 17716, "amount": 313128 }, { "billdate": "2018-08-08", "outlet": "MALLESHWARAM", "gross": 56453, "discount": 0, "GST": 3462, "amount": 59939 }, { "billdate": "2018-08-08", "outlet": "KOLAR", "gross": 65159, "discount": 0, "GST": 3381, "amount": 68558 }, { "billdate": "2018-08-09", "outlet": "JAYANAGAR", "gross": 303778, "discount": 201, "GST": 18115, "amount": 321797 }, { "billdate": "2018-08-09", "outlet": "MALLESHWARAM", "gross": 60795, "discount": 0, "GST": 3620, "amount": 64431 }, { "billdate": "2018-08-09", "outlet": "KOLAR", "gross": 54495, "discount": 0, "GST": 2841, "amount": 57352 }, { "billdate": "2018-08-10", "outlet": "JAYANAGAR", "gross": 305223, "discount": 53, "GST": 18287, "amount": 323556 }, { "billdate": "2018-08-10", "outlet": "MALLESHWARAM", "gross": 55584, "discount": 36, "GST": 3207, "amount": 58772 }, { "billdate": "2018-08-10", "outlet": "KOLAR", "gross": 41584, "discount": 0, "GST": 2128, "amount": 43722 }, { "billdate": "2018-08-11", "outlet": "JAYANAGAR", "gross": 439024, "discount": 177, "GST": 25148, "amount": 464127 }, { "billdate": "2018-08-11", "outlet": "MALLESHWARAM", "gross": 88009, "discount": 0, "GST": 5090, "amount": 93110 }, { "billdate": "2018-08-11", "outlet": "KOLAR", "gross": 59188, "discount": 0, "GST": 3156, "amount": 62213 }, { "billdate": "2018-08-12", "outlet": "JAYANAGAR", "gross": 593776, "discount": 809, "GST": 33689, "amount": 626772 }, { "billdate": "2018-08-12", "outlet": "MALLESHWARAM", "gross": 119723, "discount": 45, "GST": 7245, "amount": 126933 }, { "billdate": "2018-08-12", "outlet": "KOLAR", "gross": 59926, "discount": 0, "GST": 3170, "amount": 63119 }, { "billdate": "2018-08-13", "outlet": "JAYANAGAR", "gross": 157580, "discount": 340, "GST": 10053, "amount": 167391 }, { "billdate": "2018-08-13", "outlet": "KOLAR", "gross": 25730, "discount": 0, "GST": 1368, "amount": 27110 }, { "billdate": "2018-08-14", "outlet": "JAYANAGAR", "gross": 260106, "discount": 298, "GST": 15181, "amount": 275115 }, { "billdate": "2018-08-14", "outlet": "MALLESHWARAM", "gross": 55145, "discount": 19, "GST": 3480, "amount": 58633 }, { "billdate": "2018-08-14", "outlet": "KOLAR", "gross": 36664, "discount": 0, "GST": 1916, "amount": 37920 }, { "billdate": "2018-08-15", "outlet": "JAYANAGAR", "gross": 478163, "discount": 688, "GST": 27138, "amount": 504753 }, { "billdate": "2018-08-15", "outlet": "MALLESHWARAM", "gross": 98179, "discount": 0, "GST": 5661, "amount": 103855 }, { "billdate": "2018-08-15", "outlet": "KOLAR", "gross": 98536, "discount": 0, "GST": 4964, "amount": 103519 }, { "billdate": "2018-08-16", "outlet": "JAYANAGAR", "gross": 277139, "discount": 594, "GST": 16406, "amount": 293049 }, { "billdate": "2018-08-16", "outlet": "MALLESHWARAM", "gross": 52828, "discount": 0, "GST": 3227, "amount": 56071 }, { "billdate": "2018-08-16", "outlet": "KOLAR", "gross": 53312, "discount": 0, "GST": 2730, "amount": 56061 }, { "billdate": "2018-08-17", "outlet": "JAYANAGAR", "gross": 329539, "discount": 91, "GST": 19882, "amount": 349456 }, { "billdate": "2018-08-17", "outlet": "MALLESHWARAM", "gross": 62946, "discount": 0, "GST": 3659, "amount": 66624 }, { "billdate": "2018-08-17", "outlet": "KOLAR", "gross": 69126, "discount": 0, "GST": 3501, "amount": 72643 }, { "billdate": "2018-08-18", "outlet": "JAYANAGAR", "gross": 443783, "discount": 724, "GST": 25712, "amount": 468771 }, { "billdate": "2018-08-18", "outlet": "MALLESHWARAM", "gross": 95622, "discount": 0, "GST": 5507, "amount": 101151 }, { "billdate": "2018-08-18", "outlet": "KOLAR", "gross": 107235, "discount": 0, "GST": 5683, "amount": 112950 }, { "billdate": "2018-08-19", "outlet": "JAYANAGAR", "gross": 517922, "discount": 181, "GST": 28972, "amount": 546845 }, { "billdate": "2018-08-19", "outlet": "MALLESHWARAM", "gross": 96821, "discount": 0, "GST": 5490, "amount": 102334 }, { "billdate": "2018-08-19", "outlet": "KOLAR", "gross": 94158, "discount": 0, "GST": 4909, "amount": 99089 }, { "billdate": "2018-08-20", "outlet": "JAYANAGAR", "gross": 156224, "discount": 35, "GST": 9423, "amount": 165700 }, { "billdate": "2018-08-20", "outlet": "KOLAR", "gross": 45547, "discount": 0, "GST": 2347, "amount": 47905 }, { "billdate": "2018-08-21", "outlet": "JAYANAGAR", "gross": 289268, "discount": 214, "GST": 17613, "amount": 306776 }, { "billdate": "2018-08-21", "outlet": "MALLESHWARAM", "gross": 57684, "discount": 0, "GST": 3374, "amount": 61080 }, { "billdate": "2018-08-21", "outlet": "KOLAR", "gross": 57725, "discount": 0, "GST": 2950, "amount": 60682 }, { "billdate": "2018-08-22", "outlet": "JAYANAGAR", "gross": 395657, "discount": 159, "GST": 22808, "amount": 418418 }, { "billdate": "2018-08-22", "outlet": "MALLESHWARAM", "gross": 82752, "discount": 0, "GST": 4618, "amount": 87390 }, { "billdate": "2018-08-22", "outlet": "KOLAR", "gross": 74048, "discount": 0, "GST": 3953, "amount": 77922 }, { "billdate": "2018-08-23", "outlet": "JAYANAGAR", "gross": 302731, "discount": 1124, "GST": 17774, "amount": 319472 }, { "billdate": "2018-08-23", "outlet": "MALLESHWARAM", "gross": 63555, "discount": 0, "GST": 3565, "amount": 67142 }, { "billdate": "2018-08-23", "outlet": "KOLAR", "gross": 53637, "discount": 0, "GST": 2860, "amount": 56506 }, { "billdate": "2018-08-24", "outlet": "JAYANAGAR", "gross": 284354, "discount": 774, "GST": 16423, "amount": 300111 }, { "billdate": "2018-08-24", "outlet": "MALLESHWARAM", "gross": 48130, "discount": 0, "GST": 2857, "amount": 50997 }, { "billdate": "2018-08-24", "outlet": "KOLAR", "gross": 55040, "discount": 0, "GST": 2871, "amount": 57926 }] let formatData = function(data) { let billdates = []; let outlets = []; data.forEach(element => { if (billdates.indexOf(element.billdate) == -1) { billdates.push(element.billdate); } if (outlets.indexOf(element.outlet) == -1) { outlets.push(element.outlet); } }); return { data: data, billdates: billdates, outlets: outlets, }; }; let renderTable = function(data) { billdates = data.billdates; outlets = data.outlets; data = data.data; let tbl = document.getElementById("dailySales"); let table = document.createElement("table"); let thead = document.createElement("thead"); let headerRow = document.createElement("tr"); let th = document.createElement("th"); th.innerHTML = "BillDate"; th.classList.add("text-center"); headerRow.appendChild(th); let grandTotal = 0; let grandGross = 0; let grandDiscount = 0; let grandGst = 0; let outletWiseTotal = {}; let outletWiseGross = {}; let outletWiseDiscount = {}; let outletWiseGst = {}; th = document.createElement("th"); th.colSpan = 4; th.innerHTML = "Total"; th.classList.add("text-center"); headerRow.appendChild(th); outlets.forEach(element => { th = document.createElement("th"); th.colSpan = 4; th.innerHTML = element; th.classList.add("text-center"); headerRow.appendChild(th); outletWiseTotal[element] = 0; outletWiseGross[element] = 0; outletWiseDiscount[element] = 0; outletWiseGst[element] = 0; data.forEach(el => { if (el.outlet == element) { outletWiseTotal[element] += parseInt(el.amount); outletWiseGross[element] += parseInt(el.gross); outletWiseDiscount[element] += parseInt(el.discount); outletWiseGst[element] += parseInt(el.GST); } }); grandTotal += outletWiseTotal[element]; //calculating totals for Total column grandGross += outletWiseGross[element]; grandDiscount += outletWiseDiscount[element]; grandGst += outletWiseGst[element]; }); thead.appendChild(headerRow); headerRow = document.createElement("tr"); th = document.createElement("th"); th.innerHTML = ""; headerRow.appendChild(th); for (i = 0; i < outlets.length + 1; i++) { th = document.createElement("th"); th.innerHTML = "Discount"; th.classList.add("text-center"); th.classList.add("discount"); headerRow.appendChild(th); th = document.createElement("th"); th.innerHTML = "GST"; th.classList.add("text-center"); th.classList.add("gst"); headerRow.appendChild(th); th = document.createElement("th"); th.innerHTML = "Net_Amount"; th.classList.add("text-center"); th.classList.add("netAmount"); //adding class to column Net Amount headerRow.appendChild(th); th = document.createElement("th"); th.innerHTML = "Gross_Amount"; th.classList.add("text-center"); th.classList.add("grossAmount"); //adding class to column Gross Amount headerRow.appendChild(th); } headerRow.insertBefore(th, headerRow.children[1]); thead.appendChild(headerRow); table.appendChild(thead); headerRow = document.createElement("tr"); td = document.createElement("th"); td.innerHTML = "Total"; td.classList.add("text-center"); headerRow.appendChild(td); outlets.forEach(element => { // these are the table rows for each column td = document.createElement("th"); td.innerHTML = outletWiseGross[element].toLocaleString('en-IN'); td.classList.add("text-right"); headerRow.appendChild(td); td = document.createElement("th"); td.innerHTML = outletWiseDiscount[element].toLocaleString('en-IN'); td.classList.add("text-right"); headerRow.appendChild(td); td = document.createElement("th"); td.innerHTML = outletWiseGst[element].toLocaleString('en-IN'); td.classList.add("text-right"); headerRow.appendChild(td); td = document.createElement("th"); td.innerHTML = outletWiseTotal[element].toLocaleString('en-IN'); td.classList.add("text-right"); headerRow.appendChild(td); }); td = document.createElement("th"); td.innerHTML = grandTotal.toLocaleString('en-IN'); td.classList.add("text-right"); headerRow.insertBefore(td, headerRow.children[1]); td = document.createElement("th"); td.innerHTML = grandGst.toLocaleString('en-IN'); td.classList.add("text-right"); headerRow.insertBefore(td, headerRow.children[1]); td = document.createElement("th"); td.innerHTML = grandDiscount.toLocaleString('en-IN'); td.classList.add("text-right"); headerRow.insertBefore(td, headerRow.children[1]); td = document.createElement("th"); td.innerHTML = grandGross.toLocaleString('en-IN'); td.classList.add("text-right"); headerRow.insertBefore(td, headerRow.children[1]); thead.appendChild(headerRow); table.appendChild(thead); let tbody = document.createElement("tbody"); billdates.forEach(element => { let row = document.createElement("tr"); td = document.createElement("td"); td.innerHTML = element; row.appendChild(td); let total = 0; let totalGross = 0; let totalDiscount = 0; let totalGST = 0; outlets.forEach(outlet => { let ta = 0; let tg = 0; let tdi = 0; let tgst = 0; data.forEach(d => { if (d.billdate == element && d.outlet == outlet) { total += parseInt(d.amount); totalGross += parseInt(d.gross); totalDiscount += parseInt(d.discount); totalGST += parseInt(d.GST); ta = d.amount; tg = d.gross; tdi = d.discount; tgst = d.GST; } }); td = document.createElement("td"); td.innerHTML = tg.toLocaleString('en-IN'); td.classList.add("text-right"); row.appendChild(td); td = document.createElement("td"); td.innerHTML = tdi.toLocaleString('en-IN'); td.classList.add("text-right"); row.appendChild(td); td = document.createElement("td"); td.innerHTML = tgst.toLocaleString('en-IN'); td.classList.add("text-right"); row.appendChild(td); td = document.createElement("td"); td.innerHTML = ta.toLocaleString('en-IN'); td.classList.add("text-right"); row.appendChild(td); }); td = document.createElement("td"); td.innerHTML = total.toLocaleString('en-IN'); td.classList.add("text-right"); row.insertBefore(td, row.children[1]); td = document.createElement("td"); td.innerHTML = totalGST.toLocaleString('en-IN'); td.classList.add("text-right"); row.insertBefore(td, row.children[1]); td = document.createElement("td"); td.innerHTML = totalDiscount.toLocaleString('en-IN'); td.classList.add("text-right"); row.insertBefore(td, row.children[1]); td = document.createElement("td"); td.innerHTML = totalGross.toLocaleString('en-IN'); td.classList.add("text-right"); row.insertBefore(td, row.children[1]); tbody.appendChild(row); }); table.appendChild(tbody); tbl.innerHTML = ""; tbl.appendChild(table); table.classList.add("table"); table.classList.add("table-striped"); table.classList.add("table-bordered"); table.classList.add("table-hover"); var test = $(table).DataTable({ "scrollX": true, "scrollY": "100px", "paging": false, "info": false, "ordering": false, "searching": false, fixedColumns: { leftColumns: 5 } }); $(".showHideColumn").on('click', function() { var tableColumn = test.column($(this).attr('data-columnindex')); tableColumn.visible(!tableColumn.visible()); }) } let formatedData = formatData(data); renderTable(formatedData); 

 div.dataTables_wrapper { width: 100%; margin: 0 auto; } table.table-bordered>thead>tr>th { border: 1px solid white; white-space: nowrap; border-collapse: collapse; font-family: Verdana; font-size: 9pt; padding: 5px 5px 5px 5px; background-color: black; font-weight: normal; text-align: center; color: white; } table.table-bordered>tbody>tr>td { border: 1px solid rgba(29, 150, 178, 1); white-space: nowrap; border-collapse: collapse; font-family: Verdana; font-size: 8pt; background-color: gray; padding: 5px 5px 5px 5px; color: black; } .showHideColumn { cursor: pointer; color: blue; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script> <script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script> <script src="//cdn.datatables.net/fixedcolumns/3.2.6/js/dataTables.fixedColumns.min.js"></script> <link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css"> <link rel="stylesheet" href="//cdn.datatables.net/1.10.18/css/dataTables.bootstrap4.min.css"> <link rel="stylesheet" href="//cdn.datatables.net/fixedcolumns/3.2.5/css/fixedColumns.bootstrap4.min.css"> <a class="showHideColumn" data-columnindex="0">Gross Amount</a> - <a class="showHideColumn" data-columnindex="1">Discount</a> - <a class="showHideColumn" data-columnindex="2">Gst</a> - <a class="showHideColumn" data-columnindex="3">Net Amount</a> <br> <table id="dailySales" class="table table-responsive"></table> 

Edit/Update

I am now doing it with data-tables but,as using data-columnindex but its only hiding the first column data as i ahve gros amount , Discount , Gst , Net Amount these are common in each column except billdate , so what i am trying to do is when i click on Net Amount all net amount columns should hide

I think this can be done using data-tables without changing my java-script
Anyone out here please help me out

Answer 1

I think you need to hide column value. its two liner code. you can do it in two step.

1- Declare table variable globally.

var table;

now assign datatable object to it.

table =$(table).DataTable({ //adding datatabl functionality 
    "scrollX": true,
    "scrollY": $bodyHeight + "px",
    "scrollCollapse": true,
    "paging": false,
    "info": false,
    "ordering": false,
    "searching": false,
    fixedColumns: {
      leftColumns: 1
    }
  });

Now you have table object you can play with it.

$("#save").on("click", function() {

   // Get the column API object
    var column = table.column( $(this).attr('data-column') );
    // Toggle the visibility
    column.visible( ! column.visible() );
});

for more reference see here .