Dev Faq
9
votes

Comment faire défiler verticalement le corps d'un tableau HTML

Ce que j'ai fait 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<h1>Testing</h1>
<div align="center" class="table table-responsive">
  <table id="dailySales">
  </table>
</div>
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: rgba(29, 150, 178, 1);
  font-weight: normal;
  text-align: center;
  color: white;
}


/* background-color: #00998C */

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: rgba(84, 83, 72, .1);
  padding: 5px 5px 5px 5px;
}
var data = [{
    "billdate": "2018-08-01",
    "outlet": "JAYANAGAR",
    "gross": 274659,
    "discount": 297,
    "GST": 16479,
    "amount": 290954
  },
  {
    "billdate": "2018-08-01",
    "outlet": "MALLESHWARAM",
    "gross": 55185,
    "discount": 0,
    "GST": 3074,
    "amount": 58281
  },
  {
    "billdate": "2018-08-01",
    "outlet": "KOLAR",
    "gross": 62513,
    "discount": 0,
    "GST": 3306,
    "amount": 65880
  },
  {
    "billdate": "2018-08-02",
    "outlet": "JAYANAGAR",
    "gross": 279509,
    "discount": 68,
    "GST": 16582,
    "amount": 296125
  },
  {
    "billdate": "2018-08-02",
    "outlet": "MALLESHWARAM",
    "gross": 53462,
    "discount": 0,
    "GST": 3064,
    "amount": 56545
  },
  {
    "billdate": "2018-08-02",
    "outlet": "KOLAR",
    "gross": 68651,
    "discount": 0,
    "GST": 3492,
    "amount": 72213
  },
  {
    "billdate": "2018-08-03",
    "outlet": "JAYANAGAR",
    "gross": 327097,
    "discount": 539,
    "GST": 19945,
    "amount": 346605
  },
  {
    "billdate": "2018-08-03",
    "outlet": "MALLESHWARAM",
    "gross": 59341,
    "discount": 105,
    "GST": 3370,
    "amount": 62459
  },
  {
    "billdate": "2018-08-03",
    "outlet": "KOLAR",
    "gross": 61953,
    "discount": 0,
    "GST": 3225,
    "amount": 65248
  },
  {
    "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": 109134,
    "discount": 0,
    "GST": 6067,
    "amount": 115223
  },
  {
    "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": 268298,
    "discount": 268,
    "GST": 15943,
    "amount": 284069
  },
  {
    "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];
    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");
    headerRow.appendChild(th);

    th = document.createElement("th");
    th.innerHTML = "GST";
    th.classList.add("text-center");
    headerRow.appendChild(th);

    th = document.createElement("th");
    th.innerHTML = "Net Amount";
    th.classList.add("text-center");
    headerRow.appendChild(th);

    th = document.createElement("th");
    th.innerHTML = "Gross Amount";
    th.classList.add("text-center");
    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 => {
    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);




    });
    /* console.log("row is : " , row.children ) */

    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");
}
let formatedData = formatData(data);
renderTable(formatedData);

Comme j'ai édité le code pour préciser ce que j'essaie d'accomplir, j'essaie de faire défiler mon corps.

Je suis ouvert à l'utilisation de toutes les ressources jQuery ou JavaScript peut corriger les en-têtes.

10 commentaires

jetez un œil à ce codepen.io/nirmalkc/pen/oswdB

@GaganDeep j'ai déjà essayé celui-ci, cela serre le corps, j'ai beaucoup de recherche sur Google, après cela, j'ai mis le message, ma table est dynamique, je ne peux pas donner de largeur car elle peut changer en fonction de l'utilisateur

@MunimMunna yup quelque chose comme ça mais l'en-tête devrait être corrigé

En-tête fixe avec les tables de données: défilement horizontal uniquement . défilement horizontal + vertical .

@MunimMunna hey yup vous avez raison, mais un problème est de savoir comment puis-je donner une hauteur dynamique, comme pour tout appareil, cela ne devrait prendre que la taille de l'écran

