Кнопка HTML загружается перед другим содержимым страницы

Я столкнулся с такой проблемой, как рендеринг моей кнопки экспорта до загрузки таблицы HTML, что не очень хорошо выглядит в пользовательском интерфейсе.

Я хочу добиться того, чтобы моя кнопка загружалась после рендеринга таблицы или после загрузки всей страницы должно появиться содержимое.

$(document).ready(function() {
  var tableData = [{
      "CATEGORY CODE": "C001",
      "CATEGORY NAME": "Beverages",
      "QUANTITY": "1.0000",
      "AMOUNT": 18
    },
    {
      "CATEGORY CODE": "C002",
      "CATEGORY NAME": "Shakes",
      "QUANTITY": "1.0000",
      "AMOUNT": 80
    },
    {
      "CATEGORY CODE": "C003",
      "CATEGORY NAME": "Juices",
      "QUANTITY": "1.0000",
      "AMOUNT": 70
    },
    {
      "CATEGORY CODE": "C004",
      "CATEGORY NAME": "Soups",
      "QUANTITY": "1.0000",
      "AMOUNT": 55
    },
    {
      "CATEGORY CODE": "C005",
      "CATEGORY NAME": "Cookies",
      "QUANTITY": "1.0000",
      "AMOUNT": 46
    },
    {
      "CATEGORY CODE": "C006",
      "CATEGORY NAME": "Buns",
      "QUANTITY": "1.0000",
      "AMOUNT": 21
    },
    {
      "CATEGORY CODE": "C007",
      "CATEGORY NAME": "Breads",
      "QUANTITY": "1.0000",
      "AMOUNT": 40
    },
    {
      "CATEGORY CODE": "C008",
      "CATEGORY NAME": "Rusks",
      "QUANTITY": "1.0000",
      "AMOUNT": 52
    },
    {
      "CATEGORY CODE": "C009",
      "CATEGORY NAME": "Biscuits",
      "QUANTITY": "1.0000",
      "AMOUNT": 38
    },
    {
      "CATEGORY CODE": "C010",
      "CATEGORY NAME": "Puff",
      "QUANTITY": "4.0000",
      "AMOUNT": 132
    },
    {
      "CATEGORY CODE": "C011",
      "CATEGORY NAME": "Savouries",
      "QUANTITY": "0.1000",
      "AMOUNT": 29
    },
    {
      "CATEGORY CODE": "C012",
      "CATEGORY NAME": "Cake",
      "QUANTITY": "1.0000",
      "AMOUNT": 46
    },
    {
      "CATEGORY CODE": "C014",
      "CATEGORY NAME": "IceCream",
      "QUANTITY": "1.0000",
      "AMOUNT": 70
    },
    {
      "CATEGORY CODE": "C019",
      "CATEGORY NAME": "Curry",
      "QUANTITY": "1.0000",
      "AMOUNT": 180
    },
    {
      "CATEGORY CODE": "C021",
      "CATEGORY NAME": "Starter",
      "QUANTITY": "1.0000",
      "AMOUNT": 165
    },
    {
      "CATEGORY CODE": "C022",
      "CATEGORY NAME": "Roti",
      "QUANTITY": "1.0000",
      "AMOUNT": 60
    },
    {
      "CATEGORY CODE": "C023",
      "CATEGORY NAME": "Chawal",
      "QUANTITY": "1.0000",
      "AMOUNT": 185
    },
    {
      "CATEGORY CODE": "C024",
      "CATEGORY NAME": "Dessert",
      "QUANTITY": "1.0000",
      "AMOUNT": 66
    },
    {
      "CATEGORY CODE": "C026",
      "CATEGORY NAME": "Soup",
      "QUANTITY": "1.0000",
      "AMOUNT": 100
    },
    {
      "CATEGORY CODE": "C027",
      "CATEGORY NAME": "Salad",
      "QUANTITY": "1.0000",
      "AMOUNT": 50
    },
    {
      "CATEGORY CODE": "C028",
      "CATEGORY NAME": "Set Menu",
      "QUANTITY": "3.0000",
      "AMOUNT": 1290
    },
    {
      "CATEGORY CODE": "C029",
      "CATEGORY NAME": "Pastry",
      "QUANTITY": "1.0000",
      "AMOUNT": 80
    },
    {
      "CATEGORY CODE": "C030",
      "CATEGORY NAME": "Packed Meals",
      "QUANTITY": "1.0000",
      "AMOUNT": 25
    },
    {
      "CATEGORY CODE": "C031",
      "CATEGORY NAME": "Packaging",
      "QUANTITY": "1.0000",
      "AMOUNT": 5
    },
    {
      "CATEGORY CODE": "C034",
      "CATEGORY NAME": "Bhath",
      "QUANTITY": "1.0000",
      "AMOUNT": 68
    },
    {
      "CATEGORY CODE": "C036",
      "CATEGORY NAME": "Snacks",
      "QUANTITY": "1.0000",
      "AMOUNT": 10
    },
    {
      "CATEGORY CODE": "C037",
      "CATEGORY NAME": "Breakfast",
      "QUANTITY": "5.0000",
      "AMOUNT": 119
    },
    {
      "CATEGORY CODE": "C038",
      "CATEGORY NAME": "Evening Snacks",
      "QUANTITY": "1.0000",
      "AMOUNT": 70
    },
    {
      "CATEGORY CODE": "C040",
      "CATEGORY NAME": "Sandwich",
      "QUANTITY": "1.0000",
      "AMOUNT": 75
    },
    {
      "CATEGORY CODE": "C042",
      "CATEGORY NAME": "Burger",
      "QUANTITY": "1.0000",
      "AMOUNT": 75
    },
    {
      "CATEGORY CODE": "C043",
      "CATEGORY NAME": "Meals",
      "QUANTITY": "1.0000",
      "AMOUNT": 220
    },
    {
      "CATEGORY CODE": "C044",
      "CATEGORY NAME": "Curd",
      "QUANTITY": "1.0000",
      "AMOUNT": 12
    },
    {
      "CATEGORY CODE": "C048",
      "CATEGORY NAME": "Combo",
      "QUANTITY": "2.0000",
      "AMOUNT": 180
    },
    {
      "CATEGORY CODE": "C051",
      "CATEGORY NAME": "Silver Thali",
      "QUANTITY": "1.0000",
      "AMOUNT": 450
    },
    {
      "CATEGORY CODE": "C052",
      "CATEGORY NAME": "Sweets",
      "QUANTITY": "1.0000",
      "AMOUNT": 115
    },
    {
      "CATEGORY CODE": "C054",
      "CATEGORY NAME": "Instant Mixes",
      "QUANTITY": "1.0000",
      "AMOUNT": 66
    },
    {
      "CATEGORY CODE": "C055",
      "CATEGORY NAME": "RTE",
      "QUANTITY": "1.0000",
      "AMOUNT": 228
    },
    {
      "CATEGORY CODE": "C057",
      "CATEGORY NAME": "Spices",
      "QUANTITY": "1.0000",
      "AMOUNT": 40
    },
    {
      "CATEGORY CODE": "C061",
      "CATEGORY NAME": "Fast Food",
      "QUANTITY": "1.0000",
      "AMOUNT": 15
    }
  ]

  function addTable(tableData) {
    var col = Object.keys(tableData[0]); // get all the keys from first

    var countNum = col.filter(i => !isNaN(i)).length; // count all which
    // are number
    var num = col.splice(0, countNum); // cut five elements from frist
    col = col.concat(num); // shift the first item to last
    // CREATE DYNAMIC TABLE.
    var table = document.createElement("table");

    // CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE.

    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);
    }

    // ADD JSON DATA TO THE TABLE AS ROWS.
    for (var i = 0; i < tableData.length; i++) {

      tr = table.insertRow(-1);

      for (var j = 0; j < col.length; j++) {
        var tabCell = tr.insertCell(-1);
        var tabledata = tableData[i][col[j]];
        if (tabledata && !isNaN(tabledata)) {
          tabledata = parseInt(tabledata).toLocaleString('en-in')
        }
        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("table1");
    divContainer.innerHTML = "";
    divContainer.appendChild(table);
    table.classList.add("table");
    table.classList.add("table-striped");
    table.classList.add("table-bordered");

  }
  addTable(tableData)

});
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel = "stylesheet" type = "text/css" href = "http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<button type = "button" class = "btn btn-primary btn-lg">Export</button>
<div id = "table1">

