datatable com ajax



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
    <link href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
    <link href="https://cdn.datatables.net/fixedheader/3.1.5/css/fixedHeader.bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
    <link href="https://cdn.datatables.net/responsive/2.2.3/css/responsive.bootstrap.min.css" rel="stylesheet" id="bootstrap-css">

    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap.min.js"></script>
    <script src="https://cdn.datatables.net/fixedheader/3.1.5/js/dataTables.fixedHeader.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.2.3/js/responsive.bootstrap.min.js"></script>


    <script>
        $(function() {
              $("#example").DataTable();

              // Premade test data, you can also use your own
              var testDataUrl = "data.json"

              $("#loadData").click(function() {
                loadData();
              });

              function loadData() {
                $.ajax({
                  type: 'GET',
                  url: testDataUrl,
                  contentType: "text/plain",
                  dataType: 'json',
                  success: function (data) {
                    myJsonData = data;
                    populateDataTable(myJsonData);
                  },
                  error: function (e) {
                    console.log("There was an error with your request...");
                    console.log("error: " + JSON.stringify(e));
                  }
                });
              }

              // populate the data table with JSON data
              function populateDataTable(data) {
                console.log("populating data table...");
                // clear the table before populating it with more data
                $("#example").DataTable().clear();
                var length = Object.keys(data.customers).length;
                for(var i = 1; i < length+1; i++) {
                  var data = data.data['data'+i];

                  // You could also use an ajax property on the data table initialization
                  $('#example').dataTable().fnAddData( [
                    data.numeroOcorrencia,
                    data.last_name,
                    data.occupation,
                    data.email_address
                  ]);
                }
              }
            })();
    </script>

    <!------ Include the above in your HEAD tag ---------->
    <title>Certificado RTF</title>
</head>
<body>
    <div class="container">
      <div class="panel">
        <button id="loadData" class="btn btn-default">Load Data</button>

        <table id="example" class="table table-striped table-bordered nowrap" style="width:100%" cellspacing="0">
          <thead>
            <tr>
              <th>Número da Ocorrência</th>
                <th>Assunto</th>
                <th>Cliente</th>
                <th>CPF/CNPJ</th>
                <th>Tipo de Ocorrência</th>
                <th>Canal de Abertura</th>
                <th>E-mail</th>
                <th>Grupo</th>
                <th>Cota</th>
                <th>Data Criação</th>
                <th>Criado Por</th>
            </tr>
          </thead>
        </table>
      </div>
    </div>
    </body>
</html>