Vous pouvez définir la hauteur de manière dynamique en fonction de la hauteur de la fenêtre.

@MunimMunna mais le gros problème est que je ne suis pas autorisé à utiliser des tables de données :(

Comme je le sais, il n'y a pas de moyen unique de CSS, si vous n'utilisez pas de tables de données, vous devez en écrire un.

C'est déjà répondu ici - stackoverflow.com/questions/130564/... Vérifiez-le.

N'oubliez pas la question lorsque votre problème est résolu, vous devez suivre les réponses affichées.

6 Réponses :

0
votes

Utilisez DataTable js au lieu de cela, donc DataTable js donne plus de fonctionnalités de table

Voici l'exemple d'ajout de couleur DataTable 

$('#example').dataTable( {
    "createdRow": function( row, data, dataIndex){
        if(data[2] ==  `someVal`){
            $(row).addClass('redClass');
        }
    }
});

exemple d'url: cliquez ici Référence DataTable cliquez ici

1 commentaires

je ne suis pas autorisé à utiliser cela, c'est pourquoi essayer de faire uniquement avec css ... si vous pouvez m'aider ici, cela me sera utile s'il vous plaît

2
votes 

use just add one condition

<style>
.headerColor
{
color:red;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">

<div class="container">
  <table id="salesBreakupTable">
  </table>
</div>
var tableValue = [{
    "billdate": "2018-08-04",
    "SalesType": "Total",
    "JAYANAGAR": 518212,
    "MALLESHWARAM": 104801,
    "KOLAR": 138151
  },
  {
    "billdate": "",
    "SalesType": "cash",
    "JAYANAGAR": 508161,
    "MALLESHWARAM": 102675,
    "KOLAR": 138151
  },
  {
    "billdate": "",
    "SalesType": "creditcard",
    "JAYANAGAR": 0,
    "MALLESHWARAM": 0,
    "KOLAR": 0
  },
  {
    "billdate": "",
    "SalesType": "coupon",
    "JAYANAGAR": 0,
    "MALLESHWARAM": 0,
    "KOLAR": 0
  },
  {
    "billdate": "",
    "SalesType": "paytm",
    "JAYANAGAR": 0,
    "MALLESHWARAM": 0,
    "KOLAR": 0
  },
  {
    "billdate": "",
    "SalesType": "credit",
    "JAYANAGAR": 0,
    "MALLESHWARAM": 0,
    "KOLAR": 0
  },
  {
    "billdate": "",
    "SalesType": "swiggy",
    "JAYANAGAR": 10051,
    "MALLESHWARAM": 2126,
    "KOLAR": 0
  },
  {
    "billdate": "",
    "SalesType": "kb",
    "JAYANAGAR": 0,
    "MALLESHWARAM": 0,
    "KOLAR": 0
  },
  {
    "billdate": "",
    "SalesType": "bigbasket",
    "JAYANAGAR": 0,
    "MALLESHWARAM": 0,
    "KOLAR": 0
  },
  {
    "billdate": "",
    "SalesType": "zomato",
    "JAYANAGAR": 0,
    "MALLESHWARAM": 0,
    "KOLAR": 0
  },
  {
    "billdate": "2018-08-05",
    "SalesType": "Total",
    "JAYANAGAR": 628358,
    "MALLESHWARAM": 115223,
    "KOLAR": 134107
  },
  {
    "billdate": "",
    "SalesType": "cash",
    "JAYANAGAR": 608336,
    "MALLESHWARAM": 109013,
    "KOLAR": 134107
  },
  {
    "billdate": "",
    "SalesType": "creditcard",
    "JAYANAGAR": 0,
    "MALLESHWARAM": 0,
    "KOLAR": 0
  },
  {
    "billdate": "",
    "SalesType": "coupon",
    "JAYANAGAR": 0,
    "MALLESHWARAM": 0,
    "KOLAR": 0
  },
  {
    "billdate": "",
    "SalesType": "paytm",
    "JAYANAGAR": 0,
    "MALLESHWARAM": 0,
    "KOLAR": 0
  },
  {
    "billdate": "",
    "SalesType": "credit",
    "JAYANAGAR": 0,
    "MALLESHWARAM": 0,
    "KOLAR": 0
  },
  {
    "billdate": "",
    "SalesType": "swiggy",
    "JAYANAGAR": 20022,
    "MALLESHWARAM": 6210,
    "KOLAR": 0
  },
  {
    "billdate": "",
    "SalesType": "kb",
    "JAYANAGAR": 0,
    "MALLESHWARAM": 0,
    "KOLAR": 0
  },
  {
    "billdate": "",
    "SalesType": "bigbasket",
    "JAYANAGAR": 0,
    "MALLESHWARAM": 0,
    "KOLAR": 0
  },
  {
    "billdate": "",
    "SalesType": "zomato",
    "JAYANAGAR": 0,
    "MALLESHWARAM": 0,
    "KOLAR": 0
  }

]


function addTable(tableValue) {
  var col = Object.keys(tableValue[0]);
  var countNum = col.filter(i => !isNaN(i)).length;
  var num = col.splice(0, countNum);
  col = col.concat(num);
  var table = document.createElement("table");
  var tr = table.insertRow(-1); // TABLE ROW.
  for (var i = 0; i < col.length; i++) {
    var th = document.createElement("th"); // TABLE HEADER.
    th.innerHTML = col[i];  
    tr.appendChild(th);
    tr.classList.add("text-center");

  }
  for (var i = 0; i < tableValue.length; i++) { //table body i.e tbody
    tr = table.insertRow(-1);
    for (var j = 0; j < col.length; j++) {
      var tabCell = tr.insertCell(-1);
      var tabledata = tableValue[i][col[j]];
      if (tabledata && !isNaN(tabledata)) {
        tabledata = parseInt(tabledata).toLocaleString('en-in')
      }
if (tableValue[i]['billdate'] != "")
{
 tr.style.backgroundColor = "yellow"; 
}
      if (tableValue[i]['billdate'] === tableValue[i][col[j]]) { 
      

        tabCell.classList.add("headerColor"); 
       

      }

      tabCell.innerHTML = tabledata;

      if (j > 1)

        tabCell.classList.add("text-right");

    }
  }

  // FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A
  // CONTAINER.
  var divContainer = document.getElementById("salesBreakupTable");
  divContainer.innerHTML = "";
  divContainer.appendChild(table);
  table.classList.add("table");
  table.classList.add("table-striped");
  table.classList.add("table-bordered");
  table.classList.add("table-hover");

}
addTable(tableValue)

if (tableValue [i] ['billdate']! = "") { tr.style.backgroundColor = "jaune"; }

5 commentaires

hé monsieur, comment puis-je faire défiler verticalement le corps, veuillez aider dans ce domaine également

La page jsfiddle n'est pas disponible

je suis désolé, veuillez vérifier ce jsfiddle.net/draj8126/po0fxkse/2

thead, tbody {affichage: bloc; } tbody {hauteur: 100px; / * Juste pour la démo / overflow-y: auto; / Déclenche le défilement vertical / overflow-x: auto; / Masquer le défilement horizontal * /} ajouter ce style à votre page

faire la même chose mais le corps et la tête se chevauchent

0
votes

Essayez de remplacer ce bloc if : 

  .headerColor,.headerColor ~ td
  {
    background-color:red;
    color: white;
  }
  table#salesBreakupTable thead, table#salesBreakupTable tbody { display: block; }
  table#salesBreakupTable tbody {
    height: 280px; /* Just for the demo */
    overflow-y: auto; /* Trigger vertical scroll */
    overflow-x: hidden; /* Hide the horizontal scroll */
  }

Par: 

  if ((tableValue[i]['billdate'] === tableValue[i][col[j]]) && (tableValue[i][col[j]]).length != 0 ) { // added empty cell filter so empty cells will not get the headerColor class

    tabCell.classList.add("headerColor"); // here i am checking if tableValue===billdate then giving it a class to do some css to it

  }

Et puis appliquez ce style : 

  if (tableValue[i]['billdate'] === tableValue[i][col[j]]) {

    tabCell.classList.add("headerColor"); // here i am checking if tableValue===billdate then giving it a class to do some css to it

  }

7 commentaires

hé puis-je ajuster la hauteur de manière dynamique afin que s'il augmente avec la taille de l'écran, il devrait défiler automatiquement et le tableau complet défile pas tbody

@manishthakur Oui, vous pouvez, essayez par exemple height: 100vh; pour obtenir un tableau de taille verticale complète

hauteur: 100vh; fonctionne mais lorsqu'il y a moins de données, ce qui est inférieur à la longueur de l'écran, il affiche des lignes par défaut

il suffit de changer en max-height: 100vh; alors;)