</div>

Я хочу добиться того, чтобы после полной загрузки страницы кнопка экспорта появлялась в пользовательском интерфейсе, т.е. после загрузки таблицы или только с таблицей.

Здесь, во фрагменте, он загружается правильно, потому что здесь я статически определяю JSON. В моем коде я выполняю вызов ajax, поэтому, когда я выполняю этот вызов, кнопка появляется в пользовательском интерфейсе до загрузки таблицы.

Изначально сделайте это скрытым, поместив CSS и покажите его, когда весь контент загружен успешно.

— Mayank Pandeyz 05.12.2018 12:02

В своем фрагменте вы можете указать искусственную задержку, чтобы лучше продемонстрировать свою проблему.

— SpoonMeiser 05.12.2018 12:03
javascript jquery html
05.12.2018 11:56
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
2
117
4
Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

Ответ принят как подходящий

Скрыть кнопку

<button id = "exportBtn" type = "button" style = "display: none;" class = "btn btn-primary btn-lg">Export</button>

Показать кнопку после добавления таблицы

addTable(tableData)
$("#exportBtn").show();
05.12.2018 12:03

Я использую Promise для имитации вызова AJAX. Это должно сработать для вас. Я добавил атрибут id к элементу кнопки, сначала скрываю его, а отображаю после получения JSON.

