API tools faq
paste
ketura

types

ketura
Dec 22nd, 2017
177
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 3.43 KB | None | 0 0
raw download clone embed print report
  1. <html lang="en">
  2.     <head>
  3.         <!-- <style type="text/css">@charset "UTF-8";</style> -->
  4.         <meta charset="utf-8">
  5.         <link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" >
  6.         <link rel="stylesheet" href="https://cdn.datatables.net/keytable/2.3.2/css/keyTable.jqueryui.min.css" >
  7.         <link rel="stylesheet" href="https://cdn.datatables.net/fixedcolumns/3.2.4/css/fixedColumns.dataTables.min.css" >
  8.         <link rel="stylesheet" href="https://cdn.datatables.net/fixedheader/3.1.3/css/fixedHeader.dataTables.min.css" >
  9.         <link rel="stylesheet" href="https://cdn.datatables.net/select/1.2.4/css/select.dataTables.min.css" >
  10.         <title>Ketura's PC</title>
  11.     </head>
  12.     <body id="">
  13.         <div id="app">
  14.             <div class="w100">
  15.                 <div class="dash-panel-box" width="80%">
  16.                     <div class="dash-heading row">
  17.                         <input id="new-type-input">
  18.                         <button name="data-report" type="button" class="btn btn-dark">Add Row</button>
  19.                         <button name="btnDestroy" type="button" class="btn btn-dark">Destroy DataTable</button>
  20.  
  21.                     </div>
  22.                     <table id="type-table" class="display cell-border compact hover stripe" width="80%" cellspacing="0"> </table>
  23.                 </div>
  24.             </div>
  25.         </div>
  26.         <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.16/css/jquery.dataTables.css" /> -->
  27.        
  28.         <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
  29.         <script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.16/js/jquery.dataTables.js"></script>
  30.         <script src="https://cdn.datatables.net/fixedcolumns/3.2.4/js/dataTables.fixedColumns.min.js"></script>
  31.         <script src="https://cdn.datatables.net/fixedheader/3.1.3/js/dataTables.fixedHeader.min.js"></script>
  32.         <script src="https://cdn.datatables.net/select/1.2.4/js/dataTables.select.min.js"></script>
  33.        
  34.         <script>
  35.         var pokeTypes = ['Fire', 'Water', 'Electric'];
  36.         //The jQuery(callback) function is basically something which runs after the entire document has been loaded.
  37.         jQuery(function () {
  38.            
  39.  
  40.             var typeDatatable = RegenerateTypeTable(true);
  41.  
  42.             jQuery('[name=data-report]').on('click', function () {
  43.                 //console.log(typeDatatable.data());
  44.                 pokeTypes.push($('#new-type-input').val());
  45.                 //typeDatatable.destroy();
  46.                 typeDatatable = RegenerateTypeTable(true);
  47.                 //console.log(typeDatatable.data());
  48.             });
  49.  
  50.             jQuery('[name=btnDestroy]').on('click', function () {
  51.                 typeDatatable.destroy();
  52.             });
  53.         });
  54.  
  55.         function RegenerateTypeTable(debug)
  56.         {
  57.             console.log(pokeTypes);
  58.             var tableData = [];
  59.             var headerRow = {name:""};
  60.             var columns = [
  61.                 { data: 'name', className: 'dt-center'}
  62.             ];
  63.  
  64.             pokeTypes.forEach(function(row){
  65.                 headerRow[row] = row;
  66.             });
  67.             tableData.push(headerRow);
  68.  
  69.             pokeTypes.forEach(function(row){
  70.                 columns.push({ data: row, className: 'dt-center'});
  71.                 var dataRow = {name: row};
  72.                 pokeTypes.forEach(function(col){
  73.                     dataRow[col] = 0;
  74.                 });
  75.                 tableData.push(dataRow);
  76.             });
  77.  
  78.             console.log(tableData);
  79.             console.log(columns);
  80.  
  81.             if(debug)
  82.             {
  83.                 var typeDatatable = jQuery("#type-table").DataTable({
  84.                     "data": tableData,
  85.                     "autoWidth": true,
  86.                     "columns": columns,
  87.                     paging: false,
  88.                     ordering: false,
  89.                     searching: false,
  90.                     info: false,
  91.                     processing: true
  92.                 });
  93.             }
  94.  
  95.             return typeDatatable
  96.         }
  97.     </script>  
  98.     </body>
  99. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!