hey vous là?

hé, que puis-je aider?

J'ai peur de ne pas pouvoir vous aider ici, vous pourriez peut-être poser une nouvelle question car c'est un script complètement différent

2
votes

Vous pouvez essayer le code suivant ou vous pouvez utiliser DataTable js. 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">

<style>
    .headerColor{
        color:red;
    }

    #salesBreakupTable thead, #salesBreakupTable tbody {
        display: block;
    }

    #salesBreakupTable tbody {
        height: 300px;
        overflow: auto;
    }

    #salesBreakupTable tr {
        position: relative;
        width: 100%;
        display: flex;
    }

    #salesBreakupTable tr td, #salesBreakupTable tr th {
        flex: 1;
        width: 200px;
        flex-shrink: 0;
    }
</style>
</head>
<body>


<div class="container">
    <div class="table-responsive">
      <table id="salesBreakupTable">
      </table>

    </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
    var tableValue = [{
    "billdate": "2018-08-04",
    "SalesType": "Total",
    "JAYANAGAR": 518212,
    "MALLESHWARAM": 104801,
    "KOLAR": 138151
  },
  {
    "billdate": "",
    "SalesType": "cash",
    "JAYANAGAR": 508161,
    "MALLESHWARAM": 102675,
    "KOLAR": 138151
  },
  {
    "billdate": "",
    "SalesType": "creditcard",
    "JAYANAGAR": 0,
    "MALLESHWARAM": 0,
    "KOLAR": 0
  },
  {
    "billdate": "",
    "SalesType": "coupon",
    "JAYANAGAR": 0,
    "MALLESHWARAM": 0,
    "KOLAR": 0
  },
  {
    "billdate": "",
    "SalesType": "paytm",
    "JAYANAGAR": 0,
    "MALLESHWARAM": 0,
    "KOLAR": 0
  },
  {
    "billdate": "",
    "SalesType": "credit",
    "JAYANAGAR": 0,
    "MALLESHWARAM": 0,
    "KOLAR": 0
  },
  {
    "billdate": "",
    "SalesType": "swiggy",
    "JAYANAGAR": 10051,
    "MALLESHWARAM": 2126,
    "KOLAR": 0
  },
  {
    "billdate": "",
    "SalesType": "kb",
    "JAYANAGAR": 0,
    "MALLESHWARAM": 0,
    "KOLAR": 0
  },
  {
    "billdate": "",
    "SalesType": "bigbasket",
    "JAYANAGAR": 0,
    "MALLESHWARAM": 0,
    "KOLAR": 0
  },
  {
    "billdate": "",
    "SalesType": "zomato",
    "JAYANAGAR": 0,
    "MALLESHWARAM": 0,
    "KOLAR": 0
  },
  {
    "billdate": "2018-08-05",
    "SalesType": "Total",
    "JAYANAGAR": 628358,
    "MALLESHWARAM": 115223,
    "KOLAR": 134107
  },
  {
    "billdate": "",
    "SalesType": "cash",
    "JAYANAGAR": 608336,
    "MALLESHWARAM": 109013,
    "KOLAR": 134107
  },
  {
    "billdate": "",
    "SalesType": "creditcard",
    "JAYANAGAR": 0,
    "MALLESHWARAM": 0,
    "KOLAR": 0
  },
  {
    "billdate": "",
    "SalesType": "coupon",
    "JAYANAGAR": 0,
    "MALLESHWARAM": 0,
    "KOLAR": 0
  },
  {
    "billdate": "",
    "SalesType": "paytm",
    "JAYANAGAR": 0,
    "MALLESHWARAM": 0,
    "KOLAR": 0
  },
  {
    "billdate": "",
    "SalesType": "credit",
    "JAYANAGAR": 0,
    "MALLESHWARAM": 0,
    "KOLAR": 0
  },
  {
    "billdate": "",
    "SalesType": "swiggy",
    "JAYANAGAR": 20022,
    "MALLESHWARAM": 6210,
    "KOLAR": 0
  },
  {
    "billdate": "",
    "SalesType": "kb",
    "JAYANAGAR": 0,
    "MALLESHWARAM": 0,
    "KOLAR": 0
  },
  {
    "billdate": "",
    "SalesType": "bigbasket",
    "JAYANAGAR": 0,
    "MALLESHWARAM": 0,
    "KOLAR": 0
  },
  {
    "billdate": "",
    "SalesType": "zomato",
    "JAYANAGAR": 0,
    "MALLESHWARAM": 0,
    "KOLAR": 0
  }

];