Итак, что вы хотите сделать, это сначала скрыть кнопку, подождать, пока JSON загрузится через запрос AJAX, и после его загрузки отобразить кнопку, используя метод jQueryshow().

<html>
  <body>
    <script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link
      rel = "stylesheet"
      type = "text/css"
      href = "http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"
    />
    <button type = "button" class = "btn btn-primary btn-lg" style = "display: none" id = "exportBtn">Export</button>
    <div id = "table1"></div>
  </body>
  <script>
    $(document).ready(function() {
      var tableData = [
        {
          "CATEGORY CODE": "C001",
          "CATEGORY NAME": "Beverages",
          QUANTITY: "1.0000",
          AMOUNT: 18
        },
        {
          "CATEGORY CODE": "C002",
          "CATEGORY NAME": "Shakes",
          QUANTITY: "1.0000",
          AMOUNT: 80
        },
        {
          "CATEGORY CODE": "C003",
          "CATEGORY NAME": "Juices",
          QUANTITY: "1.0000",
          AMOUNT: 70
        },
        {
          "CATEGORY CODE": "C004",
          "CATEGORY NAME": "Soups",
          QUANTITY: "1.0000",
          AMOUNT: 55
        },
        {
          "CATEGORY CODE": "C005",
          "CATEGORY NAME": "Cookies",
          QUANTITY: "1.0000",
          AMOUNT: 46
        },
        {
          "CATEGORY CODE": "C006",
          "CATEGORY NAME": "Buns",
          QUANTITY: "1.0000",
          AMOUNT: 21
        },
        {
          "CATEGORY CODE": "C007",
          "CATEGORY NAME": "Breads",
          QUANTITY: "1.0000",
          AMOUNT: 40
        },
        {
          "CATEGORY CODE": "C008",
          "CATEGORY NAME": "Rusks",
          QUANTITY: "1.0000",
          AMOUNT: 52
        },
        {
          "CATEGORY CODE": "C009",
          "CATEGORY NAME": "Biscuits",
          QUANTITY: "1.0000",
          AMOUNT: 38
        },
        {
          "CATEGORY CODE": "C010",
          "CATEGORY NAME": "Puff",
          QUANTITY: "4.0000",
          AMOUNT: 132
        },
        {
          "CATEGORY CODE": "C011",
          "CATEGORY NAME": "Savouries",
          QUANTITY: "0.1000",
          AMOUNT: 29
        },
        {
          "CATEGORY CODE": "C012",
          "CATEGORY NAME": "Cake",
          QUANTITY: "1.0000",
          AMOUNT: 46
        },
        {
          "CATEGORY CODE": "C014",
          "CATEGORY NAME": "IceCream",
          QUANTITY: "1.0000",
          AMOUNT: 70
        },
        {
          "CATEGORY CODE": "C019",
          "CATEGORY NAME": "Curry",
          QUANTITY: "1.0000",
          AMOUNT: 180
        },
        {
          "CATEGORY CODE": "C021",
          "CATEGORY NAME": "Starter",
          QUANTITY: "1.0000",
          AMOUNT: 165
        },
        {
          "CATEGORY CODE": "C022",
          "CATEGORY NAME": "Roti",
          QUANTITY: "1.0000",
          AMOUNT: 60
        },
        {
          "CATEGORY CODE": "C023",
          "CATEGORY NAME": "Chawal",
          QUANTITY: "1.0000",
          AMOUNT: 185
        },
        {
          "CATEGORY CODE": "C024",
          "CATEGORY NAME": "Dessert",
          QUANTITY: "1.0000",
          AMOUNT: 66
        },
        {
          "CATEGORY CODE": "C026",
          "CATEGORY NAME": "Soup",
          QUANTITY: "1.0000",
          AMOUNT: 100
        },
        {
          "CATEGORY CODE": "C027",
          "CATEGORY NAME": "Salad",
          QUANTITY: "1.0000",
          AMOUNT: 50
        },
        {
          "CATEGORY CODE": "C028",
          "CATEGORY NAME": "Set Menu",
          QUANTITY: "3.0000",
          AMOUNT: 1290
        },
        {
          "CATEGORY CODE": "C029",
          "CATEGORY NAME": "Pastry",
          QUANTITY: "1.0000",
          AMOUNT: 80
        },
        {
          "CATEGORY CODE": "C030",
          "CATEGORY NAME": "Packed Meals",
          QUANTITY: "1.0000",
          AMOUNT: 25
        },
        {
          "CATEGORY CODE": "C031",
          "CATEGORY NAME": "Packaging",
          QUANTITY: "1.0000",
          AMOUNT: 5
        },
        {
          "CATEGORY CODE": "C034",
          "CATEGORY NAME": "Bhath",
          QUANTITY: "1.0000",
          AMOUNT: 68
        },
        {
          "CATEGORY CODE": "C036",
          "CATEGORY NAME": "Snacks",
          QUANTITY: "1.0000",
          AMOUNT: 10
        },
        {
          "CATEGORY CODE": "C037",
          "CATEGORY NAME": "Breakfast",
          QUANTITY: "5.0000",
          AMOUNT: 119
        },
        {
          "CATEGORY CODE": "C038",
          "CATEGORY NAME": "Evening Snacks",
          QUANTITY: "1.0000",
          AMOUNT: 70
        },
        {
          "CATEGORY CODE": "C040",
          "CATEGORY NAME": "Sandwich",
          QUANTITY: "1.0000",
          AMOUNT: 75
        },
        {
          "CATEGORY CODE": "C042",
          "CATEGORY NAME": "Burger",
          QUANTITY: "1.0000",
          AMOUNT: 75
        },
        {
          "CATEGORY CODE": "C043",
          "CATEGORY NAME": "Meals",
          QUANTITY: "1.0000",
          AMOUNT: 220
        },
        {
          "CATEGORY CODE": "C044",
          "CATEGORY NAME": "Curd",
          QUANTITY: "1.0000",
          AMOUNT: 12
        },
        {
          "CATEGORY CODE": "C048",
          "CATEGORY NAME": "Combo",
          QUANTITY: "2.0000",
          AMOUNT: 180
        },
        {
          "CATEGORY CODE": "C051",
          "CATEGORY NAME": "Silver Thali",
          QUANTITY: "1.0000",
          AMOUNT: 450
        },
        {
          "CATEGORY CODE": "C052",
          "CATEGORY NAME": "Sweets",
          QUANTITY: "1.0000",
          AMOUNT: 115
        },
        {
          "CATEGORY CODE": "C054",
          "CATEGORY NAME": "Instant Mixes",
          QUANTITY: "1.0000",
          AMOUNT: 66
        },
        {
          "CATEGORY CODE": "C055",
          "CATEGORY NAME": "RTE",
          QUANTITY: "1.0000",
          AMOUNT: 228
        },
        {
          "CATEGORY CODE": "C057",
          "CATEGORY NAME": "Spices",
          QUANTITY: "1.0000",
          AMOUNT: 40
        },
        {
          "CATEGORY CODE": "C061",
          "CATEGORY NAME": "Fast Food",
          QUANTITY: "1.0000",
          AMOUNT: 15
        }
      ];

      function addTable(tableData) {
        var col = Object.keys(tableData[0]); // get all the keys from first

        var countNum = col.filter(i => !isNaN(i)).length; // count all which
        // are number
        var num = col.splice(0, countNum); // cut five elements from frist
        col = col.concat(num); // shift the first item to last
        // CREATE DYNAMIC TABLE.
        var table = document.createElement("table");

        // CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE.

        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);
        }

        // ADD JSON DATA TO THE TABLE AS ROWS.
        for (var i = 0; i < tableData.length; i++) {
          tr = table.insertRow(-1);

          for (var j = 0; j < col.length; j++) {
            var tabCell = tr.insertCell(-1);
            var tabledata = tableData[i][col[j]];
            if (tabledata && !isNaN(tabledata)) {
              tabledata = parseInt(tabledata).toLocaleString("en-in");
            }
            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("table1");
        divContainer.innerHTML = "";
        divContainer.appendChild(table);
        table.classList.add("table");
        table.classList.add("table-striped");
        table.classList.add("table-bordered");
      }
      new Promise(resolve => {
        setTimeout(() => {
          $("#exportBtn").show();
          resolve(tableData);
        }, 2000);
      }).then(data => {
        addTable(data);
      });
    });
  </script>
