SHARE
TWEET

datatable com ajax

sangueroots Feb 20th, 2019 72 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1.  
  2.  
  3. <!DOCTYPE html>
  4. <html lang="en">
  5. <head>
  6.     <meta charset="UTF-8">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  9.     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
  10.     <link href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
  11.     <link href="https://cdn.datatables.net/fixedheader/3.1.5/css/fixedHeader.bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
  12.     <link href="https://cdn.datatables.net/responsive/2.2.3/css/responsive.bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
  13.  
  14.     <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
  15.     <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
  16.     <script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap.min.js"></script>
  17.     <script src="https://cdn.datatables.net/fixedheader/3.1.5/js/dataTables.fixedHeader.min.js"></script>
  18.     <script src="https://cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.min.js"></script>
  19.     <script src="https://cdn.datatables.net/responsive/2.2.3/js/responsive.bootstrap.min.js"></script>
  20.  
  21.  
  22.     <script>
  23.         $(function() {
  24.               $("#example").DataTable();
  25.  
  26.               // Premade test data, you can also use your own
  27.               var testDataUrl = "data.json"
  28.  
  29.               $("#loadData").click(function() {
  30.                 loadData();
  31.               });
  32.  
  33.               function loadData() {
  34.                 $.ajax({
  35.                   type: 'GET',
  36.                   url: testDataUrl,
  37.                   contentType: "text/plain",
  38.                   dataType: 'json',
  39.                   success: function (data) {
  40.                     myJsonData = data;
  41.                     populateDataTable(myJsonData);
  42.                   },
  43.                   error: function (e) {
  44.                     console.log("There was an error with your request...");
  45.                     console.log("error: " + JSON.stringify(e));
  46.                   }
  47.                 });
  48.               }
  49.  
  50.               // populate the data table with JSON data
  51.               function populateDataTable(data) {
  52.                 console.log("populating data table...");
  53.                 // clear the table before populating it with more data
  54.                 $("#example").DataTable().clear();
  55.                 var length = Object.keys(data.customers).length;
  56.                 for(var i = 1; i < length+1; i++) {
  57.                   var data = data.data['data'+i];
  58.  
  59.                   // You could also use an ajax property on the data table initialization
  60.                   $('#example').dataTable().fnAddData( [
  61.                     data.numeroOcorrencia,
  62.                     data.last_name,
  63.                     data.occupation,
  64.                     data.email_address
  65.                   ]);
  66.                 }
  67.               }
  68.             })();
  69.    </script>
  70.  
  71.     <!------ Include the above in your HEAD tag ---------->
  72.     <title>Certificado RTF</title>
  73. </head>
  74. <body>
  75.     <div class="container">
  76.       <div class="panel">
  77.         <button id="loadData" class="btn btn-default">Load Data</button>
  78.  
  79.         <table id="example" class="table table-striped table-bordered nowrap" style="width:100%" cellspacing="0">
  80.           <thead>
  81.             <tr>
  82.               <th>Número da Ocorrência</th>
  83.                 <th>Assunto</th>
  84.                 <th>Cliente</th>
  85.                 <th>CPF/CNPJ</th>
  86.                 <th>Tipo de Ocorrência</th>
  87.                 <th>Canal de Abertura</th>
  88.                 <th>E-mail</th>
  89.                 <th>Grupo</th>
  90.                 <th>Cota</th>
  91.                 <th>Data Criação</th>
  92.                 <th>Criado Por</th>
  93.             </tr>
  94.           </thead>
  95.         </table>
  96.       </div>
  97.     </div>
  98.     </body>
  99. </html>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top