function addTable(data) {
    var tableHeader = "<thead><tr>";
    var tableBody = "<tbody>";
    $.each(data,function(i,v){
        if (v['billdate']) {
            tableBody += "<tr class='headerColor'>";
        }else {
            tableBody += "<tr>";
        }
        $.each(v,function(d,a){
            if (i == 0) {
                tableHeader += "<th>"+d+"</th>";
            }
            tableBody += "<td>"+a+"</td>";
        });
        tableBody += "</tr>";
    });
    tableHeader += "</tr></thead>";
    tableBody += "</tbody>";
    $("#salesBreakupTable").addClass("table table-striped table-bordered table-hover").html(tableHeader+tableBody);
}

addTable(tableValue);
</script>
</body>
</html>

2 commentaires

hé en fait la conception de ma table est différente, je ne peux donc pas utiliser datatable

s'il vous plaît essayez ce lien c'est le tableau que j'essaie de faire défiler verticalement [ jsfiddle.net/d7v5t0sz/]

8
votes

Utilisez l'unité vh pour définir la hauteur de la table, ce qui résoudra le problème de taille d'écran différente. Vous pouvez également utiliser JavaScript pour définir plus précisément la hauteur de la table en fonction de l'écran.

Tableau avec en-tête fixe sans DataTables: 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<h1>Fixed Header</h1>
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: rgba(29, 150, 178, 1);
  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: rgba(84, 83, 72, .1);
  padding: 5px 5px 5px 5px;
}