</html>
05.12.2018 12:06

Сначала вы можете скрыть загрузку onpage, чем привязать сетку таблицы и показать btn, как показано ниже.

$(document).ready(function() {
$("#btnExport").hide();
  var tableData = [{
      "CATEGORY CODE": "C001",
      "CATEGORY NAME": "Beverages",
      "QUANTITY": "1.0000",
      "AMOUNT": 18
    },
    {
      "CATEGORY CODE": "C002",
      "CATEGORY NAME": "Shakes",
      "QUANTITY": "1.0000",
      "AMOUNT": 80
    },
    {
      "CATEGORY CODE": "C003",
      "CATEGORY NAME": "Juices",
      "QUANTITY": "1.0000",
      "AMOUNT": 70
    },
    {
      "CATEGORY CODE": "C004",
      "CATEGORY NAME": "Soups",
      "QUANTITY": "1.0000",
      "AMOUNT": 55
    },
    {
      "CATEGORY CODE": "C005",
      "CATEGORY NAME": "Cookies",
      "QUANTITY": "1.0000",
      "AMOUNT": 46
    },
    {
      "CATEGORY CODE": "C006",
      "CATEGORY NAME": "Buns",
      "QUANTITY": "1.0000",
      "AMOUNT": 21
    },
    {
      "CATEGORY CODE": "C007",
      "CATEGORY NAME": "Breads",
      "QUANTITY": "1.0000",
      "AMOUNT": 40
    },
    {
      "CATEGORY CODE": "C008",
      "CATEGORY NAME": "Rusks",
      "QUANTITY": "1.0000",
      "AMOUNT": 52
    },
    {
      "CATEGORY CODE": "C009",
      "CATEGORY NAME": "Biscuits",
      "QUANTITY": "1.0000",
      "AMOUNT": 38
    },
    {
      "CATEGORY CODE": "C010",
      "CATEGORY NAME": "Puff",
      "QUANTITY": "4.0000",
      "AMOUNT": 132
    },
    {
      "CATEGORY CODE": "C011",
      "CATEGORY NAME": "Savouries",
      "QUANTITY": "0.1000",
      "AMOUNT": 29
    },
    {
      "CATEGORY CODE": "C012",
      "CATEGORY NAME": "Cake",
      "QUANTITY": "1.0000",
      "AMOUNT": 46
    },
    {
      "CATEGORY CODE": "C014",
      "CATEGORY NAME": "IceCream",
      "QUANTITY": "1.0000",
      "AMOUNT": 70
    },
    {
      "CATEGORY CODE": "C019",
      "CATEGORY NAME": "Curry",
      "QUANTITY": "1.0000",
      "AMOUNT": 180
    },
    {
      "CATEGORY CODE": "C021",
      "CATEGORY NAME": "Starter",
      "QUANTITY": "1.0000",
      "AMOUNT": 165
    },
    {
      "CATEGORY CODE": "C022",
      "CATEGORY NAME": "Roti",
      "QUANTITY": "1.0000",
      "AMOUNT": 60
    },
    {
      "CATEGORY CODE": "C023",
      "CATEGORY NAME": "Chawal",
      "QUANTITY": "1.0000",
      "AMOUNT": 185
    },
    {
      "CATEGORY CODE": "C024",
      "CATEGORY NAME": "Dessert",
      "QUANTITY": "1.0000",
      "AMOUNT": 66
    },
    {
      "CATEGORY CODE": "C026",
      "CATEGORY NAME": "Soup",
      "QUANTITY": "1.0000",
      "AMOUNT": 100
    },
    {
      "CATEGORY CODE": "C027",
      "CATEGORY NAME": "Salad",
      "QUANTITY": "1.0000",
      "AMOUNT": 50
    },
    {
      "CATEGORY CODE": "C028",
      "CATEGORY NAME": "Set Menu",
      "QUANTITY": "3.0000",
      "AMOUNT": 1290
    },
    {
      "CATEGORY CODE": "C029",
      "CATEGORY NAME": "Pastry",
      "QUANTITY": "1.0000",
      "AMOUNT": 80
    },
    {
      "CATEGORY CODE": "C030",
      "CATEGORY NAME": "Packed Meals",
      "QUANTITY": "1.0000",
      "AMOUNT": 25
    },
    {
      "CATEGORY CODE": "C031",
      "CATEGORY NAME": "Packaging",
      "QUANTITY": "1.0000",
      "AMOUNT": 5
    },
    {
      "CATEGORY CODE": "C034",
      "CATEGORY NAME": "Bhath",
      "QUANTITY": "1.0000",
      "AMOUNT": 68
    },
    {
      "CATEGORY CODE": "C036",
      "CATEGORY NAME": "Snacks",
      "QUANTITY": "1.0000",
      "AMOUNT": 10
    },
    {
      "CATEGORY CODE": "C037",
      "CATEGORY NAME": "Breakfast",
      "QUANTITY": "5.0000",
      "AMOUNT": 119
    },
    {
      "CATEGORY CODE": "C038",
      "CATEGORY NAME": "Evening Snacks",
      "QUANTITY": "1.0000",
      "AMOUNT": 70
    },
    {
      "CATEGORY CODE": "C040",
      "CATEGORY NAME": "Sandwich",
      "QUANTITY": "1.0000",
      "AMOUNT": 75
    },
    {
      "CATEGORY CODE": "C042",
      "CATEGORY NAME": "Burger",
      "QUANTITY": "1.0000",
      "AMOUNT": 75
    },
    {
      "CATEGORY CODE": "C043",
      "CATEGORY NAME": "Meals",
      "QUANTITY": "1.0000",
      "AMOUNT": 220
    },
    {
      "CATEGORY CODE": "C044",
      "CATEGORY NAME": "Curd",
      "QUANTITY": "1.0000",
      "AMOUNT": 12
    },
    {
      "CATEGORY CODE": "C048",
      "CATEGORY NAME": "Combo",
      "QUANTITY": "2.0000",
      "AMOUNT": 180
    },
    {
      "CATEGORY CODE": "C051",
      "CATEGORY NAME": "Silver Thali",
      "QUANTITY": "1.0000",
      "AMOUNT": 450
    },
    {
      "CATEGORY CODE": "C052",
      "CATEGORY NAME": "Sweets",
      "QUANTITY": "1.0000",
      "AMOUNT": 115
    },
    {
      "CATEGORY CODE": "C054",
      "CATEGORY NAME": "Instant Mixes",
      "QUANTITY": "1.0000",
      "AMOUNT": 66
    },
    {
      "CATEGORY CODE": "C055",
      "CATEGORY NAME": "RTE",
      "QUANTITY": "1.0000",
      "AMOUNT": 228
    },
    {
      "CATEGORY CODE": "C057",
      "CATEGORY NAME": "Spices",
      "QUANTITY": "1.0000",
      "AMOUNT": 40
    },
    {
      "CATEGORY CODE": "C061",
      "CATEGORY NAME": "Fast Food",
      "QUANTITY": "1.0000",
      "AMOUNT": 15
    }
  ]

  function addTable(tableData) {
    var col = Object.keys(tableData[0]); // get all the keys from first

    var countNum = col.filter(i => !isNaN(i)).length; // count all which
    // are number
    var num = col.splice(0, countNum); // cut five elements from frist
    col = col.concat(num); // shift the first item to last
    // CREATE DYNAMIC TABLE.
    var table = document.createElement("table");

    // CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE.

    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);
    }

    // ADD JSON DATA TO THE TABLE AS ROWS.
    for (var i = 0; i < tableData.length; i++) {

      tr = table.insertRow(-1);

      for (var j = 0; j < col.length; j++) {
        var tabCell = tr.insertCell(-1);
        var tabledata = tableData[i][col[j]];
        if (tabledata && !isNaN(tabledata)) {
          tabledata = parseInt(tabledata).toLocaleString('en-in')
        }
        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("table1");
    divContainer.innerHTML = "";
    divContainer.appendChild(table);
    table.classList.add("table");
    table.classList.add("table-striped");
    table.classList.add("table-bordered");

  }
  addTable(tableData);
  $("#btnExport").show();

});
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel = "stylesheet" type = "text/css" href = "http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<button type = "button" id = "btnExport" class = "btn btn-primary btn-lg">Export</button>
<div id = "table1">

</div>
05.12.2018 12:10

Сначала вы можете скрыть кнопку, а затем показать это после вызова addTable ().

Пожалуйста, обрати внимание: Весь ваш код написан на JavaScript. Без надобности смешивать JavaScript и jQuery - не лучшая практика.

$(document).ready(function (){
var tableData=[
         {
            "CATEGORY CODE": "C001",
            "CATEGORY NAME": "Beverages",
            "QUANTITY": "1.0000",
            "AMOUNT": 18
          },
          {
            "CATEGORY CODE": "C002",
            "CATEGORY NAME": "Shakes",
            "QUANTITY": "1.0000",
            "AMOUNT": 80
          },
          {
            "CATEGORY CODE": "C003",
            "CATEGORY NAME": "Juices",
            "QUANTITY": "1.0000",
            "AMOUNT": 70
          },
          {
            "CATEGORY CODE": "C004",
            "CATEGORY NAME": "Soups",
            "QUANTITY": "1.0000",
            "AMOUNT": 55
          },
          {
            "CATEGORY CODE": "C005",
            "CATEGORY NAME": "Cookies",
            "QUANTITY": "1.0000",
            "AMOUNT": 46
          },
          {
            "CATEGORY CODE": "C006",
            "CATEGORY NAME": "Buns",
            "QUANTITY": "1.0000",
            "AMOUNT": 21
          },
          {
            "CATEGORY CODE": "C007",
            "CATEGORY NAME": "Breads",
            "QUANTITY": "1.0000",
            "AMOUNT": 40
          },
          {
            "CATEGORY CODE": "C008",
            "CATEGORY NAME": "Rusks",
            "QUANTITY": "1.0000",
            "AMOUNT": 52
          },
          {
            "CATEGORY CODE": "C009",
            "CATEGORY NAME": "Biscuits",
            "QUANTITY": "1.0000",
            "AMOUNT": 38
          },
          {
            "CATEGORY CODE": "C010",
            "CATEGORY NAME": "Puff",
            "QUANTITY": "4.0000",
            "AMOUNT": 132
          },
          {
            "CATEGORY CODE": "C011",
            "CATEGORY NAME": "Savouries",
            "QUANTITY": "0.1000",
            "AMOUNT": 29
          },
          {
            "CATEGORY CODE": "C012",
            "CATEGORY NAME": "Cake",
            "QUANTITY": "1.0000",
            "AMOUNT": 46
          },
          {
            "CATEGORY CODE": "C014",
            "CATEGORY NAME": "IceCream",
            "QUANTITY": "1.0000",
            "AMOUNT": 70
          },
          {
            "CATEGORY CODE": "C019",
            "CATEGORY NAME": "Curry",
            "QUANTITY": "1.0000",
            "AMOUNT": 180
          },
          {
            "CATEGORY CODE": "C021",
            "CATEGORY NAME": "Starter",
            "QUANTITY": "1.0000",
            "AMOUNT": 165
          },
          {
            "CATEGORY CODE": "C022",
            "CATEGORY NAME": "Roti",
            "QUANTITY": "1.0000",
            "AMOUNT": 60
          },
          {
            "CATEGORY CODE": "C023",
            "CATEGORY NAME": "Chawal",
            "QUANTITY": "1.0000",
            "AMOUNT": 185
          },
          {
            "CATEGORY CODE": "C024",
            "CATEGORY NAME": "Dessert",
            "QUANTITY": "1.0000",
            "AMOUNT": 66
          },
          {
            "CATEGORY CODE": "C026",
            "CATEGORY NAME": "Soup",
            "QUANTITY": "1.0000",
            "AMOUNT": 100
          },
          {
            "CATEGORY CODE": "C027",
            "CATEGORY NAME": "Salad",
            "QUANTITY": "1.0000",
            "AMOUNT": 50
          },
          {
            "CATEGORY CODE": "C028",
            "CATEGORY NAME": "Set Menu",
            "QUANTITY": "3.0000",
            "AMOUNT": 1290
          },
          {
            "CATEGORY CODE": "C029",
            "CATEGORY NAME": "Pastry",
            "QUANTITY": "1.0000",
            "AMOUNT": 80
          },
          {
            "CATEGORY CODE": "C030",
            "CATEGORY NAME": "Packed Meals",
            "QUANTITY": "1.0000",
            "AMOUNT": 25
          },
          {
            "CATEGORY CODE": "C031",
            "CATEGORY NAME": "Packaging",
            "QUANTITY": "1.0000",
            "AMOUNT": 5
          },
          {
            "CATEGORY CODE": "C034",
            "CATEGORY NAME": "Bhath",
            "QUANTITY": "1.0000",
            "AMOUNT": 68
          },
          {
            "CATEGORY CODE": "C036",
            "CATEGORY NAME": "Snacks",
            "QUANTITY": "1.0000",
            "AMOUNT": 10
          },
          {
            "CATEGORY CODE": "C037",
            "CATEGORY NAME": "Breakfast",
            "QUANTITY": "5.0000",
            "AMOUNT": 119
          },
          {
            "CATEGORY CODE": "C038",
            "CATEGORY NAME": "Evening Snacks",
            "QUANTITY": "1.0000",
            "AMOUNT": 70
          },
          {
            "CATEGORY CODE": "C040",
            "CATEGORY NAME": "Sandwich",
            "QUANTITY": "1.0000",
            "AMOUNT": 75
          },
          {
            "CATEGORY CODE": "C042",
            "CATEGORY NAME": "Burger",
            "QUANTITY": "1.0000",
            "AMOUNT": 75
          },
          {
            "CATEGORY CODE": "C043",
            "CATEGORY NAME": "Meals",
            "QUANTITY": "1.0000",
            "AMOUNT": 220
          },
          {
            "CATEGORY CODE": "C044",
            "CATEGORY NAME": "Curd",
            "QUANTITY": "1.0000",
            "AMOUNT": 12
          },
          {
            "CATEGORY CODE": "C048",
            "CATEGORY NAME": "Combo",
            "QUANTITY": "2.0000",
            "AMOUNT": 180
          },
          {
            "CATEGORY CODE": "C051",
            "CATEGORY NAME": "Silver Thali",
            "QUANTITY": "1.0000",
            "AMOUNT": 450
          },
          {
            "CATEGORY CODE": "C052",
            "CATEGORY NAME": "Sweets",
            "QUANTITY": "1.0000",
            "AMOUNT": 115
          },
          {
            "CATEGORY CODE": "C054",
            "CATEGORY NAME": "Instant Mixes",
            "QUANTITY": "1.0000",
            "AMOUNT": 66
          },
          {
            "CATEGORY CODE": "C055",
            "CATEGORY NAME": "RTE",
            "QUANTITY": "1.0000",
            "AMOUNT": 228
          },
          {
            "CATEGORY CODE": "C057",
            "CATEGORY NAME": "Spices",
            "QUANTITY": "1.0000",
            "AMOUNT": 40
          },
          {
            "CATEGORY CODE": "C061",
            "CATEGORY NAME": "Fast Food",
            "QUANTITY": "1.0000",
            "AMOUNT": 15
          }
        ]

  function addTable(tableData) {
    var col = Object.keys(tableData[0]); // get all the keys from first

    var countNum = col.filter(i => !isNaN(i)).length; // count all which
                              // are number
    var num = col.splice(0, countNum); // cut five elements from frist
    col = col.concat(num); // shift the first item to last
    // CREATE DYNAMIC TABLE.
    var table = document.createElement("table");

    // CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE.

    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);
    }

    // ADD JSON DATA TO THE TABLE AS ROWS.
    for (var i = 0; i < tableData.length; i++) {

        tr = table.insertRow(-1);

        for (var j = 0; j < col.length; j++) {
            var tabCell = tr.insertCell(-1);
             var tabledata = tableData[i][col[j]];
    if (tabledata && !isNaN(tabledata)){
      tabledata = parseInt(tabledata).toLocaleString('en-in')
    }
    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("table1");
    divContainer.innerHTML = "";
    divContainer.appendChild(table);
    table.classList.add("table");
    table.classList.add("table-striped");
    table.classList.add("table-bordered");
  }
  addTable(tableData);
  document.querySelector('#btn_export').style.display = 'block';
});
#btn_export{display:none;}
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel = "stylesheet" type = "text/css"	href = "http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<button id = "btn_export" type = "button" class = "export btn btn-primary btn-lg">Export</button>
<div id = "table1">