.table-wrapper {
  position: relative;
  margin: 10px;
}

.table-head-wrapper {
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.table-body-wrapper {
  height: 70vh;
  overflow: auto;
}

.table-body-wrapper>.table {
  margin: 0;
}
var data = [{
    "billdate": "2018-08-01",
    "outlet": "JAYANAGAR",
    "gross": 274659,
    "discount": 297,
    "GST": 16479,
    "amount": 290954
  },
  {
    "billdate": "2018-08-01",
    "outlet": "MALLESHWARAM",
    "gross": 55185,
    "discount": 0,
    "GST": 3074,
    "amount": 58281
  },
  {
    "billdate": "2018-08-01",
    "outlet": "KOLAR",
    "gross": 62513,
    "discount": 0,
    "GST": 3306,
    "amount": 65880
  },
  {
    "billdate": "2018-08-02",
    "outlet": "JAYANAGAR",
    "gross": 279509,
    "discount": 68,
    "GST": 16582,
    "amount": 296125
  },
  {
    "billdate": "2018-08-02",
    "outlet": "MALLESHWARAM",
    "gross": 53462,
    "discount": 0,
    "GST": 3064,
    "amount": 56545
  },
  {
    "billdate": "2018-08-02",
    "outlet": "KOLAR",
    "gross": 68651,
    "discount": 0,
    "GST": 3492,
    "amount": 72213
  },
  {
    "billdate": "2018-08-03",
    "outlet": "JAYANAGAR",
    "gross": 327097,
    "discount": 539,
    "GST": 19945,
    "amount": 346605
  },
  {
    "billdate": "2018-08-03",
    "outlet": "MALLESHWARAM",
    "gross": 59341,
    "discount": 105,
    "GST": 3370,
    "amount": 62459
  },
  {
    "billdate": "2018-08-03",
    "outlet": "KOLAR",
    "gross": 61953,
    "discount": 0,
    "GST": 3225,
    "amount": 65248
  },
  {
    "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": 109134,
    "discount": 0,
    "GST": 6067,
    "amount": 115223
  },
  {
    "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": 268298,
    "discount": 268,
    "GST": 15943,
    "amount": 284069
  },
  {
    "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];
    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");
    headerRow.appendChild(th);

    th = document.createElement("th");
    th.innerHTML = "GST";
    th.classList.add("text-center");
    headerRow.appendChild(th);

    th = document.createElement("th");
    th.innerHTML = "Net Amount";
    th.classList.add("text-center");
    headerRow.appendChild(th);

    th = document.createElement("th");
    th.innerHTML = "Gross Amount";
    th.classList.add("text-center");
    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 => {
    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);




    });
    /* console.log("row is : " , row.children ) */

    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);
  document.body.appendChild(table);
  table.classList.add("table");
  table.classList.add("table-striped");
  table.classList.add("table-bordered");
  table.classList.add("table-hover");
  wrapTable($(table));
}
let formatedData = formatData(data);
renderTable(formatedData);