</div>

Я не знаю, как сделать вызов ajax с помощью javascript, поэтому я использую jquery

— manish thakur 05.12.2018 12:19

@manishthakur, если вы уже используете jQuery в своем коде, тогда нет проблем .... поэтому я упомянул слово без надобности ........ спасибо

— Mamun 05.12.2018 12:22
05.12.2018 12:12

Другие вопросы по теме

Проверить, прокручивается ли div по горизонтали вправо?
Удобная прокрутка карусели на колесе мыши внутри div
Загрузка вложенного gridview с помощью jquery для очень больших данных
Как добавить статический текст перед значением?
Невозможно ввести верхний регистр в редактируемом бутстрапе
JQuery: проблемы с активацией и отключением скользящего меню
Как создать всплывающее окно со списком параметров при нажатии с помощью jQuery
CSS - Абсолютное позиционирование дергается в Microsoft Edge
Удалить пробелы между тегами HTML
Изменить семейство шрифтов атрибута title

Похожие вопросы

Передача модели бритвы в виде значения (строки) в JS с атрибутом onclick
JavaScript создает новый элемент с помощью цикла for
Перекрестная проверка Angular FormArray между свойствами объекта
Загрузить внешнюю веб-библиотеку на машинописном языке angular 4
Проверить, прокручивается ли div по горизонтали вправо?
Удобная прокрутка карусели на колесе мыши внутри div
Knockout периодически связывает элемент с [object HTMLDivElement]
Пакет Angular работает локально, но не работает после развертывания
Входной массив как параметр?
Как отлаживать прослушиватель событий в background.js в расширении Chrome