function wrapTable($table) {
  let $tableWrapper = $('<div>').addClass('table-wrapper').insertAfter($table);
  let $tableBodyWrapper = $('<div>').addClass('table-body-wrapper').appendTo($tableWrapper);
  let $tableWidthTracker = $('<div>').css('width', '100%').appendTo($tableBodyWrapper);
  $table.appendTo($tableBodyWrapper);
  let $tableHeadWrapper = $('<div>').addClass('table-head-wrapper').width($tableWidthTracker.width()).appendTo($tableWrapper);
  let $tableDuplicateHead = $table.clone().find("tbody").remove().end().appendTo($tableHeadWrapper);
  let $dupCols = $tableDuplicateHead.find('thead tr:last').children();
  $table.find('thead tr:last').children().each(function(i) {
    $dupCols.eq(i).css('minWidth', $(this).outerWidth());
  });
  $tableBodyWrapper.on('scroll', function() {
    $tableHeadWrapper.scrollLeft($tableBodyWrapper.scrollLeft());
  });
  $(window).on('resize', function() {
    $tableHeadWrapper.width($tableWidthTracker.width());
  });
}

2 commentaires

Hé monsieur, pouvez-vous s'il vous plaît m'aider sur ce post stackoverflow.com/questions/55919420/... je suis coincé ici depuis très longtemps

veuillez vérifier et essayez de me guider avec une certaine approche

2
votes

L'idée est de mettre le tableau dans un div, tout en définissant le dépassement caché sur le div et le débordement automatique pour le corps du tableau. Cela peut être fait avec pur css et html. Découvrez ce correctif.

0 commentaires

Articles qui pourrait vous intéresser :

Impossible d'importer le module "@ angular / material"
Interaction profonde avec break and catch
Utilisation de node.js comment renommer tous les fichiers d'un dossier
Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO